![Cover image for Build a Modern Website from Scratch - FULL Tutorial 1+ hour [FREE]](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F5yrqfqrmkalvp26z7d5g.png)
In the modern web, responsiveness is so important that your website needs to respond to every device with different screen sizes.
In this tutorial, we are going to build a Modern and Professional website using HTML, CSS, and a bit of JavaScript.
We are going to use the Mobile-First Approach.
__________ 🎥 Video Tutorial __________
__________ 🔖 Tutorial Structure __________
INTRODUCTION
[00:00] - Introduction
[00:48] - Project setups + Working FigmaHERO AREA
[01:42] - Hero Area section HTML
[06:13] - Hero Area section CSS
[19:56] - Hero Area section Responsiveness
[22:34] - Organizing CSS + Comment sectionsABOUT US
[25:02] - About us section HTML
[26:52] - About us section CSSACCOMMODATIONS
[33:36] - Accommodations section HTML
[38:17] - Accommodations section CSS
[44:37] - Accommodations section Responsiveness + AnimationTESTIMONIALS
[49:35] - Testimonials section HTML
[54:16] - Testimonials section CSSIMPROVEMENTS
[01:01:32] - Fixed Top Navigation With Transition
[01:06:39] - Date input Safari, Default Date input valueDEPLOYMENT
[01:07:53] - Deploy Website with Github Pages
[01:09:27] - Happy Coding
__________ 🐣 About me __________
- I am the founder of https://devchallenges.io/
- Follow my Twitter https://twitter.com/thunghiemdinh
- Join Discord https://discord.com/invite/3R6vFeM
Top comments (4)
That Awesome!
Wow that is so cool, thanks for helping us learning how to create websites. I have created lots of different websites in my life. I don't actually think that scratch is the best website for building websites. I have never liked Scratch as a website that can create websites. If you still don't have any idea what type of website you want to create, you can just access this link sitebuilder.reviews/web-design/10-..., to understand what you really want. Hope I helped!
That was remarkable,just completed coding through this video and I am more empowered now.My journey towards becoming a developer is tough and worth the while.Keep up with the good work Thu.
Great tutorial.
You can also try to use Desech Studio to import your figma design file and then you only need to do slight adjustments compared to writing it by hand.