Course Classes

Design and code a landing page with Jesse

Vídeos

Outros

0h04m

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

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.

0h08m

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

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

0h07m

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

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

0h28m

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

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

0h18m

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

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 -

0h35m

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

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

0h29m

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

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

0h32m

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

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

0h25m

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

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

0h16m

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

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

0h09m

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

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

0h21m

12 - Basic Responsive Web Development | Design & Code Series

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

0h11m

13 - Responsive Images | Design & Code Series

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.

0h14m

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

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

0h13m

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

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

0h01m

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

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