Switch from Engineering Graduate to HTML Basics Learner

Learn HTML fundamentals and build a real web project to showcase your skills.

Weekly Hours: 10
Estimated Weeks: 8

Phases

Explore HTML Fundamentals

Build a strong base with HTML by learning its main elements and simple layouts. Practice using tags to make sample pages and understand page structure.

2 weeks

Understand HTML structure
Use common tags (headings, paragraphs, links, images)
Build simple static pages
Use browser to view pages

Writing HTML tags (h1, p, a, img)
Structuring pages with div and span
Linking external files
Inserting images into pages

Beginner HTML Tutorial
HTML Reference Guide

Create and share a personal static home page (HTML file)
List and use 10 basic HTML tags in a sample page

Add Style with CSS Basics

Learn how to apply simple styles with CSS. Style your HTML pages and organize content visually. Start making your pages look cleaner and more readable.

2 weeks

Understand CSS selectors and properties
Apply colors, fonts, margins, and layout
Link CSS to HTML files
Experiment with simple class and ID selectors

Writing CSS rules (color, font-size, margin)
Connecting CSS file to HTML
Using class and ID in styling
Changing page layout using CSS

Beginner CSS Tutorial
CSS Reference Guide

Restyle the home page with at least 5 CSS rules
Before/after demo showing improved layout

Build Your Portfolio Project

Apply your HTML and CSS skills by building a small portfolio site. Add sections about yourself, projects, and contact info. Make sure it is easy to navigate and looks clean.

3 weeks

Plan basic site layout (3+ sections)
Create navigation links between sections
Organize content for easy reading
Test and fix page issues

Building multi-page layouts (about, projects, contact)
Creating navigation menus (using nav and a tags)
Improving user flow with layout variations
Checking for broken links

Sample Portfolio Templates
Free Images Library

Complete a 3-page portfolio site with working navigation
Demo: site open in browser, every link works

Deploy and Review Your Work

Publish your portfolio online using a free hosting tool. Test your site, write short instructions for viewers, and collect feedback to improve.

1 weeks

Deploy site using an online host
Test site on different devices
Write a short project readme
Gather feedback from at least 1 person

Uploading project files (Netlify or GitHub Pages)
Checking site on phone and computer
Writing a README file (site features and usage)

Netlify Guide
GitHub Pages Guide

Live project link published (deployed site)
Project readme shared alongside the site

Weekly Plan

Week	Focus	Why	Tasks	Deliverables
1	Learn HTML Structure and Tags	This sets the foundation for building web pages.	Read HTML basics (Beginner HTML Tutorial), Write simple pages with headings and paragraphs, Add images and links (from HTML Reference Guide), Open pages in web browser	HTML file with headings, images and links
2	Practice and Expand HTML Skills	Reinforcing core tags and layouts helps with retention.	Create a multi-section HTML page (about, contact), Practice using lists and tables, Add comments to your HTML, Collect feedback from a peer	Two HTML pages: home and about
3	Start CSS: Add Visual Style	CSS makes your pages look polished and organized.	Learn CSS selectors and syntax (Beginner CSS Tutorial), Create a CSS file and link to HTML page, Style text and backgrounds (using CSS Reference Guide), Change fonts and colors	Styled HTML page with at least 5 CSS changes
4	Advance CSS: Layouts and Responsive Design	Good layouts help the site look good on any device.	Use class and ID selectors for style, Adjust margins and padding, Test layout on tablet or phone, Fix layout or text issues	Responsive page screenshot or demo
5	Start Portfolio Project: Planning and Setup	A clear plan leads to a better, focused project.	List project sections (about, projects, contact), Sketch project layout on paper, Create empty HTML files for each section, Write navigation menu	Draft layout and files for portfolio
6	Build Portfolio Content and Navigation	Navigation and real content bring your site together.	Write real content (bio, project details, contact info), Link navigation menu between pages, Add images and links to projects, Check for missing links	Portfolio site with working navigation
7	Polish and Test Portfolio	Review and testing catch mistakes before launch.	Test navigation on multiple browsers, Ask a friend for feedback, Fix visual or link issues, Improve design per feedback	User-tested, improved portfolio site
8	Deploy and Document Portfolio	Publishing makes your project visible and helps learning.	Deploy site online (Netlify or GitHub Pages), Write README with features and instructions, Share your live link with a peer, Reflect on your progress	Live site and clear documentation