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://gum.co/DyUWhj

📚 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

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

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

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

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

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

🔗 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
https://www.youtube.com/watch?v=yfoY53QXEnI

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
https://www.youtube.com/watch?v=PkZNo7MFNFg

REACT

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

(Free) React JS Crash Course – 2019
https://www.youtube.com/watch?v=sBws8MSXN7A

🔔 SUBSCRIBE 🔔

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

👋 FOLLOW US 👋

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

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

source