HTML & CSS Masterclass Tutorial

Comprehensive guide to modern HTML and CSS development.

Exercises

HTML & CSS Exercises

Practice makes perfect. Try to complete the following exercises without looking at the solutions!

Exercise 1: Create a Button

Create an <a> tag and style it using CSS so that it looks like a prominent call-to-action button. Ensure it has a hover effect that changes its background color and moves it up slightly using the transform property.

Exercise 2: Build a Profile Card

Build a responsive profile card. It should contain a circular profile image, a name, a bio paragraph, and a row of social media icons. Center the card on the screen using Flexbox on the body element.

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

Result

Topics

Introduction Environment Setup First Web Page Workflow & Tools Essentials Document Structure Text Content Lists & Tables Links & Navigation Images & Media Forms & Validation Reusable Components Styling Essentials Selectors & Specificity Cascade & Inheritance Typography Colors & Backgrounds Box Model Layout Fundamentals Positioning & Z-Index Flexbox CSS Grid Layout Patterns Responsive Design Responsive Components Custom Properties Calc & Functions Transitions Transforms Animations Effects & Filters Accessibility Design Systems Performance Debugging & Testing Tooling & Automation Landing Page Project Exercises Quiz