#12. Strona sklepu komputerowego

Dla podsumowania zdobytej wiedzy przede wszystkim z mojego bloga, stworzymy prostą stronę sklepu komputerowego. Użyjemy poznane sposoby dobierania odpowiednich kolorów, czcionek oraz rozmieszczania elementów. Tak więc – do dzieła💪

Ćwiczenie

  1. Stwórz nowy projekt w codesandbox.
  2. Wykonaj podstawowy szkielet strony (tytuł, link do stylów, itd…).
  3. Między selektorami “body” dodaj div-a z klasą “header”. Kolejnego diva umieść z klasą “top”. Wewnątrz dodaj nagłówek “h1” z klasą “title”, np. “Sklep komputerowy”. Pod nim dodaj nagłówek “h2” z informacją “Witamy wszystkich serdecznie!”. Następnie dodaj przykładowy nagłówek.
  4. Kolejno utwórz div-a z klasą “container”.
  5. W środku dodaj nagłówek “h2” z zawartością: “Cennik”.
  6. Dodaj całą strukturę tabeli, tzn. “table” ▶ “thead” ▶ “tr” ▶ “th” ▶ “tbody” ▶ “tr” ▶ “td”.
  7. Następnie w nagłówku tabeli, między znacznikami “th” dodaj pozycje: “Nazwa produktu” oraz “Cena”.
  8. Analogicznie dodaj w treści tabeli, tzn. “td” kilka pozycji sprzętu komputerowego oraz ich ceny.
  9. Jeżeli nie stworzyłeś jeszcze pliku “style.css”, to zrób to teraz.
  10. W pliku style.css dodaj wewnątrz selektora “body” deklarację: “font-family: ‘Lato’, sans-serif;”.
  11. Utwórz do klasy “title” następujące deklarację styli: “font-family: ‘Raleway’, sans-serif;”, podkreślenie tekstu: “text-decoration: underline;” oraz spraw by czcionka została powiększona do 40px.
  12. Na chwilę obecną nasza strona jest czarno biała. Pora na ożywienie, poprzez dodanie kolorów i grafiki, aby zachęcić do zainteresowania użytkowników naszą stroną. Tworzymy stronę sklepu komputerowego, więc ciekawym pomysłem będzie dodanie zdjęcia sprzętu komputerowego jako tło nagłówka.
  13. Dodajmy do selektora body kolor tła: “background-color: lightblue;”
  14. Następnie umieść przykładowe zdjęcie z internetu do klasy “header” właściwością “background: url(https://stacktips.pl/wp-content/uploads/2018/08/Sprz%C4%99t-komputerowy-%E2%80%93-w-sieci%C3%B3wkach-czy-przez-internet.jpg) 20% 60% no-repeat;” oraz wyśrodkujmy teskt: “text-align: center;”.
  15. Pod dodanym obrazkiem dodaj właściwość, dzięki której nasze zdjęcie rozciągnie się na całą szerokość strony nie tracąc proporcji: “background-size: cover;”. Następnie dodaj: “padding: 100px 0;”, aby dodać “wolną” odległość od nagłówka.
  16. Spraw, by tekst był bardziej czytelny. Dodaj półprzezroczyste tło i zmień jego kolor. Użyj selektora klasy “top” i wpisz w nim właściwość: “background-color: rgba(40, 160, 80, 0.8);”. Następnie dodaj padding o rozmiarze 10px.
  17. Dodaj do klasy “container” tło w kolorze białym, padding na 50px oraz marginesy “50px auto”
  18. Następnie spraw, aby szerokość kontenera klasy “container” wynosiła 80% pełnej szerokości strony. Maksymalną szerokość (max-width) ustaw na 700px.
  19. Utwórz selektor wybierający jednocześnie wszystkie komórki nagłówka (table th) oraz ciała (table td) tabeli. Dodaj do niego deklarację obramowania: “border: 1px solid #00d382;”.
  20. Aby zrobić przestrzeń w komórkach dodaj: “padding: 5px;”.
  21. Stwórz selektor “th” i dodaj w nim deklarację “background: #00d382;”.
  22. Spraw, aby po najechaniu kursorem na wiersz tabeli podświetlił się w kolorze. Należy dodać selektor z pseudoklasą “tr:hover” do którego dodaj deklarację “background: #00d382;”.
  23. Dodaj ostatnie poprawki do strony – do selektora klasy “top” dopisz właściwość: “width: 80%; border-radius: 10px; oraz padding: 30px;“.
  24. Stwórz selektor “table” i dopisz do niego właściwość: “width: 100%;”. Efektem będzie rozszerzona tabela na całą szerokość kontenera.
  25. To na tyle😉 Dobrnąłeś do końca zadania👍💪 Zachęcam do dodawania dodatkowych zmian stworzonych przez Was stronach 😉
ROZWIĄZANIE ĆWICZENIA. KLIKNIJ, ABY PODEJRZEĆ…

adoring-bogdan-uqn0d

adoring-bogdan-uqn0d by danielminschinski


Długa przerwa od ostatniego postu spowodowana jest licznymi obowiązkami oraz coraz większą ilością projektów do wykonania. Ale oczywiście nie odpuszczam i lecę dalej z tematem💪💻

W kolejnym poście rozszerzę mój wpis:

„Plan nauki Frontend Developera”💪📚

Poznacie kolejne tematy, które postaram się Wam przybliżyć w postach w najbliższym czasie⌚⏳

Do następnego❕😉 ..a zapomniałem – polecam zapisywać się do newslettera ◀◀

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