Exc1

Excercise 1

1. HTML Mastery:

Basic HTML Structure:

• Create a basic HTML page with a DOCTYPE, head, and body.

• <header>:

  • Include a site logo or title on the left.
  • Add a navigation bar with links to "Home", "About", "Services", and "Contact".

• <nav>:

  • Create a vertical side navigation bar that includes links to different sections of your content like "Section 1", "Section 2", and "Section 3".

• <article>:

  • Add a headline for your article, e.g., "The Importance of Web Development".
  • Write a few paragraphs of content relevant to your headline. Include subheadings for different topics within the article.
  • Insert a relevant image within the article content.

• <aside>:

  • Include a small section that provides additional information or context to your main content, like "Related Articles" or "Did you know?".

• <footer>: _ Add copyright information. _ Provide links to social media profiles or additional resources. _ Include a "Back to Top" link.

• Ensure all the content is organized and well-structured, making use of other relevant semantic tags as necessary.

Multimedia:

• Embed an image, video, and audio file into the HTML page. Ensure the video and audio have controls enabled for playback.

2. CSS Basics:

Selectors and Properties:

- Style the semantic tags you added in the HTML section. Give them distinct backgrounds, font sizes, and margins.
- Use both class and ID selectors to demonstrate the difference.

Typography and Colors:

- Change the font family of the article to a serif font and the nav to a sans-serif font.
- Use both named colors and hex values to style the text and background of different elements.

Backgrounds:

- Add a background image to the <header>. Ensure it covers the entire width and height of the header.

3. CSS Styling & Layout:

Box Model:

• Adjust the padding, margin, and border for the and elements.

Positioning:

• Position a "Back to Top" button at the bottom right of the page using absolute positioning.
• Add a sticky side navigation bar that stays at the top when scrolling.

Float:

• Float an image to the right inside the article, allowing text to wrap around it.

4. Flexbox & Grid:

Flexbox Layout:

• Convert the main content area of your page to a flex container.
• Add at least three items inside and demonstrate the flexibility of the flexbox by adjusting the size and order of these items.

Grid Layout:

• Convert the footer of your page to a grid container.
• Add four items inside and organize them in a 2x2 grid.
• Adjust the grid in the footer to stack items vertically on screens smaller than 600px in width.