How to Make a Landing Page using HTML, SCSS, and JavaScript – Full Course

Wordpress sites

Learn how to build a responsive website from scratch with HTML, CSS, and JavaScript.

✏️ This course was created by Jessica Chan.
🔗 Jessica's YouTube Channel:
🔗 Jessica's Twitter:

💻 Starter files from Fontend Mentor:
💻 Source code on GitHub:
🔗 Responsive Design for Beginners course:

⭐️ Course Contents ⭐️
⌨️ (0:00) Introduction
⌨️ (0:30) Part 1: Setup and Navigation Bar
⌨️ (49:52) Part 2: Animated Hamburger Menu
⌨️ (1:21:28) Part 3: Animated Mobile Menu
⌨️ (1:43:56) Part 4: Responsive Hero
⌨️ (2:39:24) Part 5: 4-Column Features (flexbox)
⌨️ (3:16:58) Part 6: 4-Column Articles (CSS grid)
⌨️ (4:04:56) Part 7: Footer

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

31 thoughts on “How to Make a Landing Page using HTML, SCSS, and JavaScript – Full Course”

  1. I like how you are so confident, you are not afraid to google the syntax and admit that you don’t remember them, Keep doing this I love it

    1. kevin enrique 2c 13

      i think its harder to think how to make a solution than to find the syntaxes, i guess

    2. 😂 lol

      It’s web development ,we have the skills of being developing the things not just cramming …

    3. having the skill of googling defines a good programmer , no one rotes syntaxes , why would she be afraid lol

    4. @INCEPTION 25 even phd graduate hahahahah, can’t be, impossible, they are super humans

  2. A simple solution to the fade-in/fade-out animation w/o using JS would have been to keep only the opacity to hide the visibility while still keeping the animation when toggling the classes. At the same time, since the overlay is always on top of the content (since opacity only hides it and does not remove it from the DOM) one could use a negative z-index which is then set to initial when the nav is toggled. Example: .element{ opacity: 0; z-index: -1; transition: opacity .5s;} then .open .element{ opacity: 1; z-index: initial;}

  3. As someone who only joined the coding world six months ago (and has just completed FCC’s Responsive Web Design course), this is absolute gold! A joy to follow someone so skilled, who presents in such a relaxed, confident and instructive manner.

  4. Dr. Haroon Luswala

    Thank you so much for bestowing us with so much free knowledge. This is priceless, and you as a lecturer are fantastic!

  5. I watched the whole video a section at a time and enjoyed it thoroughly. I really appreciated your workflow and was able to pick up a lot of ideas based on your approach. Your problem solving was constructive as well. Looking forward to learning more.

  6. Krishna Br. Chand

    Great tutorial. AMAZING.
    For speedup development we can set font-size: 62.5% to html, then 1.6 rem = 16px, 1.8rem = 18px so on. It is more easier to calculation for human brain. I saw you were using calculator for calculation while coding we can use vscode calculator extension for that. If we are using rem, set rem unit in vscode setting so that when we put some value and press tab it will trigger rem instead of px. Above tips are for only speedup development.

    1. Mohamed Ahmed

      @kiddhkane and why do you think so? I agree with him when it comes to setting the root element to 62.5% because like he said, it saves time with calculation in the long run

  7. I’m having so much fun watching you! And it helps a lot at how to manage a project when doing html and css.
    Wanted to say that for the Fade in/out animation for the overlay you used “visibility: hidden” property instead of “display: none”. Using visibility is not that good for SEO since Google tends to penalize webs that hide content in this way.
    “visibility: hidden” does hide the content but it is still there in the HTML, you’re still rendering the overlay div but just hiding it from the eyes. “display: none” on the other side removes the element completely from the html.

    Anyway I’ll keep watching this video tomorrow, you’re great 😀

  8. i love how organized everything is. Anyone can make awesome designs but keeping it all organized is not everybody’s piece of cake. Well done Jessica.

  9. Golden Monkey

    I completed this course for 12 +hours… Finally !! I am totally new to SCSS. bez my English is limited, I don’t live English speaking country,
    I tried so hard to follow every step for this video by CC subtitles.
    Thanks, Coder Coder, many new things for me, very awesome and practical course I will review it again…
    but now,…. I just want to sleep for a moment… BTW, I am expecting your course also 🙂

  10. Andrew Voughn

    Simply amazing! I am learning while, enjoying the content. Thank you very much for the effort for sharing, showing, teaching your talents and skill sets to those who are not very talented (me) as you and other web developers posses.

  11. This is one of the greatest tutorials I’ve ever done. Everything was explained well through out the entire process and I learned so much more about mobile first and making everything responsive. Haven’t finished yet but I am so glad I found this !

  12. She’s the only one who has perfectly made this. I saw a bunch of other people trying to create this project but this is by far the better pixel-perfect realization!

  13. CHITUS💙⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻

    I’m 30 minutes into this video and already feel like I’ve learnt a lot, thanks!

  14. If you made it through this tutorial, congratulations are due! YOU ARE AWESOME. Don’t forget to add a z-index of 1 to your .header &__menu ! And thanks for this awesome video Jessica I learned a lot about Flexbox, CSS Grid, and SaSS. I can’t wait until your course is released, I will definitely be purchasing it.

  15. Well great tutorial. Learnt a lot mainly about organising your code (saves a lot of time), re-engineering hacks, keeping things smooth and easy apart from the basics. Just completed this challenge after watching your tutorial. Keep them coming Jessica. Thanks freecodecamp

    1. I’m facing error in compiling $font med; …don’t know how do i define the variable…anyone help ?

Comments are closed.