HTML/CSS, Poradniki webdevelopera

Zadania HTML/CSS

0

Przygotowaliśmy zestaw zadań, które wspomogą Twój rozwój w projektowaniu stron internetowych. Każde zadanie będzie pewnym fragmentem większej układanki. Wykonaj każde z nich i pochwal się efektami w przypadku pytań, zapraszamy do pozostawienia komentarzy.

Zadanie 1.

Utwórz plik o nazwie index.html, gdzie umieścisz pełną strukturę HTML5 oraz dołączysz zewnętrzny arkusz stylów o nazwie np. style.css (podłączenie pliku należy wdrożyć w sekcji)

Zadanie 2.

W sekcji przygotuj strukturę nawigacji – składającą się z:

  • miejsca na logo
  • miejsca na nawigację
  • miejsca na szybki kontakt (np. numer telefonu)

Do przygotowania struktury zalecamy skorzystać z divów

Zadanie 3.

Utwórz nową sekcję odpowiadającą za grafikę powitalną. Grafika powitalna powinna zostać umieszczona jako tło elementu np. diva oraz zajmować 100% szerokości wyświetlacza. W centrum grafiki należy umieścić napis „Witaj HTML”, który ma posiadać białe tło oraz odstępy 20px z każdej strony.

Zadanie 4.

Utwórz kontener na treść strony – wydziel mu odpowiednią szerokość oraz wyrównaj do środka np.

selektor{width:1270px; margin:0 auto;}

(kontener narzuci zewnętrznie odstępy, przez co treść nie będzie zajmować 100% szerokości ekranu)

Zadanie 5.

Utwórz sekcję „o mnie” w której zawrzesz krótkie informację o sobie i dlaczego uczysz się projektować strony internetowe. Sama sekcja ma wyglądać ciekawie, proponujemy tekst przełamać jakąś ciekawą grafiką (ułożenie siatki 50% na 50% – sekcję 50% zajmuje tekst, drugą sekcję 50% zajmuje grafika).

Zadanie 6.

Utwórz sekcję CTA (zachęcającą do kontaktu) – może być to pasek składający się z grafiki z napisem bądź przyciskiem. Pasek powinien obejmować 100% szerokości ekranu.

Zadanie 7.

Utwórz sekcję odpowiadającą za oferowane usługi według schematu:

  • Wyśrodkowany nagłówek „usługi”
  • 3 boxy (każdy ma zajmować 30% maksymalnej szerokości).
  • Po najechaniu na box, ma zmieniać się jego tło oraz zaokrąglać narożniki

Pierwszy box

Tytuł: Projektowanie stron internetowych
Tekst: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim semper sapien eget consectetur. Proin in pulvinar purus. Sed malesuada aliquet scelerisque.

Drugi box

Tytuł: Projektowanie sklepów internetowych
Tekst: Phasellus vel rutrum nisl. Phasellus mattis sapien ullamcorper nibh feugiat, quis pellentesque felis mattis. Phasellus at elementum urna.

Trzeci box

Tytuł: Administracja serwisów internetowych
Tekst: Sed tincidunt maximus commodo. Integer eu vestibulum lectus, ac blandit turpis. Aenean luctus arcu tristique vulputate rhoncus.

Zadanie 8.

Przygotuj sekcję odpowiadająca za stopkę strony, gdzie umieścisz 3 podsekcje:

  • Pokrótce o mnie (tekst o mnie)
  • Usługi (lista usług)
  • Szybki kontaktu (przykładowy nr telefonu wraz z emailem)

Zadanie 9.*

Zadanie dodatkowe. Sprawdź responsywność serwisu oraz popraw ją tak, aby wszystkie elementy były w siatce oraz wyglądały estetycznie. Do zrealizowania tego zadania przydadzą Ci się CSS @media Rule

Podsumowanie

Wykonując każde z powyższych zadań uzyskasz w efekcie stronę internetową. Zachęcamy do podzielenia się efektami oraz do zadawania pytań w momencie kiedy coś jest niejasne 🙂

Przydatne linki:

https://cyberiusz.pl/czym-jest-html5-i-jak-powinna-wygladac-struktura-pliku/
https://cyberiusz.pl/jak-dodac-css-do-html/
https://cyberiusz.pl/czym-sa-divy-podstawy-struktur-html/
https://cyberiusz.pl/jak-wstawic-hiperlacze-w-html/
https://cyberiusz.pl/jak-stworzyc-obramowanie-w-html/
https://cyberiusz.pl/jak-pogrubic-tekst-w-html/
https://cyberiusz.pl/jak-utworzyc-tlo-w-html/
https://cyberiusz.pl/jak-wysrodkowac-tekst-w-html/
https://cyberiusz.pl/jak-zmienic-kolor-czcionki-html/

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *