Figma Web Design Tutorial: Step-by-Step Video Channel Web Design

Design a video channel landing page for your YouTube videos using Figma, a free web-based design and prototyping software. When you’re done you’ll move on to part 2 where you’ll write the HTML for the design.

πŸ’₯ DEMO SITE πŸ’₯

πŸ”— https://loving-roentgen-e1f6e3.netlify.com/

πŸ“‚ COURSE FILES πŸ“‚

πŸ”— https://www.skillthrive.com/courses/video-channel-web-development-course

πŸ“š LESSON LIST πŸ“š

Course Playlist: From Prototype to Website with Figma, HTML, CSS, and JavaScript

https://www.youtube.com/playlist?list=PLW0RabRDhwwwZn10Ng3VUOJi5DDW67GFX

Lesson 1: Figma Web Design Tutorial: Step-by-Step Video Channel Web Design

https://www.youtube.com/watch?v=QJubD4Xhduk

Lesson 2: HTML Tutorial: From Web Design Prototype to HTML

Lesson 3: CSS Tutorial: How to Style HTML with CSS

Lesson 4: jQuery Tutorial: YouTube Video Gallery and Responsive Lightbox Plugin

πŸ”— MENTIONED RESOURCES πŸ”—

Figma: https://www.figma.com/

Pexels Stock Video: https://www.pexels.com/videos/

Google Fonts: https://fonts.google.com/

Visual Studio Code: https://code.visualstudio.com/

HTML Boilerplate Extension: https://marketplace.visualstudio.com/items?itemName=sidthesloth.html5-boilerplate

Live Server Extension: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Border Box Explainer: https://www.paulirish.com/2012/box-sizing-border-box-ftw/

Font Awesome: https://fontawesome.com/

Font Awesome to PNG: http://fa2png.io/

Image Optim: https://imageoptim.com/mac

Lorem Ipsum Generator: https://loremipsum.io/

🌟 TOP RECOMMENDED COURSES 🌟

CSS

(Paid) Build Responsive Real World Websites with HTML5 and CSS3
https://www.udemy.com/design-and-develop-a-killer-website-with-html5-and-css3/

(Free) CSS Crash Course For Absolute Beginners

JAVASCRIPT

(Paid) The Complete JavaScript Course 2019: Build Real Projects!
https://www.udemy.com/the-complete-javascript-course/

(Free) Learn JavaScript – Full Course for Beginners

REACT

(Paid) The Complete React Web Developer Course (with Redux)
https://www.udemy.com/react-2nd-edition/

(Free) React JS Crash Course – 2019

πŸ”” SUBSCRIBE πŸ””

https://www.youtube.com/channel/UCvHKiUI75ytqUcN851fRR2w?sub_confirmation=1

πŸ‘‹ FOLLOW US πŸ‘‹

INSTAGRAM: https://instagram.com/skillthrive/

FACEBOOK: https://facebook.com/skillthrive/