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

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

✏️ This course was created by Jessica Chan.

⭐️ 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

--

[rifeynman]

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

[astridbrenner]

One day I'm gonna finish this f kin University and get a job, and I m gonna contribute to this platform for all the years you supported us!

[sumitwadhwa]

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.

[igorgetmeabrain]

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.

[dederich]

I just love that you're not afraid to show that you don't know everything and look things up. You're so incredibly relatable! It's so annoying to have to watch the know-it-alls all the time. It's really unmotivating.

[misschafa]

I'm just 10 min in and I'm hooked. I wanted to say that I love the way you're explaining why you are doing things and what the properties do. I'm going to un-pause and continue, lol.

[AgataLib]

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

[mattoattacko]

If anyone is wondering why your <p> text looks strange at around the @ the 2:01:13 time frame, it's because she changes the '_globals.scss' file's body from "font-size: $font-med" ----> "font-size: $font-sm'", but it doesn't show it for more than a few frames of the video. Took me ages to figure out why my design didn't line up with hers.

[joelo]

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 !

[krishnabrchand]

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.

[esQmo]

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!

[johnwig]

Coder Coder is one to subscribe to! Her creativity is just amazing!

[ilaydelrey]

I really like this live video because its not 100% perfect and when something goes wrong, you show how you fix it by yourself which is very helpful to become better at fixing problems and finding problems! Still following your video and I am very happy and grateful too!

[dickson]

She is the best and the better teacher, She teaches clear, understandable, and perfect.Her teaching flows in my mind and within one month I will be a website designer. Thank you Madam.

[goldenmonkey]

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 :)

[Orgrimmar]

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 :D

[vijitaa]

I'm so glad I thought of building this entire website alongside you. I feel more confident with responsiveness. I've also always been frustrated with how messy all the docs quickly get & how difficult it becomes to debug. This video solved all those problems and taught me how to keep everything organized.

[chimerablack]

I love how you don't explain anything of what you do. You just do it. Good for you.

[juliocodes]

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;}

[CodingWorm]

these videos take a lot of time and effort. Incredible concentration