Set up your coding environment using our in-browser editor. No installation required! Learn how to save your work, ask Mentor for help, and get started with ease.

• Intro to the course and layout
• Using the Hackr HTML editor
• How to save your work
• Using Mentor AI for help
• Quiz - Getting Started

Learn the essential structure of an HTML page and begin building your first page with headers, paragraphs, and basic formatting.

• HTML boilerplate explained
• Creating your first HTML page
• Using headings, paragraphs, and dividers
• Quiz - HTML Basics

Enhance your HTML pages with navigation links, organized lists, and beautiful images.

• Unordered and ordered lists
• Hyperlinks and email links
• Adding remote images and image attributes
• Quiz - Lists, Links & Images

Start styling your HTML pages with CSS. Learn the different ways to apply styles and how to write clean, reusable rules.

• Inline, internal, and external CSS
• CSS syntax and selectors
• Adding fonts, colors, and backgrounds
• Quiz - CSS Basics

Understand how elements behave on the page using the CSS box model. Group and organize your content like a pro.

• Box model fundamentals
• Block vs inline elements
• Using <div> for layout
• Spacing with margin and padding
• Quiz - Layout & Box Model

Polish your page with better fonts, spacing, and visual appeal. Learn how to use Google Fonts and subtle styling tricks.

• Styling fonts with CSS
• Adding Google Fonts
• Aligning and spacing text
• Using .section styling for polish
• Quiz - Typography & Styling

Review the checklist of everything you’ve learned so far. Make sure you’re ready for the capstone project.

• Review HTML tags and structure
• CSS styling techniques
• Box model and typography refresher
• Final setup for the project

Put it all together to build your first real website — a personal portfolio page you can customize and share.

• Project setup and file structure
• Header with name and image
• About, Skills, Projects, Contact sections
• Styling with CSS and Google Fonts