Ćwiczenia powtórzeniowe z HTML i CSS - Projekt

Opis projektu: Strona internetowa z formularzem i stylem

Twoim zadaniem jest stworzenie prostej, lecz w pełni funkcjonalnej strony internetowej z użyciem HTML5 i CSS, która będzie spełniała konkretne wymagania związane z semantyką, poprawnym formatowaniem, układem treści oraz walidacją formularzy. Projekt ma na celu nauczenie Cię podstaw HTML i CSS oraz poprawnego tworzenia struktury i wyglądu strony.

Wymagania projektu:

  1. Podstawowa struktura dokumentu HTML5

    • Stwórz stronę opartą na poprawnej strukturze HTML5, zawierającą niezbędne elementy.

  2. Nagłówki i paragrafy

    • Użyj poprawnie znaczniki do tworzenia nagłówków o różnych poziomach oraz do wyświetlania tekstu w paragrafach.

  3. Listy

    • Użyj odpowiednich znaczników HTML do tworzenia list uporządkowanych lub nieuporządkowanych, poprawnie strukturyzując ich elementy.

  4. Linki zewnętrzne i wewnętrzne

    • Dodaj na stronie linki prowadzące zarówno do innych sekcji tej samej strony (linki wewnętrzne), jak i do zewnętrznych witryn (linki zewnętrzne).

  5. Obrazy

    • Dodaj na stronę co najmniej jeden obrazek za pomocą znacznika img, poprawnie ustawiając jego ścieżkę, tekst alternatywny oraz wymiary.

  6. Znaczniki meta

    • Dodaj do sekcji <head> metatagi (dla responsywności strony) oraz tytuł strony wyświetlany w karcie przeglądarki.

  7. Formularz z walidacją

    • Stwórz formularz zawierający różne typy pól (np. tekstowe, e-mail, hasło, pole wyboru, przycisk przesyłania).
    • Zastosuj walidację na kilku polach (np. sprawdzenie poprawności formatu e-mail, wymagane pola tekstowe).

  8. Semantyczne znaczniki HTML

    • Użyj semantycznych znaczników, takich jak, by poprawnie zorganizować treści na stronie.

  9. Stylizacja tabeli

    • Stwórz tabelę i zastosuj stylowanie CSS, które poprawi jej czytelność, np. kolor tła, obramowania komórek, odstępy między komórkami.

  10. Stylowanie strony za pomocą CSS

  • Dodaj tło dla całej strony lub wybranych sekcji.
  • Dodaj obramowania dla wybranych elementów (np. obrazków, nagłówków, list).
  • Zastosuj stylowanie list i odnośników, np. zmień wygląd wypunktowania list oraz kolory linków.
  • Wykorzystaj box model (marginesy, padding, obramowanie) do odpowiedniego rozmieszczenia elementów.
  • Zastosuj pozycjonowanie elementów przy użyciu position: fixed (np. przyklejony pasek nawigacyjny).
  • Stwórz układ strony za pomocą flexbox lub grid – zapewnij, że układ strony będzie responsywny, dostosowując się do różnych rozmiarów ekranu.

Dodatkowe wymagania:

  • Strona musi być responsywna i dobrze wyglądać zarówno na komputerze, jak i urządzeniach mobilnych.
  • Stylowanie powinno być schludne, z dobrze dobranymi kolorami i proporcjami elementów.

Treść strony jest dowolna.