How To Make A RESPONSIVE Landing Page Website With HTML, CSS, & JS | Nature Website Design

🔥Want to earn FREE Money, PayPal, Amazon Giftcards, or even Crypto? Sign up to freecash and use my link here: https://freecash.com/r/29703737f5
Payment Proof: https://i.postimg.cc/hGZxgWD7/proof.png

Line 30 in the HTML (03:03) the class name should be “mobile-nav-btn”. This gets fixed at (25:17)

At line 148 in the HTML (14:06) wrap the h4 and p in a div and do it for the other two descriptions and change the h3 in a h4. This will make the image be on the left and the text be on the right. For the first description, you could also wrap the text of the h4 in a a tag. This part doesnt get fixed in the video

There is no “.container-header” in the CSS and HTML, you could ignore this part (22:08)

Source Code: 🚨UNTIL I GET MONETIZED (SUBSCRIBE)🚨
Google Drive IMAGES: https://drive.google.com/file/d/18aPK9svWp_o4Udt1Z5sar6LcJYPHryrK/view?usp=sharing

Chapters:
0:00:00 Nature Website Project

0:01:30 HTML / Building the Header with HTML
0:03:21 Building the Hero Section with HTML
0:04:02 MAIN SECTION / About container
0:06:24 Benefits container
0:09:08 Nature Picture container divider
0:09:29 News container
0:13:21 Explore more container
0:15:15 Building the Footer with HMTL

0:18:14 JAVASCRIPT / mobile menu slider

0:20:15 CSS
0:22:27 Styling the Header
0:25:29 Styling the Hero section
0:26:58 Styling the Main section
0:27:20 Styling the About container
0:27:54 Styling the Benefits container
0:29:10 Styling Nature Picture Divider
0:29:40 Styling News container
0:30:18 Styling the explore more container
0:33:24 Styling the Footer

0:37:32 MEDIA QUERY (1024px)
0:37:41 1024px HEADER Responsiveness

0:40:25 Media query (768px)
0:40:30 768px MAIN Responsiveness
0:42:04 768px FOOTER Responsiveness

0:42:31 MEDIA QUERY (540px)
0:42:42 540px HERO Responsiveness
0:43:07 540px MAIN Responsiveness
0:44:58 540px FOOTER Responsiveness

0:45:11 Finished Nature Website Project

Here are some of the vscode extensions I use:
– Auto Rename Tag (Jun Han)
– Color Highlight (Sergii N)
– Font Awesome Auto-complete & Preview (Janne252)
– Indent Rainbow (oderwat)
– Live Server (Ritwick Dey)

html, css, javascript, html tutorial, css tutorial javascript tutorial, frontend web development, responsive web design, ui ux design, web development, html tutorial for beginners, css tutorial for beginners, full html css website, html website, html website tutorial, html web development

Tags