HTML Tutorial for Beginners & Designers - Build a Simple Website From Figma to HTML - 2022

💬 Title

HTML5 Tutorial for Designers and Beginners.

=====

📒 Description

We started with our Figma Design last time and in this video, we're turning that design into a real-life HTML Layout. This video will not cover CSS but you will still learn a lot about important concepts in HTML.

Like & Subscribe

Episode 13

=====

🔗 Links to assets and files

🔗 Links mentioned in this video

🔗 Referral Links
You can support this channel by using my referral links

=====

🎥 Watch next

=====

🕰 Timestamps

0:00​ - Introduction
0:12 - What We're Building
1:11 - Project Setup
1:29 - VS Code Plugins
2:16 - Folders & Files Structure
4:04 - HTML Basics, Boilerplate & Emmet
5:08 - DOCTYPE
5:27 - HTML Tag
5:45 - Head Tag
7:38 - Body Tag
8:02 - Project Starter
8:56 - Design to Code - The Box Theory
9:53 - Section Tag
10:28 - Browser Developer Tool
11:04 - Block vs Inline Elements
12:44 - HTML Attributes
13:30 - Div Tag
14:30 - Import Images into VS Code
15:04 - Header Tag
15:27 - Image Tag
17:55 - HTML Comments - Setting up our Layout
18:57 - Coding the Form Section
19:47 - Heading and Paragraph Tags
21:12 - Hr Tag
21:36 - Form Tag & Setup
23:26 - Button Tag & Terms of Service
24:45 - Label & Input Tags & IDs
25:56 - Illustration Images & Finalising the Sign-up Page
30:54 - A Tag and Linking to the Sign-in page
34:11 - Outro

=====

🔗 Connect

=====

👍 Like & Subscribe

If you appreciate the hard work that went into this video, please show me some love by dropping a Like 👍 and sharing it with other people that you think can also benefit from this. If you have any questions, post a comment down below, and I’ll get back to you when I can. If you haven’t subscribed already, what are you waiting for? Subscribe and turn on the notification 🔔 so that you know when I upload new videos.

=====

🙃 About me

My name is Ari. I’m a digital product designer and developer with over 12 years of experience based in Sydney, Australia. I currently work for a startup, freelance on the side and make these videos to give back to our tech community. If you have any suggestions on how to improve these videos, then let me know!

=====

📧 Contact me

=====

🔢 Subscriber Count

639

=====

📑 Hashtags

#HTMLTutorial #CodingForDesigners #WebDevelopment

[olhabalumatkina]

it’s really sad for me now that your last vid was published 3 months ago, but I want to share: your lessons are incredible and absolutely working for me! Thank u a lot!

[dennisdiaz]

Great Intro to HTML. Keep up the good work!

[CodeIsForBros]

Such a helpful series! Came from the figma video and am so glad you are now covering how to implement the design!

btw what shortcut did you use at 24:32?

[boyd]

New to figma - so is there anyway to "export" from figma to html to give a start on the page or does one have to create the "wireframe" in figma and then do manually html coding as well as css

[taliageoffroy]

Figured out the Emmet extension.

Followed everything up until the 7.2 minute mark and when I 'open with live server' I get all the same numbers but no page title, it just says "listing directory". I've deleted and did over again 4 times, I'm not messing up, there's some error between you and me. I tried opening the file directly from Documents in another browser, that did not work :D don't know what to do, maybe it's not THAT important but I like to follow EXACTLY so I know I'm doing it right. Please help when you get a chance, thank you

[taliageoffroy]

I searched for the Emmet extensions and found maybe 5 different ones. I installed but the abbreviations are not working...I don't know what to do, thanks

[achaparro]

Your text size on vs code and other programs is too small, it's very difficult to read.