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. AMAZING TUTORIAL MAN! I learned so much, I knew just basic CSS and this helped a lot! One question though. At 1:12:24 you pasted a code, where did you copy it from? Couldn't find where

  4. This Tutorial is just awesome .. I'm just making the transition from Java coding to frontend web design and this video makes me super exited. Thanks a lot mate :).

  5. my website ended up with a extra white space. the dev tool on chrome give me this attribute class="gr__127_0_0_1"

  6. 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.