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
- Przejdź do codesandbox. Utwórz nowy plik statyczny.
- 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 😃
- Wykonajmy deklarację strony.
- Tytuł – “Strona – O mnie”.
- W znaczniku body dodaj następujące style: tło jasno niebieskie oraz rodzaj czcionki – Arial.
- Wciśnij Ctrl+S (zapisywanie). Jeżeli podgląd się zmienił na niebieski to jest ok👍
- Wewnątrz nagłówka h1, zamiast przykładu wstaw swoje imię i nazwisko. Zapisz Ctrl+S.
- 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🙂).
- Wewnątrz znaczników div-a dodaj nagłówek drugiego stopnia z tekstem “O mnie”.
- Pod nagłówek dodaj akapit i napisz kilka słów…📝🙂Zapisz Ctrl+S.
- Dodaj kolejnego diva (pod pierwszym zamykającego diva). Style takie same jak w pierwszym div-ie
- W drugim divie umieść nagłówek drugiego stopnia z treścią: “Zainteresowania”.
- Poniżej nagłówka dodaj listę <ul></ul>. W tagu <ul> dodaj style i ustaw, aby czcionka w nim była w kolorze czerwonym.
- Wewnątrz nowej listy utwórz kilka elementów <li></li> i wpisz w nich swoje zainteresowania. Zapisz Ctrl+S.
- 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.
- Dodaj kolejnego diva (pod drugim zamykającego diva). Style takie same jak w drugim div-ie.
- W drugim divie umieść nagłówek drugiego stopnia z treścią: “Filmy”.
- Pod nagłówkiem “Filmy” umieść tabele <table></table>. W stylach dodaj jej szerokość na 100% (width: 100%;).
- 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>.
- W pierwszej komórce wpisz “Tytuł filmu” a w drugiej “Ocena”.
- Następnie w tabeli dodaj znacznik <tbody></tbody> a w nim trzy wiersze wraz z komórkami <tr><td></td><td></td></tr>.
- Uzupełnij puste komórki w tabeli tytułami filmów oraz swoją oceną.
- W elemencie <table> dodaj styl ramki: border: 3px solid green;
- W ostatnim punkcie daj się ponieść fantazji: dodaj do swojej strony co chcesz❕😎 Zapisz Ctrl+S. Zrobiłeś swoją stronkę “O mnie” 🙂👍
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