HomeОбразованиеRelated VideosMore From: Jesse Showalter

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

163 ratings | 5562 views
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 contribute to the project. If I wasn't clear in the video the steps are as follows: 1. Fork the repo on Github https://github.com/jesseshowalter/shoeAppLandingPage 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 & 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 section - https://youtu.be/O4gqpgRvYJg 9. Coding the Offer Section - https://youtu.be/JsLeiFbi8RM 10. Coding the Download Section - https://youtu.be/jMkAeo2uGHk ------------------------------------------------------------------------------------ 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. 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. ------------------------------------------------------------------------------------ ////////// Website http://www.jesseshowalter.com - ////////// Subscribe: https://goo.gl/6vCw64 - If you want to support the content I make and buy me a cup of coffee https://www.buymeacoffee.com/jesseshowalter ////////// Social Twitter: http://twitter.com/iamjesseshow Anchor: https://anchor.fm/iamjesseshow Instagram: https://www.instagram.com/iamjesseshow Medium: https://medium.com/@iamjesseshow - ////////// Equiptment Vlogging Camera - Panasonic G85 http://amzn.to/2EwumHn - Drone- DJI Spark http://amzn.to/2CpodH9QV
Html code for embedding videos on your blog
Text Comments (46)
Brian BG (1 month ago)
flexbox ?
Jesse Showalter (1 month ago)
Oh Ya!
jojo 2281 (3 months ago)
just got site envy, you make the process look so easy and fun. awesome vid thanks...
Abhi shek (3 months ago)
Hey man, love your videos. Great fan. Here's something that'll help you out: https://discuss.atom.io/t/scroll-past-the-bottom-of-the-document/3183 instead of pressing return key multiple times, just enable this scroll past end option. Life saver
Jesse Showalter (3 months ago)
Love it!
vince sanchez (3 months ago)
You are a gem bro
Jesse Showalter (3 months ago)
Thanks
Rodrigo Mendoza (6 months ago)
Do you speak Spanish? It sounds like you did sometimes during the video 😆
whyhelloana (6 months ago)
Love the energy! It's 12mn here, but it's refreshing to have found a tutorial that make me excited to want to try asap! A lot of the other videos have the serious/"only pros allowed" approach (not hating, I've just observed different styles). So yeah, excited to try! Thanks for this!
Robbi3 (7 months ago)
Hi!! Jesse, thanks for being so awesome. quick question, will this also work for your angle on the features container: clip-path: polygon(0 0,100% 0,100% 50%,0 100%);?
Jesse Showalter (6 months ago)
Ya clip path is legit, just make sure you don’t want anything overlapping the angle... it clips it all! 👍🏼
Austin Ju (7 months ago)
how did you get the brand logos section to be under the header/photo? i cant seem to get that section underneath the previous one
Jesse Showalter (7 months ago)
Check he GitHub repo 👍🏼
Austin Ju (7 months ago)
without using margin-top that is.
Victor Rivera (8 months ago)
Why does it skip at 17:52? I missed some steps because of it /:
Victor Rivera (8 months ago)
It jumps and all of a sudden the cards have a box shadow and the top border colors. I guess it misses the steps of saving those colors to variables and the process behind giving the boxes the shadow.
Jesse Showalter (8 months ago)
Sorry about that, what did you miss?
Paulo Crepaldi (8 months ago)
Really nice tut... in the previous video you made some quick changes advancing the video fastfoward so I could see exactly, anyway, i probably could slow down to see it better, well, congratulations, i'm learning a lot and spreading the news. Another thing, you've made a cut in the video and did not show hot you put de "drop shadow" neither the color lines up on the cards. I'll try to study the code better on github. Thanks a lot Jesse!!!
Jesse Showalter (8 months ago)
its a tough balance trying to keep the videos digestible and in depth. Thanks for the feedback I can always use it to improve the content.
Nick Phillips (8 months ago)
Loving this series! You should definitely make more when you're done! Nice one bro :)
Jesse Showalter (8 months ago)
Thanks
Roel Geurts (8 months ago)
Just a few questions; How do you go about on including vendor scripts? Do you npm i them and then copy the files from the node-modules folder or do you just download them? Maybe a simple trick - if you like using rgba(); you could just type rgba(black, .05) instead of rgba(0,0,0,.05) :-) Keep up the good work! Loving it!
Jesse Showalter (8 months ago)
I tend to just download and put them where they belong. Thanks for the rgba trick 👍🏼
Haseeb Rehman (8 months ago)
Awesome video! This is extremely helpful man.
MJay Gurav (9 months ago)
Hey Jesse, can you pull up the coding part in your video a bit bigger....may be then it would be clearly visible what you code.....
Jesse Showalter (8 months ago)
Will do 👍🏼
Fabian Lundkvist (9 months ago)
Love this series and that we get to follow along on the entire journey and see exactly what you do! I’m just starting out and it has really helped me. Keep it up!
Jesse Showalter (8 months ago)
That's so cool to hear, thanks for watching and supporting
John Hayes (9 months ago)
Dude you are so helpful! Can't wait for the next video in the series! Also, love the your style. Keep up the amazing work!
Jesse Showalter (8 months ago)
Thanks John 👍🏼
MakeShift Video (9 months ago)
Dude awesomeness.. but the video title should be different from 7. though right??
Jesse Showalter (9 months ago)
Thanks, I corrected the title 👍🏼
robert chingambu (9 months ago)
What framework of css are you using?
Jesse Showalter (9 months ago)
No framework. I am pre processing using Sass and task running with gulp.js
Dreidy Montilla (9 months ago)
What is the page you mention about grid????
Dreidy Montilla (9 months ago)
Thanks
Jesse Showalter (9 months ago)
http://grid.malven.co/
Osman Musse (9 months ago)
Create video Jesse alot of people don't understand that you don't find these type of in depth videos, keep it up
Lolirado Topper (9 months ago)
I appreciated that you use CSS grid I don't see much dev use it here. They are so obsessed with bootstrap
Jesse Showalter (8 months ago)
I've never been a bootstrap fan, I would rather work it out using pure CSS 👍🏼
Eddie Colon (9 months ago)
What a savage. God truly has given you a gift and thank you for sharing
Graphic Design How To (9 months ago)
I gotta up my coding game!!! Thanks for the video!
Jesse Showalter (8 months ago)
Your super welcome
Iberno Hoffmann Vitorio (9 months ago)
my moment to shine...kkkkk... when you type lorem to create a paragraph, in the same time you can put a number like lorem6 and the sentence will have only 6 words...
Jesse Showalter (8 months ago)
used this in the new video 👍🏼
Iberno Hoffmann Vitorio (9 months ago)
Another video??? Oh man... my heart goes down... Nice Job... amazing explanations... Tks again... keep it up!

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.