???? 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
• Completed Code - http://aripxs.net/KpGTEj
• Image Assets - http://aripxs.net/j8esqQ
• Figma Finished Exercise File - http://aripxs.net/eTOBvJ
• Figma Finished Prototype - http://aripxs.net/7JPBjX
???? Links mentioned in this video
• Figma Design part of this video - https://youtu.be/ZYHIhcAWudg
• CSS Part of this video - [Next Week]
• Visual Studio Code - https://code.visualstudio.com/
• Prettier Setup (Only if it doesn't work for you out of the box) - https://www.codereadability.com/automated-code-formatting-with-prettier/
• W3School HTML Tags - https://www.w3schools.com/TAGS/default.ASP
=====
???? Watch next
• Introduction to Web Development & Coding for Designers - https://youtu.be/s9rgmuB_FGE
• Figma Tutorial - https://youtu.be/ZYHIhcAWudg
• Introduction to UX Research - https://youtu.be/dFlACTzeq0w
=====
???? 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
31:32 - Coding the Sign-in.html and Finalising the Code
34:11 - Outro
=====
???? Connect
• https://linktr.ee/arysh
=====
???? 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
If you have any questions, comment on one of the videos or follow me and ask me on Instagram via DM. If you have a business-related question, email me at - ary@arysh.com
=====
???? Subscriber Count
639
=====
???? Hashtags
#HTMLTutorial #CodingForDesigners #WebDevelopment