From Figma to Browser: Building a Website with HTML, CSS, and JS #1
In this video, we code a design from scratch using HTML, CSS, and JavaScript. The design is sourced from the Frontend Mentor platform. This hands-on and beginner-friendly tutorial covers core HTML structures, modern CSS techniques, JavaScript DOM manipulation, and form validation.
🔗 Design Source:
https://www.frontendmentor.io/challen...
🎯 Who It's For: Beginners and anyone who wants to learn frontend development
💻 Technologies Used: HTML5, CSS3, JavaScript
📌 Topics Covered: responsive design, using @layer in CSS, card layouts, flexbox, grid, accessibility, SEO, DOM (Document Object Model)
Don’t forget to subscribe and like the video! See you in the next one 😊
⏱ Timestamps:
00:00 Intro
00:23 Project Overview
01:26 Previewing the Figma Design
02:59 Project Setup
05:00 Writing HTML
19:29 Writing CSS
36:20 Using clamp() for responsive typography
46:25 grid-template-areas in CSS
49:16 Outro
📬 Contact: [email protected]
🌐 GitHub: github.com/gumrahsindar
📸 Instagram: @gumrah.codes
🎵 TikTok: @gumrahsindar
🔗 LinkedIn: linkedin.com/in/gumrahsindar
#html #css #javascript #frontend #figmatocode #handsoncoding #frontendmentor
#frontendtutorial #csstutorial #learnfrontend #frontenddevelopment
#cssforbeginners #webdesigntutorial