Practice: Semantic HTML + CSS Fundamentals

📋 Table of Contents

• ⏰ Estimated Duration
• 🎯 Objectives
• 📂 Starting Point
• 🔑 UI Elements to Create in Your Landing
• 📋 Activities
  • 1. Explore and Observe (15 min)
  • 2. Intervene: Create Your Semantic Landing (30 min)
  • 3. CSS Styles (30 min)
  • 4. Reflection (10 min)
  • 💡 Suggested Prompts to Improve Your index.html with Copilot
  • 🎨 HTML Structure and Content
• 🎨 CSS Styles
  • 🧭 ATELIER Reflection
  • ⚠️ Critical Note
• ✅ Deliverable

⏰ Estimated Duration

90 minutes (1 full session)

🎯 Objectives

• Practice semantic HTML structure following Mozilla’s guidelines.
• Apply CSS fundamentals from Mozilla.
• Modify the initial landing page in your index.html project.
• Use Git and commits to document your process in your ATELIER repository:
  👉 ATELIER Methodology.

📂 Starting Point

• Your cloned repository:
  student-project-template
• Key files:
  • index.html → landing page structure.
  • assets/css/index.css → basic styles.

🔑 UI Elements to Create in Your Landing

1. Header with navigation (<header> + <nav>).

   • Site logo or title.
   • Menu with internal links (About, Projects, Contact).

2. Hero section (initial block with <h1> and subtitle).

   • Brief phrase explaining what the website is about.
   • Option: include an image or highlighted background color.

3. “About Me” section (<section>).

   • Introduction paragraph.
   • Optional profile image.

4. Projects gallery (<section> + <article>).

   • At least 2 <article> elements with title and description.
   • Optional: screenshot or <figure>.

5. Contact form (<form> with <input> + <textarea> + <button>).

   • Symbolic (does not need to send anything).

6. Footer (<footer>).

   • Copyright information.
   • Links to social networks or GitHub.

📋 Activities

1. Explore and Observe (15 min)

1. Open index.html in VSCode.
2. Analyze its structure. Are there <header>, <main>, <footer>?
3. Check MDN: Semantic HTML.
4. In your browser, inspect your page with DevTools to see how elements are rendered.

2. Intervene: Create Your Semantic Landing (30 min)

• Minimum structure you should create in index.html:

<header>
	<h1>My Landing</h1>
	<nav>
		<a href="#about">About Me</a>
		<a href="#projects">Projects</a>
		<a href="#contact">Contact</a>
	</nav>
</header>

<main>
	<section id="hero">
		<h2>Welcome</h2>
		<p>An inspiring phrase for my site.</p>
	</section>

	<section id="about">
		<h2>About Me</h2>
		<p>Personal introduction text.</p>
	</section>

	<section id="projects">
		<h2>Projects</h2>
		<article>
			<h3>Project 1</h3>
			<p>Brief description.</p>
		</article>
		<article>
			<h3>Project 2</h3>
			<p>Brief description.</p>
		</article>
	</section>

	<section id="contact">
		<h2>Contact</h2>
		<form>
			<input type="text" placeholder="Your name" required />
			<input type="email" placeholder="Your email" required />
			<textarea placeholder="Your message"></textarea>
			<button type="submit">Send</button>
		</form>
	</section>
</main>

<footer>
	<p>© 2025 · My Name</p>
</footer>

3. CSS Styles (30 min)

In assets/css/index.css apply CSS fundamentals:

body {
	font-family: sans-serif;
	line-height: 1.5;
	max-width: 900px;
	margin: 0 auto;
	padding: 1rem;
}

header,
footer {
	background: #f0f0f0;
	padding: 1rem;
}

nav a {
	margin-right: 1rem;
	text-decoration: none;
	color: #0066cc;
}

section {
	margin-bottom: 2rem;
}

form {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

4. Reflection (10 min)

At the end of index.html, add:

<!-- ATELIER Reflection: I learned that semantic elements improve accessibility 
and that CSS allows me to give visual hierarchy without altering HTML structure. -->

💡 Suggested Prompts to Improve Your index.html with Copilot

These prompts are phrases you can write as comments in your code.
Copilot will generate suggestions that you should then critically review (don’t accept anything without understanding it).

🎨 HTML Structure and Content

<!-- Create a "hero" section with a main title, subtitle and a call-to-action button -->

<!-- Add an article with image, title and paragraph inside the projects section -->

<!-- Generate a contact form with name, email and message -->

<!-- Create a footer with links to social networks (GitHub, LinkedIn, Instagram) -->

<!-- Include a testimonials section with three quotes and people's names -->

🎨 CSS Styles

/* Create a hero style with gradient background and centered text */

/* Add responsive styles: make navigation menu turn into a column on small screens */

/* Apply a two-column grid to the projects gallery */

/* Define button styles with hover and smooth transition */

/* Give consistent styling to the form: inputs with rounded borders and padding */

🧭 ATELIER Reflection

After using a prompt, add a comment with your evaluation:

<!-- ATELIER Reflection: Copilot suggested a hero with background image. I adapted it to text because it improves accessibility. -->

⚠️ Critical Note

• Copilot doesn’t always follow good semantic or accessible practices.
• Verify that tags are correct (<header>, <main>, <section>, <article>, <footer>).
• Adjust the code to your own style and design.

✅ Deliverable

• index.html populated with your landing page (with all UI elements).
• assets/css/index.css with applied styles.
• Final ATELIER reflection comment.
• Commit to your repo:

git add index.html assets/css/index.css
git commit -m "Populate semantic landing page with CSS fundamentals"
git push