HTML & CSS Roadmap (8 Weeks)

Week 1: HTML Basics and CSS Introduction

We’ll focus on building a strong foundation in web development by covering HTML basics and
introducing CSS concepts during the first week of your learning journey.

Day 1: Introduction
On Day 1, you will cover the following topics:

 Begin with the basics: You will learn how to write content in HTML, which forms the core
structure of web pages.
 Building the foundation: Discover how to create the structural framework of a webpage
using HTML.
 Navigating the web: Understand the process of linking one web page to another using
HTML.
 Content presentation: Explore various HTML tags and elements to input and structure
data.
 CSS - Types of Styling: Gain an initial understanding of Cascading Style Sheets (CSS)
and its different styling approaches.
 Inline CSS: Dive into inline CSS, exploring its structure and properties, including
concepts like height, width, margin, and padding.
Link to Day 1 Material
https://drive.google.com/folderview?id=1laj3Bsdd0E-Vu1izLTt-V7p6pn3-3Orb

Day 2: Layout Practice:

Day 2 will be dedicated to practicing layouts to reinforce your understanding of HTML and CSS
concepts.
Link to Day 2 Layout Practice (Complete Folder 2)
https://drive.google.com/folderview?id=1laj3Bsdd0E-Vu1izLTt-V7p6pn3-3Orb
Day 3-4: Layouts
Continuing from Day 2, Day 3 and Day 4 will focus on layouts. You'll work on understanding the
relationships between parent and child elements or tags while still exploring inline CSS.
Link to Day 3-4 Layout Practice (Complete Folder 3)
https://drive.google.com/folderview?id=1laj3Bsdd0E-Vu1izLTt-V7p6pn3-3Orb

Day 5-6: Internal CSS

On Day 5 and Day 6, you will shift your attention to:

 Internal CSS
 Utilizing the ID selector
 Display property
 Background-image
 Image tag
 Highlighting the differences and applications
Link to Day 5-6 Internal CSS (Complete Folder 4)
https://drive.google.com/folderview?id=1laj3Bsdd0E-Vu1izLTt-V7p6pn3-3Orb
By the end of Week 1, you will have acquired a solid foundation in HTML and CSS, setting the
stage for your continued journey into web development. Keep following this roadmap to build on
these essential skills and delve deeper into the world of web design and development.

Week 2: Hands-On Projects with HTML and CSS

This week is all about applying the foundational knowledge of HTML and CSS to create real,
functional websites. We'll emphasize the practical side of things, giving you the opportunity to
roll up your sleeves and start building websites from scratch.

Day 7: Revision
Link to Revision Material (Complete Folder 1)
https://drive.google.com/folderview?id=1laj3Bsdd0E-Vu1izLTt-V7p6pn3-3Orb)
This folder is designed to prepare you for building your first website project, the "Ildy" website.

Day 8-9: 1st Website - Ildy Website

Link to Ildy Website  https://colorlibhub.com/illdy/
In this project, you will delve into:
  Utilizing various extensions.
 Understanding units such as vh, vw, and %.
 Implementing the pseudo-class :hover.
 Distinguishing between inline and block elements.
 Creating lists with UL and LI, OL, and data-list.
 Incorporating Google Fonts.
 Styling buttons.
 Applying Internal CSS with class selectors.
 Utilizing the clip path Generator.
 Incorporating icons.
 Working with inputs and text-area elements.

Day 10-11: 2nd Website (1st Page) - Flaris Website

Link to Flaris Website  https://flaris.pl/
On the first page of the Flaris website, you will learn:

 Introducing the concept of Position Fixed.

 Emphasizing transitions in the Navbar.
 Using anchor tags via ID.

Day 12: Building 2nd Page of Flaris Website (Aircraft)

Link to Flaris Aircraft Page  https://flaris.pl/aircraft/
On this day, you will explore:

 Different positioning techniques, including Fixed, sticky, relative, and absolute.

Day 13: Building 3rd Page of Flaris Website (Piloting Courses)

Link to Flaris Piloting Courses Page  https://flaris.pl/fly/
During Day 13, students will independently complete this page, applying the knowledge gained
from previous lessons.

Day 14: Building 4th Page of Flaris Website (Purchase)

Link to Flaris Purchase Page  https://flaris.pl/purchase/
In the final day of this week, while working on the 4th page of the Flaris website, you will:

 Work with Select and option elements.

 Understand File linking concepts.
By actively participating in these practical projects, you will not only solidify your understanding
of HTML and CSS but also gain hands-on experience in creating real-world websites. This
practical approach will enhance your web development skills and prepare you for more complex
projects in the following weeks. Keep up the great work!

Week 3: Advanced CSS Techniques and Real-World Projects

In the third week of your HTML and CSS learning journey, we will delve into advanced CSS
techniques, including animations, transformations, gradients, and engage in real-world project
building.

Day 15-18: CSS Animations & Building 3rd Website - Neoron Website
Link to Neoron Website  http://demo.auburnforest.com/html/neuron/demo/index.html
During this period, you will explore CSS animations, covering:

 Keyframes from & to.

 All animation properties.
In the Neoron Website project, students will learn:

 Implementing drop-down menus.

 Utilizing the Transform property.
 Applying the Box-shadow property.
 Creating linear, radial, and conic gradients.
 Using linear gradients on icons.
 Creating slider animations with percentage keyframes.
 Working with the pseudo-element placeholder.

Day 19: Building Tesla Website (1st Page)

Link to Tesla Website  https://www.tesla.com/
On Day 19, you will work on the Tesla Website's Home Page and incorporate various
techniques such as:

 Integrating the Video Tag with its attributes.

 Implementing Animation On Scroll.
 Creating dropdown menus, and more.

Day 20-22: Building Tesla Website (2nd Page) - Model S

Link to Tesla Model S Page  https://www.tesla.com/models
During these days, you will focus on the Model S page of the Tesla Website and implement
video animations to enhance user engagement.

Day 23: Building Tesla Website (3rd Page) - Shop

Link to Tesla Shop Page  https://shop.tesla.com/
On the final day of this week, you will work on the Shop page of the Tesla Website, where you
will develop a slider to improve the user experience.

By completing these advanced CSS techniques and real-world projects, you will expand your
skill set and gain valuable experience in creating dynamic and engaging web applications.
These skills will be instrumental in your journey toward becoming a proficient web developer.
Keep up the excellent work!

Week 4: Advanced CSS Techniques and Complex Projects

In the fourth week of your HTML and CSS learning journey, we will further enhance your CSS
skills by delving into intricate topics such as text animations, advanced selectors, 3D
animations, and the creative use of pseudo-elements.

Day 24-25: Building Kerri Website

Link to Kerri Website  https://kerrivpreview.netlify.app/light/index_1
During this period, you will engage in the Kerri Website project, where the focus will be on:

 Implementing captivating text animations to enhance user experience.

 Reviewing and refining positioning techniques.

Day 26-28: Building Techno Website

Link to Techno Website  https://techno.dreamitsolution.net/
In the Techno Website project, students will explore:

 Comprehensive coverage of all six types of selectors, including class selectors, ID

selectors, and more.
 Introduction to text and 3D animations, making web content more dynamic and
engaging.
 A deep dive into Pseudo Elements, including ::After and ::Before, to add creative
elements to your web designs.
By actively participating in these advanced CSS techniques and complex projects, you will gain
a deeper understanding of CSS and its capabilities. These skills will empower you to create
visually stunning and interactive web applications, setting the stage for more complex and
ambitious projects in your journey to becoming a proficient web developer. Keep up the great
work!

Week 5: Responsive Design Mastery

In the fifth week of your HTML and CSS learning journey, we will focus on mastering the art of
responsive design. This week, we'll explore templates, harness the power of Flexbox for
creating flexible layouts, and apply these skills to real projects like the Electro website.

Day 29-30: Understanding the Principles of Responsive Design

During this phase, students will delve into the principles of responsive design by exploring
templates from W3schools. Two templates are specifically highlighted:
1. Architect Template 
https://www.w3schools.com/w3css/tryw3css_templates_architect.htm
2. Portfolio Template 
https://www.w3schools.com/w3css/tryw3css_templates_portfolio.htm

Day 31-32: Flex Froggy Game & Project

In this project, students will learn the concept of Flex for creating responsive websites. They will
engage with the Flex Froggy Game, an interactive learning tool for mastering Flex properties.
Additionally, students will apply their knowledge by building a responsive website based on the
following W3schools template:
Food Blog Template  https://www.w3schools.com/w3css/tryw3css_templates_food_blog.htm

Day 33-36: Building Electro Website

For the core project of this week, students will work on the Electro website, a Colorlib template
that emphasizes responsive design principles.
Electro Colorlib Website  https://preview.colorlib.com/theme/electro/
During this project, students will learn:

 How to make the slider animations responsive, ensuring that the website adapts
seamlessly to various screen sizes and devices.
By the end of Week 5, you will have honed your skills in responsive design, enabling you to
create web applications that look and function beautifully across a wide range of devices and
screen sizes. These skills are crucial for modern web development, as responsive design is a
fundamental aspect of delivering a great user experience. Keep up the excellent work!

Week 6: Advanced Website Projects and Responsive Web

Design
In the sixth week of your HTML and CSS learning journey, we will continue to focus on
advanced website projects. This week, we'll be working on the Ella Mart and Neoreach
websites, emphasizing practical application and ensuring responsiveness is a key consideration
throughout.

Day 37-41: Building Ella Mart Website

Link to Ella Mart Website  https://new-ella-demo.myshopify.com/?fts=0
During this phase, students will engage in building the Ella Mart website and learn the following
skills:

 Implementing a click slider using CSS.

 Creating a slider using the target Pseudo-Class in CSS.
 Building a radio slider.
 Practicing Flexbox layouts for flexible and responsive design.

Day 42-45: Building Neoreach Website

Link to Neoreach Website  https://neoreach.com/
In this project, students are encouraged to unleash their creativity while building the Neoreach
website. The focus will be on ensuring the website is fully responsive, adapting seamlessly to
different screen sizes and devices.
By working on these advanced website projects and maintaining a strong emphasis on
responsive web design, you will further strengthen your web development skills and gain hands-
on experience in tackling complex tasks. These projects will challenge you and provide valuable
insights into creating web applications that are both visually appealing and functional across a
variety of platforms. Keep up the great work!

Week 7: Grid Design - Building Grid Structure

In the seventh week of your HTML and CSS learning journey, we will immerse ourselves in the
world of grid design. This week's focus is on constructing grid structures and ensuring
responsiveness in web layouts.
Day 46: Grid Game and Gallery Template
On Day 46, students will engage in learning grid design properties through two tasks:

 Grid Garden Game: This interactive game will help students grasp the essential
properties of grid layouts.
 Gallery Template (Any): Students will explore and apply grid structures in the context of
creating a gallery template.

Day 47-49: Limrick Website

In this phase, you will work on the Limrick website, consisting of five pages with distinct layouts.
The emphasis is on mastering grid design and ensuring responsiveness throughout the website.
Here are the pages:

1. Building Home Page

Link to Home Page  http://preview.themeforest.net/item/limerick-a-colorful-and-modern-
multipurpose-portfolio-
template/full_screen_preview/23270614?_ga=2.258961930.1814933821.1694011217-
95645491.1694011217

2. Building About Us Page

Link to About Us Page  http://preview.themeforest.net/item/limerick-a-colorful-and-
modern-multipurpose-portfolio-
template/full_screen_preview/23270614?_ga=2.195828837.819548572.1695710517-
942203587.1695710517

3. Building Designer Home Page

Link to Designer Home Page  http://preview.themeforest.net/item/limerick-a-colorful-and-
modern-multipurpose-portfolio-
template/full_screen_preview/23270614?_ga=2.195828837.819548572.1695710517-
942203587.1695710517

4. Building Parallax Home Page

Link to Parallax Home Page  http://preview.themeforest.net/item/limerick-a-colorful-and-
modern-multipurpose-portfolio-
template/full_screen_preview/23270614?_ga=2.195828837.819548572.1695710517-
942203587.1695710517
 5. Blog List Page
Link to Blog List Page  http://preview.themeforest.net/item/limerick-a-colorful-and-modern-
multipurpose-portfolio-
template/full_screen_preview/23270614?_ga=2.195828837.819548572.1695710517-
942203587.1695710517

During these days, you will:

 Apply grid design principles to create visually appealing and well-structured web layouts.
 Focus on making the website responsive to different screen sizes and devices, ensuring
a seamless user experience.

By working on these grid design projects, you will gain expertise in creating flexible and dynamic
web layouts while sharpening your skills in responsive web design. These skills are crucial for
building modern, visually appealing, and user-friendly websites. Keep up the excellent work!

Week 8: HTML CSS Revision

In the eighth and final week of your HTML and CSS learning journey, we will focus on
comprehensive revision to solidify your understanding of these fundamental web development
technologies.

Helion Website: Five Pages for Comprehensive HTML and CSS Revision
For in-depth revision, you will work on five different pages from the Helion website, each offering
unique challenges and opportunities for reinforcing your HTML and CSS skills. Here are the
links to the five pages:

1. Helion Website Home  https://helion.axiomthemes.com/

This is the main landing page of the Helion website, providing a broad overview of the site's
content and design.

2. Photographer Page  https://helion.axiomthemes.com/home-14-photographer/

Explore the photographer-themed page to revise and practice specific design elements and
layout techniques.
 3. NFT Page  https://helion.axiomthemes.com/home-17-nft/
The NFT-themed page offers a unique opportunity to reinforce your understanding of CSS
styling and layout.

4. Architect Page  https://helion.axiomthemes.com/home-6-architect/

Dive into the architect-themed page to revise and enhance your skills in structuring web
content.

5. Personal Page  https://helion.axiomthemes.com/home-2-personal/

The personal-themed page provides an opportunity to work on individual portfolio elements
and fine-tune your CSS styling.

Conclusion: Creative Website Project

To conclude the program, you will embark on a creative website project. Final project will allow
you to apply all the knowledge and skills you've acquired throughout the program and
demonstrate your proficiency in HTML and CSS.
By the end of Week 8, you will have honed your HTML and CSS skills through comprehensive
revision and practical application, preparing you to tackle more advanced web development
projects in the future. Congratulations on your dedication and hard work throughout this module!