#5. Podsumujmy wiedzę oraz zbudujmy stronę o sobie 😉

Tym postem chciałbym podsumować materiał poprzez ćwiczenie utrwalające zdobytej wiedzy z moich dotychczasowych postów🙂

Wynikiem ćwiczenia będzie prosta strona “O mnie”🙂

Tak więc – do dzieła❕📝

Ćwiczenie

  1. Przejdź do codesandbox. Utwórz nowy plik statyczny.
  2. Możesz pozostawić przykładowy kod który się wygenerował. Nie tłumaczyłem znacznika <meta>, ale zostawmy go w kodzie. Przyjdzie czas na moim blogu i na mete 😃
  3. Wykonajmy deklarację strony.
  4. Tytuł – “Strona – O mnie”.
  5. W znaczniku body dodaj następujące style: tło jasno niebieskie oraz rodzaj czcionki – Arial.
  6. Wciśnij Ctrl+S (zapisywanie). Jeżeli podgląd się zmienił na niebieski to jest ok👍
  7. Wewnątrz nagłówka h1, zamiast przykładu wstaw swoje imię i nazwisko. Zapisz Ctrl+S.
  8. Następnie dodaj znacznik div. W nim dodaj style: białe tło, padding o wielkości 15px, cień: box-shadow: 4px 4px yellow; oraz dolny margines margin-bottom: 15px; (dwa ostatnie deklarację omówimy w trakcie postów o CSS🙂).
  9. Wewnątrz znaczników div-a dodaj nagłówek drugiego stopnia z tekstem “O mnie”.
  10. Pod nagłówek dodaj akapit i napisz kilka słów…📝🙂Zapisz Ctrl+S.
  11. Dodaj kolejnego diva (pod pierwszym zamykającego diva). Style takie same jak w pierwszym div-ie
  12. W drugim divie umieść nagłówek drugiego stopnia z treścią: “Zainteresowania”.
  13. Poniżej nagłówka dodaj listę <ul></ul>. W tagu <ul> dodaj style i ustaw, aby czcionka w nim była w kolorze czerwonym.
  14. Wewnątrz nowej listy utwórz kilka elementów <li></li> i wpisz w nich swoje zainteresowania. Zapisz Ctrl+S.
  15. Utwórz linka do osobnego pliku z jednego “zainteresowania” (<li><a href=”jedno-zainteresowanie.html”>Jedno zainteresowanie</a></li>. Następnie utwórz taki plik jak nazwałeś w href, a następnie wrzuć przykładowy kod. Zapisz Ctrl+S.
  16. Dodaj kolejnego diva (pod drugim zamykającego diva). Style takie same jak w drugim div-ie.
  17. W drugim divie umieść nagłówek drugiego stopnia z treścią: “Filmy”.
  18. Pod nagłówkiem “Filmy” umieść tabele <table></table>. W stylach dodaj jej szerokość na 100% (width: 100%;).
  19. Między znacznikami tabeli dodaj nagłówek tabeli <thead></thead> a w nim wiersz z dwoma komórkami <tr></tr> a w środku <th></th>.
  20. W pierwszej komórce wpisz “Tytuł filmu” a w drugiej “Ocena”.
  21. Następnie w tabeli dodaj znacznik <tbody></tbody> a w nim trzy wiersze wraz z komórkami <tr><td></td><td></td></tr>.
  22. Uzupełnij puste komórki w tabeli tytułami filmów oraz swoją oceną.
  23. W elemencie <table> dodaj styl ramki: border: 3px solid green;
  24. W ostatnim punkcie daj się ponieść fantazji: dodaj do swojej strony co chcesz❕😎 Zapisz Ctrl+S. Zrobiłeś swoją stronkę “O mnie” 🙂👍
ROZWIĄZANIE ĆWICZENIA. KLIKNIJ, ABY PODEJRZEĆ...

jolly-platform-rtb7n

jolly-platform-rtb7n by danielminschinski

Mam nadzieję że większość elementów które pokazałem do tej pory umieściłem w powyższym ćwiczeniu🙂 Oczywiście, jeżeli masz pomysły na rozbudowę swojej strony “O mnie” to działaj❕ Każda linijka kodu napisana samodzielnie jest kluczem do sukcesu🙂

Kolejny post będzie z kategorii organizacyjnych. Muszę opracować aktualizację postu „Plan nauki Frontend Developera”💪📚. Przede wszystkim dodam kolejne tytuły postów. Chciałbym to zrobić jeszcze w tym tygodniu, ale nie wiem czy się wyrobie… Człowiek po prostu zalatany🏃‍♂️😃

Tak więc, do kolejnego postu.🖐 Pozdrawiam😉

Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA