About this course
Semantic structure, the box model, Flexbox, Grid and responsive design - building a personal portfolio site called DevFolio.
This is a 6-week short course - enough depth to build real projects and a portfolio piece, without a long commitment. It runs online in the August 2026 cohort (starting 1 August 2026) and is taught the EchoLens way: you learn by doing real, gradeable work rather than just watching lectures.
What's included
- Live, instructor-led online sessions across 4 weeks (10 hours total).
- Hands-on coding quests you solve inside the EchoLens browser compiler - nothing to install.
- Gems, stages and a leaderboard that keep you moving instead of grade anxiety.
- A verified certificate with a scannable QR code, ready to share on LinkedIn, when you finish.
- Completely free - no fee, just create an account and start.
What you will learn
Course outline - level by level
8 leveles, each with hands-on quests you clear in the portal.
- Level 1. HTML Basics - HTML describes the structure of a page using tags. Every page needs a basic skeleton (doctype, html, head, body). Tags like h1, p, a and img create headings, text, links and images. <!DOCTYPE html> <html> <head><title>DevFolio</title></head> <body> <h1>My Portfolio</h1> <p>Welcome to my work.</p> <img src="profile.jpg" alt="My profile photo"> </body> </html>
- Level 2. Lists, Links, Forms & Media - Lists (ul/ol) group items; nav holds navigation links; forms (input, textarea, button) collect user data. These build the interactive-looking parts of the page. <nav> <a href="#about">About</a> <a href="#projects">Projects</a> </nav> <form> <label for="email">Email</label> <input id="email" type="email"> </form>
- Level 3. Selectors, Colors & Fonts - CSS styles HTML. You select elements (by tag, .class, or #id) and set properties like color, background, and font-family. Link CSS with a <link> tag or a <style> block. body { background: #0D1117; color: #E7ECF3; font-family: sans-serif; } .accent { color: #38BDF8; }
- Level 4. The Box Model - Every element is a box with content, padding (space inside), border, and margin (space outside). Understanding this is essential - most layout confusion comes from the box model. .card { padding: 16px; border: 1px solid #333; margin: 12px; box-sizing: border-box; }
- Level 5. Flexbox - Flexbox arranges items in a row or column and controls their alignment and spacing. It's the go-to for navbars, centering, and one-dimensional layouts. .navbar { display: flex; justify-content: space-between; align-items: center; }
- Level 6. CSS Grid - Grid handles two-dimensional layouts - rows AND columns at once. It's ideal for galleries and card grids like the projects section. .projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
- Level 7. Media Queries & Responsiveness - Media queries apply different CSS at different screen widths, so the site looks right on phones, tablets and desktops. Mobile-first means designing for small screens, then adding rules for larger ones. <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> @media (max-width: 600px) { .navbar { flex-direction: column; } } </style>
- Level 8. Transitions & Finishing Touches - Transitions animate changes (like hover effects) smoothly. Shadows, hover states and small animations are the polish that makes a site feel professional. .card { transition: transform 0.2s; } .card:hover { transform: translateY(-4px); }
How you submit: Coding quests solved in the built-in EchoLens compiler.
Who it's for
CS-106: Fundamentals of HTML & CSS suits learners at a beginner to intermediate level who want a practical, project-based route into CS-106. You need only a browser and an internet connection - all coding runs inside the EchoLens compiler, so there is nothing to set up.
Certificate
Finish every stage and EchoLens issues a verified certificate carrying a QR code anyone can scan to confirm it on our site. You can add it to your CV or share it to LinkedIn in one click.