CSS Technologies - Lesson Plan 1

HTML5 Semantic Tags & CSS Foundations

Lesson Plan 1 Overview

This module introduced HTML5 semantic tags and the fundamentals of CSS. The focus was on improving code structure, accessibility, and implementing basic styling techniques.

HTML5 Semantic Tag Conversion Practice

Project Description

Refactored outdated HTML structures by replacing div elements with semantic HTML5 tags like header, nav, and article to improve clarity and accessibility.

Link to Project

View Project

Reflection Statement

Before this project, I had a basic understanding of semantic elements but had not applied them in real-world scenarios. This exercise reinforced how critical they are for accessibility and readability. I initially struggled with determining the best elements for structuring content but learned to use section and article tags effectively. I need to practice more with structuring large-scale layouts.

CSS Basics Project

Project Description

Implemented fundamental CSS styling, focusing on typography, colors, box model, and layout fundamentals.

Link to Project

View Project

Reflection Statement

While I was familiar with basic CSS properties, this project pushed me to think critically about consistency in styling. I improved my understanding of the box model, but I found margin and padding behaviors tricky in certain layouts. Moving forward, I want to refine my approach to responsive design.

Final Overall Reflection on Lesson Plan 1

This lesson was a valuable foundation in both HTML structure and CSS basics. The hands-on experience solidified my understanding of semantic markup, and working with CSS properties improved my styling consistency. I aim to build on these skills by deepening my knowledge of responsive design and advanced layout techniques.