In this video tutorial you will learn how you can build a complete responsive website using html 5 and css 3. There will also be modern ES6 JavaScript used to handle click events. Responsive web design is very important so we have to make sure that when we create a website it is mobile friendly. We will use many different techniques and new css technologies such as css flexbox and grid to build this website from scratch. No libraries or frameworks.

Don’t forget to leave a thumbs up if you found the video useful. Also, click on the bell icon to turn on notifications. This way you’ll be notified the moment new videos are uploaded.

Subscribe ► https://bit.ly/2Q3pCiB

[ PROJECT FILES ]

GitHub ► https://bit.ly/2THGxWa

[TIME STAMPS]

Header & Hero HTML – 1:15
Header & Hero CSS – 7:16
Experience outdoors section HTML – 30:35
Experience outdoors section CSS – 35:20
Testimonials section HTML – 44:55
Testimonials section CSS – 47:25
Begin adventure section & Footer HTML – 53:55
Begin adventure section & Footer CSS – 57:43
Media queries – 1:00:20

[ SOCIAL MEDIA ]

Instagram ► https://www.instagram.com/juliocodes

[ HOSTGATOR ]

Get affordable domain and web hosting with HostGator. Save up to 60% off of your entire purchase with the coupon code below.

HostGator ► https://bit.ly/2ZfR0u3
Coupon code ► JULIOCODES60
Video tutorial ► https://youtu.be/5B_LQqR0zsE

[ MY GEAR ]

Programming/Video editing laptop Specs & extras

Laptop: Dell XPS 15 7590
Processor: 9th Generation Intel Core i7-9750h
RAM: 32GB (Upgraded)
Graphics Card: Nvidia GeForce GTX 1650 4GB GDDR5
Storage: 500GB M. 2 PCIe NVMe SSD (Upgraded)
— Extras —
Monitor: Dell Ultrasharp 27″
Keyboard: Logitech MX Keys
Mouse: Logitech MX Master 3
Microphone: Blue Yeti

[ DISCLAIMER No. 1 ]

In order to speed up the development process CSS prefix are not used. In order to ensure cross browser compatibility please use prefixes where necessary.

[ DISCLAIMER No. 2 ]

This video description contain affiliate links, which means that if you click on one of the product links, I’ll receive a small commission. This helps support the channel and allows me to continue to make videos like this. Thank you for the support!

source

41 Comments

  1. Hey there!
    I've added time stamps in the description. Also, I’m seeing a common issue here that many of you are having with the JS. Take out “s:” and “token:” (if you copied that too). That’s not part of the JS. It’s my IDE making a reference of the values being passed in.

  16. guys what is wrong with my code ?

    const selectElement= (s) => document.querySelector(s);

    selectElement('.open').addEventListener('click',() => {
    selectelement('.nav-list').classList.add('active');
    });
    selectElements('.close').addEventListener('click',() => {
    selectelement('.nav-list').classList.remove('active');
    });

  24. while you scrolling the page the background image of Testimonial section remains in its position. how did you do that? I've seen the whole video and also completed the website like yours. but in my case, the bg image keeps scrolling too. :(. Thank u

  30. Hello Julio! Please, would you mind explaining why do you style the background gradient of the hiking, camping, star gazing grids, with a ::before pseudoelement? Why is the ::before needed? I'm not understanding that bit of the code.
    Thank you!!

  35. Thank you for the tutorial, very easy to understand, simple and short. keep the spirit, continue to be successful never stop providing the best information

Leave A Reply

Please enter your comment!
Please enter your name here