Do It Yourself – Website Tutorials

In this web design project you will design a landing page in Sketch and then take that design to the web with HTML and CSS. You will also create an interactive play button using jQuery and the Wistia Javascript Player API.

This series is intended as a project-based course and will not go in-depth into HTML, CSS, or Javascript. If you want to learn more about those check out the links at the bottom of the description.

💥 DEMO SITE 💥

🔗 https://fervent-mirzakhani-ca63ee.netlify.com/

📂 COURSE FILES 📂

🔗 https://www.skillthrive.com/courses/sketch-design-and-code-landing-page

🎓 LESSON LIST 🎓

Lesson 1: Design the Landing Page in Sketch – 0:35

🔗 Sketch: https://www.sketch.com/

🔗 Stock Videos: https://www.pexels.com/videos/

🔗 Stock Photos: https://unsplash.com/

Lesson 2: Write the Basic Web Structure with HTML – 17:45

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

🔗 Wistia: https://wistia.com/

Lesson 3: Style the Website with CSS – 31:35

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

Lesson 4: Style the Hamburger Mobile Nav – 55:17

Lesson 5: Create an Interactive Button with jQuery – 01:10:21

🔗 Javascript Player API: https://wistia.com/support/developers/player-api

Lesson 6: Deploy the Site with Netlify Drop – 01:14:15

🔗 Netlify Drop: https://app.netlify.com/drop

🌟 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

CSS GRID

(Free) Flexbox CSS In 20 Minutes

(Free) A Complete Guide to CSS Flexbox

A Complete Guide to Flexbox

CSS FLEXBOX

(Free) CSS Grid Tutorial

(Free) A Complete Guide to CSS Grid

A Complete Guide to Grid

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

🔔 SUBSCRIBE 🔔

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

👋 FOLLOW US 👋

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

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

source