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

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

258 ratings | 8915 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 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 section - https://youtu.be/O4gqpgRvYJg 9. Coding the Offer Section - https://youtu.be/JsLeiFbi8RM 10. Coding the Download Section - https://youtu.be/jMkAeo2uGHkA ------------------------------------------------------------------------------------ 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 (65)
Todd Jaser (15 days ago)
FYI, there's a plug-in for Atom to autocomplete paths so you don't have to remember them. (And it's baked in VS Code 😉)
Jesse Showalter (13 days ago)
That's why I switched to VS Code, so many baked in goodies
Micke Berg (19 days ago)
Thank you very much for your videos. Love your channel! So much inspiration and knowledge.
Jesse Showalter (13 days ago)
Awesome! Glad your diggin it👍🏼
Why don't you use the bootstrap framework for example?
+Jesse Showalter Thanks for reply :)
Jesse Showalter (2 months ago)
Not a fan. I'd rather hand roll my own structure until I need something more robust.
Zach Carroll (2 months ago)
Which ide are you using? Looks very time consuming when creating the tedious html elements!!
Jesse Showalter (2 months ago)
I was using ATOM but now I am using VS Code
Julia Kuchko (2 months ago)
Hi Jesse, I have the other font style, and I don't know why - letters aren't capitalized in h1's and have some shadow under them. I was following every of your steps, have you got any guessings why did this might happen? Thanks in advance, enjoying your course)
Jesse Showalter (2 months ago)
Use the dev tools to find the problem 👍🏼
Daniel Kip (3 months ago)
why are the links displayed block? shouldn't they be inline-block? thank you for this awesome tutorial!
Jesse Showalter (2 months ago)
Inline block is probably what I should have wrote.
vince sanchez (3 months ago)
Jesse why did you set width first into your wrapper insted of max-width , max-width should be the first then width and margin auto ? im confuse
Jesse Showalter (3 months ago)
It may have been a slip up, when I am recording these videos I am going fast to try and respect peoples time 👍🏼
TheManWhoDoubts (5 months ago)
I can't see how the SASS file "_base.sass" is linked to "index.html" ?!!!
Jesse Showalter (5 months ago)
The sass file outputs the main CSS stylesheet. Browsers can’t read Sass, you should be linking the outputted CSS 👍🏼
nathan (6 months ago)
Do another series using photoshop :) Love you vids.
Hassam Ali (6 months ago)
@jesse Showalter can i have the resources for this project ? i need sketch resources i'm gonna complete this series
Hassam Ali (6 months ago)
Thank you so much for being a such great support
Jesse Showalter (6 months ago)
https://www.dropbox.com/s/xxwoez4fbw1edr5/main-design.zip?dl=0
Austin (7 months ago)
can you explain how the display: flex in the .main-nav and the display:block in the a tag work in conjunction?
Ryan Phillips (7 months ago)
Absolutely lovin' your style and approach to coding. Have a couple of questions if you don't mind me asking. When I was doing the nav and followed your "li*4" example, it only gave me one instance of the <a href..> on the same line not 4 below like you had. The other questions I have are to do with Atom. I tried but could not get the "mini map" you have on your video. How do I install that -and- how do I get my code to autocomplete like yours so quickly? It's hard to keep up at times. Is there a key you are pressing? "Tab"? Thanks so much brother!
Jesse Showalter (7 months ago)
Sweet!
Ryan Phillips (7 months ago)
Hey I found the answer. I installed the "Emmet" package within Atom and now I can replicate what you are doing.
Austin Ju (7 months ago)
@ 18:52 how come you arent embedding the .download functions into .main-nav? i was stuck here because in this video you arent embedding it and yet it somehow works.. in the index.html file, the logo and download classes are within the main-nav... I indented the .download functions and it worked, but i dont understand how yours is working.
Jesse Showalter (7 months ago)
rules of specificity most likely
Yama Tube (8 months ago)
I need the project files, there is another guy on youtube and his videos are amazing and have all the images sliced and exported for you to begin writing code
Jesse Showalter (8 months ago)
I purposefully did not include assets because the point of the series is for you to design and code your own landing page. I have other videos covering the export process if you need to know how. There are a lot of great teachers on YouTube and they each have their own style and purpose, thanks for watching, best of luck.
Kenny Medina (8 months ago)
great videos bro, appreciate this! greeting from Venezuela 🔥🔥🔥
Jesse Showalter (8 months ago)
Thanks so much for supporting 👍🏼👍🏼👍🏼
sarmad ali (8 months ago)
awesome series thanks and keep it up
Santiago Bugni (8 months ago)
Jesse First of all thanks a lot for this kinds of videos, its extraordinary how you explain on the videos. I really get stuck on the first part that you execute "gulp images" Terminal says this events.js:183 throw er; // Unhandled 'error' event ^ Error: spawn EACCES at _errnoException (util.js:1022:11) at ChildProcess.spawn (internal/child_process.js:323:11) at Object.exports.spawn (child_process.js:502:9) at module.exports (/Users/myuser/project/node_modules/execa/index.js:139:26) at fsP.writeFile.then (/Users/myuser/project/node_modules/exec-buffer/index.js:35:15) at <anonymous> I don´t understand what happened. The assets/img folder continues empty. Thanks a lot for your knowledge and good vibes!
Jesse Showalter (8 months ago)
You either don't have the Node Module installed or something got deleted in the file, read the instructions again and start over perhaps.
Neoqeav MabangaDji (8 months ago)
Hi Jesse ... Where's the files ? Please
Jesse Showalter (8 months ago)
https://github.com/jesseshowalter/jesseshowalter-starter-project https://github.com/jesseshowalter/shoeAppLandingPage
Karla Espinosa (8 months ago)
I really enjoy these kinda videos. Thanks Jesse
Nima Sakhtemani (9 months ago)
You made me fall in love with Web Development again. Thank You!
Jesse Showalter (8 months ago)
What a humbling comment!
Ahmed Mohammed (9 months ago)
this is soooo awesome
Euphanie Grace (9 months ago)
Excellent tutorial. Thank you so much for the great content! You explain what and why you write in details and depth, which makes your content really unique! Your tutorials and the way you explain things from scratch are really awesome and helpful and make things simple to understand. Great job man! Definitely one of the best channels out there. Always looking for more content from you :)
Jesse Showalter (8 months ago)
This comment is super encouraging, I really appreciate your support.
Fabian Pontén (9 months ago)
You're on fire man, brilliant brilliant stuff! 🔥
Fabian Pontén (8 months ago)
No worries bro, hope you have a great day!
Jesse Showalter (8 months ago)
Thanks 👍🏼
Lucas Bernardi (9 months ago)
Great series man! Just two things I noticed: - the space between the nav and the main headline is a little bigger in the mockup of the site; - for certain screen sizes, the logo and the nav links stick to the very side of the canva. Are you going to add a little bit of margin later on? anyways, keep up the good work!
Jesse Showalter (8 months ago)
I am going to go back through and smooth things out during the responsive videos
Paiz Hamdani (9 months ago)
I always watch your videos in the morning around 8am just to get that jazzy feeling while watching, really boost up my energy to start designing some stuff and code.
Jesse Showalter (8 months ago)
This comment gave me the jazzy feeling 👯
MakeShift Video (9 months ago)
Best series ever
Jesse Showalter (8 months ago)
Super humbled by this comment. Thanks for your support 😃
Ioannnify (9 months ago)
Another great tutorial Jesse 💯👍😀 Learning a lot watching over your shoulder! Keep them coming please !
Jesse Showalter (8 months ago)
Thanks, will do
Jio (9 months ago)
I just have a question, does this code produce the same effect if I use this code for the header? background:linear-gradient(to right, rgba(), rgba()), url() ?
Jio (9 months ago)
Love the video btw
Iberno Hoffmann Vitorio (9 months ago)
Thanks Jesse for your time and share knowledge... appreciate that!
Jesse Showalter (8 months ago)
I mentioned your "lorem" tip in the newest video. Thanks for the help 👍🏼
Johan Vilela (9 months ago)
Hey Jesse, thank you very much for sharing your knowledge!!! I'm Brazilian and I'm enjoying your videos.
MJay Gurav (9 months ago)
Now it's time to get our hands into work....awsome
Arnob Saha (9 months ago)
Your videos are just awsome in single word. 😊 It would be more awesome if you consider to bump up the font size a little more that will be easy for our eyes. Thank you. :)
Jesse Showalter (8 months ago)
I have heard a few people say this, I will try and bump it up. Thanks for the feedback, I always appreciate it
Great video, Jesse 👍👌
abodXDGames (9 months ago)
I just wanted to say man you are amazing just remmber that i am following you from the early days which is now 😉.
Jesse Showalter (8 months ago)
Thanks for your constant support
abodXDGames (9 months ago)
You are going to have a lot of subscribers

Would you like to comment?

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