Coding a Website from Scratch! (Figma → HTML/CSS/JS)
In this video, we code a project from scratch using HTML, CSS, and JavaScript, based on a design provided by Frontend Mentor. This hands-on tutorial is perfect for beginners who want to learn the fundamentals of frontend development.
You'll learn how to structure a basic HTML page, apply modern CSS techniques, use JavaScript to handle the DOM, and implement form validation.
🎨 Design Source:
🔗 https://www.frontendmentor.io/challen...
🎯 Who Is This For? Beginners & aspiring frontend developers
💻 Technologies Used: HTML5, CSS3, JavaScript
📌 Topics Covered: Responsive design, card layout, Flexbox, form validation, accessibility, SEO, DOM manipulation
Don’t forget to like the video and subscribe for more content! 😊
⏱️ Timestamps:
00:00 Intro
00:20 Project Overview
02:11 Preview Figma Design
05:07 Setting Up Project
07:29 Writing HTML
13:11 Writing CSS
41:40 Responsive Design
48:55 Form Validation With JS
01:00:53 Making Form Accessible
01:05:07 Outro
📬 Contact: [email protected]
📁 GitHub: https://github.com/gumrahsindar
📸 Instagram: / gumrah.codes
🎵 TikTok: / gumrahsindar
💼 LinkedIn: / gumrahsindar
#html #css #javascript #frontend #figmatocode #frontendmentor #webdevelopment #frontendtutorial #responsivewebdesign #cssforbeginners #frontendforbeginners #learnfrontend #webdesigntutorial