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

Опубликовано: 01 Январь 1970
на канале: Ari Pxl

1,362

💬 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

• All assets can be found here - https://aripxl.com/content/html5-tuto...

🔗 Links mentioned in this video

• Figma Design part of this video -    • Figma Tutorial for Beginners: Learn Figma ...
• CSS Part of this video -    • CSS Tutorial for Absolute Beginners and De...
• 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/autom...
• W3School HTML Tags - https://www.w3schools.com/TAGS/defaul...

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

♥️ Download Figma - https://psxid.figma.com/it2ka6qdk5dl
🦆 Sign up for Spaceduck - https://spaceduck.com

=====

🎥 Watch next

👉 Learn to Style This Code in CSS -    • CSS Tutorial for Absolute Beginners and De...
👉 Learn to Design This in Figma -    • Figma Tutorial for Beginners: Learn Figma ...
👉 Introduction to Web Development & Coding for Designers -    • Introduction to Web Development Concepts f...

=====

🕰 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://ariurl.com
• https://aripxl.com

=====

👍 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 - [email protected]

=====

🔢 Subscriber Count

639

=====

📑 Hashtags

#HTMLTutorial #CodingForDesigners #WebDevelopment