7-Day

7-Day HTML/CSS Challenge

HTML

In one week, go from the basics of HTML and CSS to building your first mini portfolio page, learning and practicing a little every day. This challenge is perfect if you are starting web development from absolute zero.

Challenge Days

Day 1: HTML Boilerplate and Structure

Create a basic HTML5 boilerplate (doctype, html, head and body). Add a heading, two paragraphs and an unordered list. Goal: understand the structure of an HTML ...

Day 2: Links and Images

Use anchor () and img tags to build a mini web page with links to two or three of your favorite websites and one image. Add a simple navigation menu too.

Day 3: CSS Basics: Selectors and Properties

Link your HTML file to a CSS file. Try element, class and id selectors. Set basic properties such as color, font-family and text-align.

Day 4: The Box Model and Layout

Learn the difference between margin, padding and border. Build a simple “card” component: a box with a border, some padding and rounded corners.

Day 5: Layouts with Flexbox

Learn Flexbox and use it to build a responsive navigation bar with the logo on the left and the menu items on the right. Try display: flex and justify-content.

Day 6: Build a Form

Build a contact form with name and email fields, a textarea for the message and a submit button. Add some CSS to style the form.

Day 7: Mini Project: Portfolio Landing Page

Combine everything you have learned so far and build your first simple portfolio landing page with an About section, a project card and a contact form. Congratu...