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

Published: 06 June 2018
on channel: Jesse Showalter
5,022
146

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/sho...


http://bradfrost.com/blog/web/respons...
http://bradfrost.com/blog/web/complex...
https://www.smashingmagazine.com/2017...
https://speckyboy.com/responsive-navi...
https://www.webpagefx.com/blog/web-de...
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 -    • 1 - Design & Code a Responsive Landin...  
2. Discovery -    • 2 - Design & Code a Responsive Landin...  
3. Wireframe & Moodboard -    • 3 - Design & Code a Responsive Landin...  
4. Visual Design Part 1 -    • 4 - Design & Code a Responsive Landin...  
5. Visual Design Part 2 -    • 5 - Design & Code a Responsive Landin...  
6. Setting up the Dev environment -    • 6 - Design & Code a Responsive Landin...  
7. Coding the Nav and Header -    • 7 - Design & Code a Responsive Landin...  
8. Coding the brand and feature section -    • 8 - Design & Code a Responsive Landin...  
9. Coding the Offer Section -    • 9 - Design & Code a Responsive Landin...  
10. Coding the Download Section -    • 10 - Design & Code a Responsive Landi...  
11. Coding the Footer & Fixes -    • 11 - Coding the Footer & Fixes | Desi...  
12. Basic Responsive Web Development -    • 12 - Basic Responsive Web Development...  
13 Responsive Images -    • 13 - Responsive Images | Design & Cod...  

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

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.

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

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

////////// Want to support my content and get extra goodies? Become a member and get perks like member-only content, behind the scenes, design files, and more...
https://designchamps.io/hip

////////// Connect with me here 👍🏼
Instagram:   / imjesseshow  
Twitter:   / imjesseshow  
Anchor: https://anchor.fm/imjesseshow
Medium:   / imjesseshow  

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

////////// Music is from Musicbed click below for a free trial 👇🏼
http://share.mscbd.fm/imjesseshow

////////// Equipment 📸
https://www.amazon.com/shop/jesseshow...


Watch video 14 -Design & Code a Responsive Landing Page from Start to Finish | Responsive Navigation online, duration hours minute second in high quality that is uploaded to the channel Jesse Showalter 06 June 2018. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 5,022 times and liked it 146 visitors.