DEV Community

loading...
Cover image for Build a Modern Website from Scratch - FULL Tutorial 1+ hour [FREE]

Build a Modern Website from Scratch - FULL Tutorial 1+ hour [FREE]

nghiemthu profile image Thu Nghiem ・1 min read

Alt Text

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.

  • If you want to follow along, be sure to download the resource: HERE.

  • Demo Website: HERE

__________ 🎥 Video Tutorial __________

__________ 🔖 Tutorial Structure __________

  • INTRODUCTION
    [00:00] - Introduction
    [00:48] - Project setups + Working Figma

  • HERO AREA
    [01:42] - Hero Area section HTML
    [06:13] - Hero Area section CSS
    [19:56] - Hero Area section Responsiveness
    [22:34] - Organizing CSS + Comment sections

  • ABOUT US
    [25:02] - About us section HTML
    [26:52] - About us section CSS

  • ACCOMMODATIONS
    [33:36] - Accommodations section HTML
    [38:17] - Accommodations section CSS
    [44:37] - Accommodations section Responsiveness + Animation

  • TESTIMONIALS
    [49:35] - Testimonials section HTML
    [54:16] - Testimonials section CSS

  • IMPROVEMENTS
    [01:01:32] - Fixed Top Navigation With Transition
    [01:06:39] - Date input Safari, Default Date input value

  • DEPLOYMENT
    [01:07:53] - Deploy Website with Github Pages
    [01:09:27] - Happy Coding

__________ 🐣 About me __________

Discussion (2)

pic
Editor guide
Collapse
sirawit profile image
Dragodzs

That Awesome!

Collapse
kweyuvictor profile image
Kweyu Victor

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.