#41. Budowa strony internetowej

Struktura strony HTML

Nadszedł czas na ćwiczenie, podsumowujące kilka poprzednich materiałów. Będzie to prosta strona internetowa. Zaczynajmy‼😉

  1. Uruchom nowy projekt w codesandbox.
  2. Stwórz podstawowy szkielet strony www (deklarację). Nie zapomnij dodać linka do pliku style.css.
  3. 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).
  4. 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.
  5. 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).
  6. 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.
  7. Utwórz plik CSS – style.css
  8. Dodaj import do czcionki Open Sans: @import url(https://fonts.googleapis.com/css?family=Open+Sans);
  9. 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;).
  10. 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.
ĆWICZENIE. KLIKNIJ, ABY PODEJRZEĆ…

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.

  1. 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.
  2. Dla reguły nav ul ustaw padding i margines na zero.
  3. Wszystkim elementom li wewnątrz nav ul ustaw wyświetlanie liniowo-blokowe.
  4. Utwórz selektor p:nth-of-type(1) i spraw aby czcionka była pisana kursywą.
  5. Kolejnym potrzebnym selektorem będzie: p:nth-of-type(2), którego tekst powinien być pisany drukowanymi literami.
  6. 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.
ĆWICZENIE. KLIKNIJ, ABY PODEJRZEĆ…

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ć😉

  1. Nadajmy naszej tabelce 100% szerokości, border-collapse: collapse; i wyśrodkujmy tekst.
  2. Potomnym elementom th i td ustawmy padding na 15px.
  3. Selektorowi table thead ustawmy właściwość:background-color: #610a00;
  4. Wierszom tabeli (tr) dodajmy dwu-pikselową ciągłą linie (solid), dolną ramkę koloru #8e8e91.
  5. Ostatniemu wierszowi usuńmy ramkę (border-bottom: none;).
  6. Na koniec sprawmy, aby po najechaniu na wiersze będące potomkami table tbody, kolor tła ustawiany był na #ededf5.
ĆWICZENIE. KLIKNIJ, ABY PODEJRZEĆ…

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

 

 

Chcesz na bieżąco otrzymywać informację o nowych materiałach? Zapisz się do NEWSLETTERA!