Struktura strony HTML
Nadszedł czas na ćwiczenie, podsumowujące kilka poprzednich materiałów. Będzie to prosta strona internetowa. Zaczynajmy‼😉
- Uruchom nowy projekt w codesandbox.
- Stwórz podstawowy szkielet strony www (deklarację). Nie zapomnij dodać linka do pliku style.css.
- W ciele dokumentu dodaj nawigacje z trzema odnośnikami – O mnie (#about), Oferta (#offer) i Kontakt (#contact). W nawiasie podaje prawidłową kolejność znaczników (nav -> ul -> li -> a).
- Pod nawigacją dodaj sekcję (section) z klasą “container” oraz identyfikatorem “about”. W środku umieść nagłówek h1 z treścią “O mnie”. Pod nim dodaj paragraf z przykładowym tekstem.
- Pod zamknięciem powyższej sekcji utwórz kolejną sekcję. Również dodaj do niej klasę “container”. Tym razem identyfikator będzie inny – “offer”. W środku umieść nagłówek h1 z treścią “Oferta”. Pod nagłówkiem dodaj tabele (table), nagłówek (thead), wiersz (tr) oraz cztery komórki nagłówka (th) z przykładowymi zawartościami. Pod zamknięciem nagłówka dodaj ciało tabeli (tbody), wiersz (tr) oraz cztery komórki tabeli (td) z przykładowymi zawartościami. Wiersze tabeli możesz skopiować kilkukrotnie, aby stworzyła się struktura tabelki z prawdziwego zdarzenia. Na koniec pozamykaj wszystkie znaczniki (tbody -> table -> section).
- Pod zamknięciem powyższej sekcji utwórz kolejną sekcję. Również dodaj do niej klasę “container”. Tym razem identyfikator będzie inny – “contact”. W środku umieść nagłówek h1 z treścią “Kontakt”. Następnie dodaj 2 paragrafy z przykładowymi danymi. Na koniec zamknij znacznikiem sekcji.
- Utwórz plik CSS – style.css
- Dodaj import do czcionki Open Sans:
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
- Utwórz regułę odnoszącą się do ciała dokumentu (body). W środku dodaj następujące właściwości: margines zerowy, przykładowy kolor tła oraz odniesienie się do czcionki zaimportowanej wcześniej (font-family: ‘Open Sans’, sans-serif;).
- Dodaj kolejną regułę – .container i nadaj jej następujące właściwości: maksymalną szerokość kontenera na 700px oraz minimalną na 400px, szerokość na 80% oraz margines góra/dół 20px a boki na auto, biały kolor tła, padding na 15px, zaokrąglenie ramki na 5px oraz cień jedno-pikselowy w kolorze czarnym.
lucid-meninsky-6bpe4
lucid-meninsky-6bpe4 danielminschinski
Stylowanie nawigacji i kontaktu
Zajmiemy się ostylowaniem nawigacji i zmianą wyglądu elementu p
w kontenerze o id contact
. Znajdujące się tam paragrafy mogłyby się trochę od siebie różnić. Zastosujemy dla nich nieco bardziej rozbudowane selektory. Również zbudujemy szkielet CSS dla belki z nawigacją, aby nadać jej ciekawy kształt.
- Utwórz kolejną regułę w pliku css. Tym razem dla nawigacji (nav). Dodaj do niej następujące właściwości: ciemny kolor tła, np. #222, białą czcionkę, dolny margines na 35px.
- Dla reguły
nav ul
ustaw padding i margines na zero. - Wszystkim elementom
li
wewnątrznav ul
ustaw wyświetlanie liniowo-blokowe. - Utwórz selektor
p:nth-of-type(1)
i spraw aby czcionka była pisana kursywą. - Kolejnym potrzebnym selektorem będzie:
p:nth-of-type(2)
, którego tekst powinien być pisany drukowanymi literami. - Dla linków
a
nawigacji ustaw następujące właściwości: wyświetlanie liniowo-blokowe, minimalną szerokość 120px,box-sizing: border-box;
, padding na 15px, wyśrodkowanie tekstu,text-decoration: none;
, biały kolor tekstu, kursor pointer i na koniec stan hover, gdy użytkownik najedzie na link kursorem, ustawi się kolor tła na#313545
.
nostalgic-architecture-gh3wy
nostalgic-architecture-gh3wy danielminschinski
Stylowanie tabeli
Nadszedł czas na ostylowanie tabeli. W materiale o pseudoklasach opisywałem :first-child
oraz :last-child
. Nadeszła okazja aby dokładnie je sobie przypomnieć i poćwiczyć😉
- Nadajmy naszej tabelce 100% szerokości,
border-collapse: collapse;
i wyśrodkujmy tekst. - Potomnym elementom
th
itd
ustawmy padding na 15px. - Selektorowi
table thead
ustawmy właściwość:background-color: #610a00;
- Wierszom tabeli (tr) dodajmy dwu-pikselową ciągłą linie (solid), dolną ramkę koloru
#8e8e91
. - Ostatniemu wierszowi usuńmy ramkę (
border-bottom: none;
). - Na koniec sprawmy, aby po najechaniu na wiersze będące potomkami table tbody, kolor tła ustawiany był na
#ededf5
.
youthful-goldberg-3ok4q
youthful-goldberg-3ok4q danielminschinski
Podsumowanie selektorów CSS stało się faktem. Powyższe ćwiczenie powinno być podsumowaniem tych kilku poprzednich materiałów.
W najbliższym czasie (czytaj: do końca tygodnia😉) udostępnię w “Planie nauki Frontend Developera”, tytuły materiałów które chciałbym zaprezentować dla Was na moim blogu😉 Mogę Wam już teraz zdradzić, że w najbliższym czasie pracować będziemy z Bootstrapem💪🔥
Dzięki za obecność i naukę razem ze Mną😉💪
Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA