Personal project #1: Netflix landing page copy (HTML/CSS)

Before I jump into javascript I wanted to test what I’ve been learning along the way, so I decided to by a little mainstream and make a copy of Netflix landing page. Tougher than expected but manageble.
There will be no JS involved in this project.

The page’s barely in it’s infancy, almost halfway with the desktop layout, after I’m done with this I’ll focus on the media queries.

The code may look messy for now, I’m yet to tidy it up. Any feedback is welcome :japanese_goblin:

https://katroya.github.io/netflixcopy.github.io/

9 Likes

It look great but try to arrange the elements properly

1 Like

Love it, man. Your hard work is commendable. One suggestion - I can scroll your site horizontally, there is a scroll-bar at the bottom use the code below in the body or HTML tag.

overflow-x: none;

great work.

hi @zippytyro

im sorry to ask, but i’ve wonder what the use of this overflow-x: none; for?

is that to remove the horizontal scrollbar while your contens overlaps the screen width? or it would also make the page fit the screen width by mean of responsive?

thanks.

Thank you for your support guys! Thanks for pointing out the bottom scrollbar, didn’t even realize it was there.
To fix the issue I gave every element a red box using this code to uderstand what was causing the overflow.

/*  DEBUG  */

body, div, header, img, a, h1, h2, h3, h4, h5, h6, p, form, input, button, video{

    border: 1px red solid !important;

} /* /DEBUG  */

Turns out I had wrote a couple of uneeded properties that were causing the issue.

Thanks again guys!

I just checked it out. Nice work, keep it up. I wish I had a laptop so I can start trying out projects too. I have been learning with my android phone.

1 Like

hi @affinity4gio,
welcome

tbh, im doing my projects on my android mostly, since my laptop is being monopoly by my 4yrs son.
you can start making one, codepen.io is the easiest as it responsive enough on mobile, and as an aside install code board from app store, default keybord seem getting trouble with codepen and this freecodecamp curriculum lessons.

happy coding.

Information is key. Thanks a lot. I will do as you have recommended. I can’t wait to start. Am very grateful

1 Like

@sobadrdb speaks the truth. When I’m in bed and can’t sleep I try to make simple pages on codepen, it’s proven to be actually useful to do so since it’s a good way to learn how to code mobile friendly websites.

1 Like

Project update 1:

  • Resolved overflow problem.
  • Added FAQ section. FAQ’s element are inactive for now.
  • Sections are now separated by spacer divs instead of margin property.

Trying to figure out to make the FAQ’s elements work without using JS, tomorrow I’ll probably try to rig something. I’ll implement it if the code doesn’t end up looking like absolute jank, even more than it currently does, lmao.

Thanks! But I can’t seem to navigate my way around, I don’t understand the app. Asking for pen etc. Can you help me, thanks

hi,

im not sure what you meant, for start, create an account in codepen.io, the rest you can try read it here

The layout is great. Try and make the web page responsive

Yeah, after I’ve added the footer I’ll be focusing on that.

Lovely looking. My main suggestion would be to optimize more for alternate screen sizes such as mobile phones, but aside from that it’s about as sleek and elegant on desktop as a normal Netflix webpage.

It look great. Just need to make it responsive.

WOW!
Wow!
Wow!
(to make my reply longer than 20 characters)

Project update 2:

  • CSS overhaul.
  • Added Media Queries.

Had to rewrite the stylesheet otherwise the media queries would’ve been a major bitch to make, ended up with an end product far better than what I imagined at first.
For the next update I’ll add webkits.
Once I complete the JS course I’ll make the FAQ section work as it should, for now I’m satisfied.

As always, thank you for following my project, if you find anything not working correctly feel free to point it out! :japanese_goblin:

Ah, I forgot to comment the media queries so it might look a bit messy, for the next update I’ll also properly comment the stylesheet.

In retrospective I could’ve just used a * selector and outline istead of border.