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

Ć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” 🙂👍