Responsive Landing Page Using HTML & CSS (A Little jQuery)

In this project we will build a responsive landing page website from scratch without any frameworks. It will be modeled after the iTunes website as far as layout and content. We will use HTML5, CSS3 and a bit of jQuery

Sponsor: JavaScript Edegree Mastery Course

Code:

Deployment:

Smartmockups (Please use this affiliate link):

Responsive Menu Codepen:

Gift Card Mockup:

All Stock Images:

Favicon Generator:

💖 Become a Patron: Show support & get perks!

Website & Udemy Courses

Follow Traversy Media:

[QuanDev]

I'm so grateful for this type of "from scratch for beginners" videos from you. Wish you health and happiness, so you can make more videos.

[ibrahimajani]

I like the clarity of the tutorial, the quality of the concepts and how he manages to be coherent through out the Code-along. Thank you.

[bytecauldron]

I really dig these long-format project videos. Thanks!

[pipscash]

Thank You, Brad.
being following your tutorial for awhile now.i knew nothing about coding before but by God's grace really catching up...
Nigeria all the way.

[julstheturk]

This video is great. I've built webpages from scratch with HTML and CSS in the past, but I needed a quick refresh since i'm getting into it again. There should be one of these every year, since web development methodology changes yearly. Good job.

[kevinurielfonseca]

Your videos are always amazing Brad!. I don't know what would have been of me if it was not because of your videos, you have helped me so much in starting off my freelance career, etc. Your projects always inspire me not to give up!.

[its_maalik]

I would absolutely love if you made a real-world E-commerce website. Front-end Along with a backend, I think that is the thing missing from your channel. Love from India. And I absolutely loved this website design.

[unheardofworld]

I love all of your projects. The only person and the only channel who made me understand the basic front-end and back-end. Love from Pakistan <3

[Hammmmyy]

Thanks so much for the content! I love the mix of tutorials you’ve been putting together. Some are full series with projects and some are quick 1 hr vids like this that are great practice.

[lemueljunior]

Thank you for another helpful video. I just remembered a lot of tricks I had forgotten when using pure css (no sass, no frameworks). You're the best ;)

[LEEROYY]

Great content dude, following your html & CSS course currently and really getting to grips with it. This is just what I needed too as I want to start creating example portfolio and dummy client projects.
Again, thank you!

[CODERSNEVERQUIT]

I really love your content and teaching sir i appreciate you efforts you are my inspiration.... Keep helping and contributing to our programming community... I have created my own YouTube channel by inspired from you...

[prsion]

It`s exactly what I was looking for and the best channel what I ever knew!!!

[romeo]

Video wasn't too long for me. I enjoyed it and learned so much in just a hour. Thank you for everything you do.

[davetse]

Your career is speaking out loud Brad, 10x.

[robbysingh]

My absolute favorite vids of yours to watch and interact with. Also why I buy your courses. Projects are outstanding.

[RareTechniques]

<div class = *"Timestamps"* >
<ul>
<li> 00:55 ( ͡° ͜ʖ ͡°) Lets get started </li>
<li> 04:39 setting up Explorer files in editor </li>
<li> 06:15 jQuery - get the minified or uncompressed version </li>
<li> 08:00 commenting out the sections </li>
<li> 08:40 codepen in description, "view in compiled Haml" (% ---> <> </>) </li>
<li> 10:45 =||=, grab css syntax </li>

**IF PROBLEM OCCURS WHEN LOADING CSS INTO HTML, CHANGE THE STYLESHEET HREF=location to the correct directory in index.html**

<li> 14:00 "a lil jQuery" javascript 20 lines </li>

<li>  *17:35* *( ͡° ͜ʖ ͡°)*  </li>
<li> Sections </li>
<li> 36:50 Buttons </li>
<li> 40:00 Text colors </li>
<li> 50:00 Footer </li>
<li> 1:00:00 Smooth scrolling </li>

</ul>
</div>

[zeroproductions]

Hi Brad, your content gives more interest in learning new stuff.
Thanks and keep continuing.

[soad]

Amazing Video 😍
By the way, This year our Eid-Ul-Adha is on 22nd August, Eid-Ul-Adha is the 2nd biggest religious festival. So Eid Mubarak. 😊

[burhankalu]

brad thanks bro " as a self taught programmer i can proudly say i am because you are " much respect.