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

Thanks! Share it with your friends!

You disliked this video. Thanks for the feedback!

Added by admin
79 Views
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 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
11. Coding the Footer & Fixes - https://youtu.be/Y7lARe_jeNg
12. Basic Responsive Web Development - https://youtu.be/f16OpkhAPHI
13 Responsive Images - https://youtu.be/VtW5tI9qZk0

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

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.

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

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

////////// Sign up for my Monthly Newsletter
http://jesseshowalter.com/newsletter

////////// 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
Category
Start web development

Post your comment

Comments

Be the first to comment