How to Make a Website Using HTML and CSS - Coding Adobe XD Web Design Tutorial

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

Grab it

Learn to create a responsive website by converting an Adobe XD design into HTML and CSS in this 39-minute tutorial. Follow along as the instructor demonstrates how to implement background gradient shapes and SVG images, set up the project structure, and code the home page. Discover techniques for adding custom fonts, icons, and styling elements using CSS. Explore responsive design principles by implementing media queries for different screen sizes. By the end of this hands-on tutorial, gain practical skills in web development and design implementation using industry-standard tools and techniques.

Syllabus

What we're building
Learn where you can design the website with Adobe Xd
Start coding using VS Code
Where to get the project images on Github
Creating our index.html file
Linking our CSS file
Creating our style.css file
Open our project with Live Server
Creating our home page HTML code
Adding Fontawesome icon CDN into our project
Adding google font Montserrat
Updating our style.css
Adding our first media query for responsiveness
Final Design