Course Classes
Design and code a landing page with Jesse

1

Start course

1 - Design & Code a Responsive Landing Page from Start to Finish - Series Intro04m

This series is all about the web design and development process from start to finish. I am going to be taking you through the entire creative process from sketching and wireframing to high res mockups and full development phase.

Remember to Subscribe https://goo.gl/6vCw64

This is the series intro where I talk quickly about what you can expect from the series and how you can best follow along and get the most out of the series itself.

I have never done a series this large, and my hope is that you will grow as a designer and developer not because I am perfect but because you have allowed yourself to stumble and fail with me on the road to making something you can be proud of.

I made this series because I believe that by teaching it I will learn and grow from not only the experience of creating the project but getting feedback from you all.

1. Intro - https://youtu.be/sr6jDeAoXCc
2. Discovery - https://youtu.be/g2aSWqU0gqA
3. Wireframe & Moodboard - https://youtu.be/boF058Bh5lo
4.

2 - Design & Code a Responsive Landing Page from Start to Finish | Discovery & Project Req's08m

This is episode 2 where we will be doing the research and discovery portion of the process. 80% percent of a designer job is done in the research and discovery phase.

Research and Discovery can mean a lot of different things to different people. For me, it means researching the client, the industry, the requirements of the project and creating a set of project needs we can work off of to build the site. I also create a list of tasks I need to accomplish to create the project. At the end of my research, I usually compile some sort of competitive set to present my client.

Remember to Subscribe https://goo.gl/6vCw64

1. Intro - https://youtu.be/sr6jDeAoXCc
2. Discovery - https://youtu.be/g2aSWqU0gqA
3. Wireframe & Moodboard - https://youtu.be/boF058Bh5lo
4. Visual Design Part 1 - https://youtu.be/3xWViyhRGd4
5. Visual Design Part 2 - https://youtu.be/HqykJljlN2A
6. Setting up the Dev environment - https://youtu.be/cXbRAdPXpRA
7. Coding the Nav and Header - https://youtu.be/Boc_IZNzlh

3 - Design & Code a Responsive Landing Page from Start to Finish | Wireframe & Mood Board07m

Wireframing and Mood Boarding are the first steps in the visual design process. This is video 3 and we are gonna start with a blank page and end up with a structure and a look and feel to start pursuing in next weeks design videos.

There are a lot of ways you can do both wireframes and mood boards, this is just my way so if you do it differently that's cool too. Everything I do in the series is a little on the chill side since its a 1-page concept project, so please keep in mind that the more serious the project or client is you would want to ramp this process up with better deliverables.

Remember to Subscribe https://goo.gl/6vCw64

1. Intro - https://youtu.be/sr6jDeAoXCc
2. Discovery - https://youtu.be/g2aSWqU0gqA
3. Wireframe & Moodboard - https://youtu.be/boF058Bh5lo
4. Visual Design Part 1 - https://youtu.be/3xWViyhRGd4
5. Visual Design Part 2 - https://youtu.be/HqykJljlN2A
6. Setting up the Dev environment - https://youtu.be/cXbRAdPXpRA
7. Coding the Nav and Header - https://y

4 - Design & Code a Responsive Landing Page from Start to Finish | Visual Design Part 1 - StyleTile28m

Visual design is what we are all waiting for as designers, but it’s important to take into account all the hard work we have done in the design process up to this point. Research, wireframes, moodboards, competitive sets, etc… all go into this first portion of the visual design process.

Remember to Subscribe https://goo.gl/6vCw64

I know I always get so excited and want rush straight to making full-fledged mockups as soon as the discovery phase is over… but be smart, don’t rush, take your time.

That’s why I have broken the visual design process down to 2 parts in my design process, that’s also why you might have been thinking my moodboards were a bit “loosey-goosey”. I have waited patiently while doing all the discovery work for this moment where instead of creating high-res mockups, I create Style-Tiles for the project.

I didn’t create the style tile process, just adopted it from these smart people.

http://styletil.es/

Style Tiles are a design deliverable consisting of fonts, c

5 - Design & Code a Responsive Landing Page from Start to Finish | Visual Design Part 2 - High-Res18m

Visual design is what we are all waiting for as designers, and the time has come to take everything that we have done and create something that actually looks like a website. In this video, we create the desktop and mobile view of our project that we will export assets and handoff for development.

Remember to Subscribe https://goo.gl/6vCw64

I cut the visual design process into 2 parts because each of them is very comprehensive processes and combining them can feel a bit overwhelming. I had over 1.5 hours of footage for this video and used a lot of fast forward to make it digestible, If you have questions about the process please feel free to tweet me or comment below. http://twitter.com/iamjesseshow

1. Intro - https://youtu.be/sr6jDeAoXCc
2. Discovery - https://youtu.be/g2aSWqU0gqA
3. Wireframe & Moodboard - https://youtu.be/boF058Bh5lo
4. Visual Design Part 1 - https://youtu.be/3xWViyhRGd4
5. Visual Design Part 2 - https://youtu.be/HqykJljlN2A
6. Setting up the Dev environment -

6 - Design & Code a Responsive Landing Page from Start to Finish | Setting Up Your Dev Environment35m

We are moving into code!!! After completing the visual design phase of the project we are now ready to code this website piece by piece, but first, we want to take the time and set up our development environment so everything is really dialed and our workflow is really smooth.

http://jesseshowalter.com/starter-kit/

Remember to Subscribe https://goo.gl/6vCw64

We will be focusing on setting up our tooling for the project that will include, getting a text editor, understanding the command line, installing node, NPM, sass, and gulp , and then setting up your github repo and connecting it to your local project using the Github Desktop app.

------------------------------------------------------------------------------------

1. Setting up text editor (Atom) - 1:09
2. Set up command line/terminal 1:45
3. Establish a GitHub repository 2:20
4. Set up your code locally using GitHub Desktop 4:34
5. Download starter kit code 7:27
6. Take a look at the starter files in Atom 10:03
7. Brief disc

7 - Design & Code a Responsive Landing Page from Start to Finish | Coding the Nav and Header29m

Oh man, I love coding in HTML, CSS, and Javascript! This is the part of the series where we put away our designer hats and pick up our front-end developer hat and rock that thang!

Remember to Subscribe https://goo.gl/6vCw64

Today's episode marks the start of the coding portion of the series. We will be going piece by piece and working our way through the site and along the way learning valuable skills that will help us be better developers.

Topics covered in this video include, Sass, HTML, CSS, Responsive coding techniques, Gulp, Command line, Github basics, CSS Flexbox and more.

1. Intro - https://youtu.be/sr6jDeAoXCc
2. Discovery - https://youtu.be/g2aSWqU0gqA
3. Wireframe & Moodboard - https://youtu.be/boF058Bh5lo
4. Visual Design Part 1 - https://youtu.be/3xWViyhRGd4
5. Visual Design Part 2 - https://youtu.be/HqykJljlN2A
6. Setting up the Dev environment - https://youtu.be/cXbRAdPXpRA
7. Coding the Nav and Header - https://youtu.be/Boc_IZNzlh4
8. Coding the brand and feature

8 - Design & Code a Responsive Landing Page from Start to Finish | Coding the Logos & Features32m

Oh man, I love coding in HTML, CSS, and Javascript! This is the part of the series where we put away our designer hats and pick up our front-end developer hat and rock that thang!

Remember to Subscribe https://goo.gl/6vCw64

In today's episode, we continue on with our project by coding the Logo/Brand section as well as the features section. We get to use a lot of really modern front-end techniques in this one like CSS Grid, Psuedo elements, and responsive media queries.

CSS Grid Cheatsheet http://grid.malven.co/

I had a lot of fun coding these sections but I want you to know that I got stuck more than once. I forgot to add classes on HTML, had to figure out why the content wasn't centered, and lot's more. I tried to keep some of the challenges in without boring you too much ????I think it's important that you know that I got stuck from time to time so you don't get discouraged if it happens to you.

I also get the chance to dive a little deeper into GitHub and I hope that you will

9 - Design & Code a Responsive Landing Page from Start to Finish | Coding the Offer Section25m

Oh man, I love coding in HTML, CSS, and Javascript! This is the part of the series where we put away our designer hats and pick up our front-end developer hat and rock that thang!

Remember to Subscribe https://goo.gl/6vCw64

In today's episode, we continue on with our project by coding the Offer section. We will use some more flexbox to accomplish the project. If you want to learn more about flex box here are a few resources:
[Flexbox Defense](http://www.flexboxdefense.com/)
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
[Flexbox Froggy - A game for learning CSS flexbox](https://flexboxfroggy.com/)
https://medium.freecodecamp.org/flexbox-in-10-minutes-7295497804ed

CSS Grid Cheatsheet http://grid.malven.co/

Today we also get to dive deeper into Githib and using feature branches. I want to encourage you to make pull requests on the repo and be a contributor.

Github Basics

1. Fork the repo on Github https://github.com/jesseshowalter/jesseshowalter-starter-project
2. Clone o

10 - Design & Code a Responsive Landing Page from Start to Finish | Coding the Download Section16m

Oh man, I love coding in HTML, CSS, and Javascript! This is the part of the series where we put away our designer hats and pick up our front-end developer hat and rock that thang!

Remember to Subscribe https://goo.gl/6vCw64

In today's episode, we continue on with our project by coding the Download section. It's a relatively simple section but during the video, we will learn a few cool topics like:

Github Basics
Troubleshooting Sass errors
CSS positioning
CSS child-parent relationships
Combined CSS selectors
CSS Pseudo-elements
and more...

------------------------------------------------------------------------------------

1. Fork the repo on Github https://github.com/jesseshowalter/sho...
2. Clone of the repo locally using the Github Desktop App
3. Start a new branch that focuses on a specific improvement/feature
4. Make some changes in code that you think would improve the project
5. Make a pull request as shown in the video
6. Smile when you realize it's not as scary as you tho

11 - Coding the Footer & Fixes | Design & Code Series09m

Oh man, I love coding in HTML, CSS, and Javascript! This is the part of the series where we put away our designer hats and pick up our front-end developer hat and rock that thang!

Remember to Subscribe https://goo.gl/6vCw64

In today's episode, we continue on with our project by coding a really simple Footer. We will spend the majority of our time using our HTML and CSS skills to fix any other small issues with the current code before moving on to responsive web development principles. We will cover topics today such as:

- refactoring code
- gulp source maps
https://www.npmjs.com/package/gulp-sourcemaps



------------------------------------------------------------------------------------

1. Fork the repo on Github https://github.com/jesseshowalter/sho...
2. Clone of the repo locally using the Github Desktop App
3. Start a new branch that focuses on a specific improvement/feature
4. Make some changes in code that you think would improve the project
5. Make a pull request as shown

12 - Basic Responsive Web Development | Design & Code Series21m

In today's episode, we continue on with our project by Using some responsive web development techniques to make our site look great on all device sizes. We will cover topics today such as:

- Fluid grids
- Fluid units of measurement
- Media queries
- Building responsive from the start


Remember to Subscribe https://goo.gl/6vCw64


------------------------------------------------------------------------------------

1. Fork the repo on Github https://github.com/jesseshowalter/sho...
2. Clone of the repo locally using the Github Desktop App
3. Start a new branch that focuses on a specific improvement/feature
4. Make some changes in code that you think would improve the project
5. Make a pull request as shown in the video
6. Smile when you realize it's not as scary as you thought it would be
????????

------------------------------------------------------------------------------------

1. Intro - https://youtu.be/sr6jDeAoXCc
2. Discovery - https://youtu.be/g2aSWqU0gqA
3. Wireframe & M

13 - Responsive Images | Design & Code Series11m

In today's episode, we continue on with our project by using some responsive image techniques to make our site look great on all device sizes. We will cover topics today such as:

- Fluid grids
- Fluid units of measurement
- Media queries
- source and srcset
- picture element

Remember to Subscribe - https://goo.gl/6vCw64
Github Repo - https://github.com/jesseshowalter/shoeAppLandingPage


https://internetingishard.com/html-and-css/responsive-images/
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/
https://css-tricks.com/responsive-images-css/
https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
https://responsiveimages.org/


------------------------------------------------------------------------------------

1. Fork the repo on Github https://github.com/jesseshowalter/sho...
2. Clone of the repo locally using the Github Desktop App
3.

14 -Design & Code a Responsive Landing Page from Start to Finish | Responsive Navigation14m

In today's episode, we continue on with our project by creating a really simple responsive navigation to make our site look great on all device sizes. We will cover topics today such as:

- CSS
- basic javascript
- javascript functions
- media queries
- responsive nav techniques

Remember to Subscribe - https://goo.gl/6vCw64
Github Repo - https://github.com/jesseshowalter/shoeAppLandingPage


http://bradfrost.com/blog/web/responsive-nav-patterns/
http://bradfrost.com/blog/web/complex-navigation-patterns-for-responsive-design/
https://www.smashingmagazine.com/2017/04/overview-responsive-navigation-patterns/
https://speckyboy.com/responsive-navigation-solutions/
https://www.webpagefx.com/blog/web-design/responsive-menus/
https://codepen.io/jo_Geek/pen/xgbaEr


------------------------------------------------------------------------------------

1. Fork the repo on Github https://github.com/jesseshowalter/sho...
2. Clone of the repo locally using the Github Desktop App
3. Start a new bra

15 - Using Plugins and Open Source Code | Design & Code a Responsive Landing Page13m

In today's episode, we continue on with our project by adding some open source code to the site. There are so many problems that already have solutions built for them, but knowing which solution is the right one and when to go look for some help is the key to being efficient in your workflow.

The main points covered are:
1. how to identify quality code
2. how to install into your project
3. how to read documentation and use the code

I cover the 3 criteria for good open source good.
1. Well-trafficked
2. Actively developed
3. Good documentation

Remember to Subscribe - https://goo.gl/6vCw64
Github Repo - https://github.com/jesseshowalter/shoeAppLandingPage


------------------------------------------------------------------------------------

1. Fork the repo on Github https://github.com/jesseshowalter/sho...
2. Clone of the repo locally using the Github Desktop App
3. Start a new branch that focuses on a specific improvement/feature
4. Make some changes in code that you think would

16 - Series Outro | Design & Code a Responsive Landing Page01m

Just a quick thank you to everyone who watched the series, gave me feedback, showed encouragement, left a comment, or helped me in any way. You guys are awesome ????????

I will leave the repo untouched for a few weeks and then start merge in any pull requests as they come.

Remember to Subscribe - https://goo.gl/6vCw64
Github Repo - https://github.com/jesseshowalter/shoeAppLandingPage


------------------------------------------------------------------------------------

1. Fork the repo on Github https://github.com/jesseshowalter/sho...
2. Clone of the repo locally using the Github Desktop App
3. Start a new branch that focuses on a specific improvement/feature
4. Make some changes in code that you think would improve the project
5. Make a pull request as shown in the video
6. Smile when you realize it's not as scary as you thought it would be
????????

------------------------------------------------------------------------------------

1. Intro - https://youtu.be/sr6jDeAoXCc
2. Di

Our project is also available at:
Spanish Portuguese Hindi

Our best free courses

1

English lessons by Sonia

07 hours and 15 minutes

162

2

Web Development for beginners by LearnCode.academy

05 hours and 21 minutes

154

3

First Aid Training by St John Ambulance

02 hours and 40 minutes

147

4

Business Administration by Animate U

01 hours and 25 minutes

135

5

Android for beginners by The new boston

10 hours and 47 minutes

115

6

Self-Defense by Ando Mierzwa

01 hours and 24 minutes

89

7

Business english course by BED

02 hours and 44 minutes

85

8

English grammar by Oxford Online English

05 hours and 37 minutes

85

9

Investing like Warren Buffett with Preston Pysh

03 hours and 29 minutes

84

10

Social media marketing by Freemium

02 hours and 01 minutes

82

11

Human resource management concepts by Gregg Learning

00 hours and 00 minutes

81

12

Computer Science by CrashCourse

07 hours and 54 minutes

78

Get to know a little about our project that has been changing the lives of thousands of people through free courses.

+700 free courses +300 categories +1 million downloads +50 Thousand certificates issued Courses in 3 different languages

Found a good course on youtube and want to see it in our project, click here to indicate new courses.