Front or end?
I’ve always wondered what birthed this term, “frontend”. Well, that’s talk for some other day but the most interesting thing now is I finally learnt enough html and CSS to develop a website and got the opportunity to take on a project.
I had a couple of options to choose from but I decided to go with a clone of Netflix and whoa! It was a whole day’s work. Anyways, I’m happy to share a few things I have learnt in the process.
I had to first of all organize the structure in my head and know where to use the various <section>, <main>, <header> , <div> tags and all the others. Just a way to ensure all the code is easy to follow ad then put them to paper.
I divided the page into 4 broad sections and began working from there.
The first section had a background image to it, something I didn’t encounter while learning but with the help of google and a few tweaks, I was able to pull that off by adding some style to that section.
I added the background first and then went ahead to specify the two parts of the header, i.e. the logo and the sign in button.
The remaining parts of the section were quite straight forward. Some intro text and then an input field and a button.
The second section was majorly images and text and thanks to CSS’s display: flex and a few other style tweaks, I pulled that off too.
I repeated the code for all the parts. The only difference was when I had to switch from left to right in the middle.
The third section required me to make use of my knowledge of layout, padding and margins to come out with the required outcome and then the final/ footer section needed me to use grids.
I’m not sure if there’s another way to implement the footer but learning the grid system was quite tedious. I really hope there is something easier but if not, sigh. I guess, I’d have to get comfortable with this.
Most of the code to get the grid functional was CSS and after some studying, I got a hang of it and implemented my grid.
In the end, it was worth it as I successfully implemented my first web pae using html and CSS.
You can access the entire code block here.
The original site is www.netflix.com/ng/
I guess I can call myself a frontend developer now!
