Excercise 1
-
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.
- Embed an image, video, and audio file into the HTML page. Ensure the video and audio have controls enabled for playback.
- 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.
- 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.
- Add a background image to the <header>. Ensure it covers the entire width and height of the header.
- Adjust the padding, margin, and border for the and elements.
- 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 an image to the right inside the article, allowing text to wrap around it.
- 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.
- 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.