Sketch Tutorial: HTML and CSS Website Design Course



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 ๐Ÿ’ฅ

๐Ÿ”—

๐Ÿ“‚ COURSE FILES ๐Ÿ“‚

๐Ÿ”—

๐ŸŽ“ LESSON LIST ๐ŸŽ“

Lesson 1: Design the Landing Page in Sketch โ€“ 0:35

๐Ÿ”— Sketch:

๐Ÿ”— Stock Videos:

๐Ÿ”— Stock Photos:

Lesson 2: Write the Basic Web Structure with HTML โ€“ 17:45

๐Ÿ”— Visual Studio Code:

๐Ÿ”— Wistia:

Lesson 3: Style the Website with CSS โ€“ 31:35

๐Ÿ”— Google Fonts:

Lesson 4: Style the Hamburger Mobile Nav โ€“ 55:17

Lesson 5: Create an Interactive Button with jQuery โ€“ 01:10:21

๐Ÿ”— Javascript Player API:

Lesson 6: Deploy the Site with Netlify Drop โ€“ 01:14:15

๐Ÿ”— Netlify Drop:

๐ŸŒŸ TOP RECOMMENDED COURSES ๐ŸŒŸ

CSS

(Paid) Build Responsive Real World Websites 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

CSS FLEXBOX

(Free) CSS Grid Tutorial

(Free) A Complete Guide to CSS Grid

JAVASCRIPT

(Paid) The Complete JavaScript Course 2019: Build Real Projects!

(Free) Learn JavaScript – Full Course for Beginners

๐Ÿ”” SUBSCRIBE ๐Ÿ””

๐Ÿ‘‹ FOLLOW US ๐Ÿ‘‹

INSTAGRAM:

FACEBOOK:

20 comments

  1. Thanks. Is there a workflow for design and implementation of HTML where what you design generates CSS directly if not give you a skeleton HTML file that applies the CSS automatically produced. In this video you are charged with remembering what you did in Sketch down to the color hex codes, writing CSS from an empty page.

  2. I've downloaded code from your site and there is a space between hamburger__meat and hamburger__bottom that is not clickable, can't understand what is the problem. Could you please check it?

  3. Where was the use of Sketch? Interesting to see your proficiency with CSS and Code but Sketch, I don't see any connection? In my rather infantile mind, I had hoped that the previous Sketch construction could have been directly turned into the HTML and CSS. Personally, again with my very, very limited knowledge of CSS, I can't stand the fiddling around and hoped Sketch would somehow obviate the need, but in fact Sketch is just another simplistic drawing program – albeit somewhat dedicated to page design… sigh!
    Okay, just looked at some of the extensions and finally dawned on me that the process in 2019 still requires first a design, agreement, and development. Seems horribly archaic though.

Leave a comment

Your email address will not be published.