Zadania na rozgrzewkę

Zadanie 1: Responsywna struktura strony z semantycznymi elementami

Stwórz stronę internetową przedstawiającą prosty profil użytkownika (np. profil programisty). Użyj semantycznych tagów HTML5, takich jak <header>, <nav>, <main>, <section>, <article>, <aside> i <footer>. Strona powinna zawierać:

• Nagłówek z logo i menu nawigacyjnym.
• Główną sekcję z opisem użytkownika, listą umiejętności (w formie nieuporządkowanej listy) i zdjęciem profilowym.
• Sidebar z linkami do mediów społecznościowych.
• Stopkę z informacjami kontaktowymi.

Stylizuj stronę za pomocą CSS, używając Flexbox do układu w poziomie dla sekcji głównej i sidebar’a.
Strona musi być responsywna: na ekranach poniżej 768px menu nawigacyjne powinno zmienić się w hamburger menu (użyj :hover i pseudo-elementów do symulacji, bez JavaScriptu), a układ stać się kolumnowy.
Pomyśl o hierarchii nagłówków (<h1> do <h3>) i zapewnij dostępność (np. alt dla obrazków).

Przykład rozwiązania:

Przykład rozwiązania:

HTML:

CSS: