Do It Yourself – Website Tutorials
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
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/
source