

Iโm documenting my learning on one of the Udemy courses on CSS. Iโm not going to say which one just yet, until the end. However, I do feel that Iโm gaining way more knowledge on CSS than I did before. Itโs amazing.
At this stage, I was just implementing CSS inside like there was no tomorrow. I wasnโt realising that there was rules or any sense of organisation to my code, and thatโs bad. What if someone else had to read what I had written for my code? They wouldnโt have a clue of where to start! This bad practice must be stopped. However, what are some good practices in CSS?
When I think of editing websites or code in general, it really is like trying to imagine what you predict and hope that prediction it correct. I believe this is one of the hardest challenges when working with code because it is really creating things invisibly whilst your doing it. You are only going to see the end results when you hit rack-up or open an html file.
Itโs even worse with CSS because there are set borders, margins and padding to those elements when you edit. For instance, you would never know where an element will be positioned unless you write the code and open it up! This is why we should start clean by writing the following code in our CSS.
The โ*โ is a class that will be applied for every element in your page, body and head. Itโs a great class to use to apply everything to stuff and to what I call start clean. So, here we are stating the margin and padding are 0. This means that our image or element should go to the very left corner of the page without spacing. This visions where our elements are going to be and that we are not working with hidden borders or padding. This is great.
Whatโs an interesting feature is what I learnt called โbox-sizingโ. What this will do is align all our box structured elements (images, pictures, text, anything) within the window. It would almost all have a similar width that would make a website look clean. If we didnโt do this, we could have created a div box that was 100px by 500 px and one that was 300px by 100 px for example. If I havenโt explained it properly, check out this good explanation by W3schools:
Now, we know what it means by starting clean by having cleaned out the margins, border and set the border-box
Itโs the question that probably every front developer wants to figure out and any other person. Why? Well, because once you make the dimensions, the layout or design shifts when you shrink the screen. Thatโs hella annoying!
This is something called โviewportโ where we can require and explore in our html and css. The good stuff. The viewport is the userโs visibility on a web page.
What the viewport will do is that it will allow responsiveness on our elements in our page now if we call it. The viewport adjusts the elements depending on the size of the device. Weโve set the content to the width of the device (by which in my case is the width of the screen). The initial-scale is the zoom level when the page is loaded. Who knew you could do this CSS. Amazing! However, where have I called viewport. Well, let me show you.
My header element requires an image as we can see. As you can see on the top Iโve set the height to 95%vh, which is 95% of the viewport height. This sets the images to a maximum height so that the images donโt bleed over the viewport. This is so that the user can still see whatโs on the page.
The more interesting features here is how Iโve called an image in CSS rather than in HTML and also have set a gradient. We know that itโs a linear gradient said at the background-image element. However, Iโve also set the direction of the gradient (โright bottomโ) and Iโve set the start colour and end colour. Itโs really bizzare that the gradient and other features require this rgba format but itโs easy to find in any color picker.
Iโve set the size of the background to container, which is the maximum size of that container (otherwise in that class). Another interesting feature is the last line as wellโฆ
This clip-path is how we can crop an image. Crazy, both conceptually and mathematically. If we imagine the pair of numbers like coordinates (both x and y) and that each pair represents a point.
Note: I believe you can use percentages for both but as good practice, we use percentage for the x coordinate and px for the y coordinate. We need the y coordinate to be px because it gives more accuracy on how we crop at image.
How cool is that. CSS3 you go CSS3.
The <span> tag is actually used to group inline elements that are used for text. When and how will be use a span text to begin with?
Well, letโs say we have two texts that we want to label under the <h1> tag. The <h1> is crucial as for search engines, this is how searches find our website. Itโs important to put the title of your website here that is catchy but also communicates the jist of your project.
Now, what if your <h1> had the title and a subtitle. You would think, โwhy not just put that subtitle into a <h2> tag. BAD PRACTICE. You can actually change the styling of the fonts in the <h1> tag by calling <span> with different set classes towards them.
Why are DIVS great? Why are DIVS useful? Why are DIVS good practice?
We have mentioned time and time again that DIVS are blocks of code. This means that we can put different elements in a DIV and let say edit the position of the DIV.
It also comes handy when you have made say your โ<header>โ element responsive with the viewport function, and want the rest for your elements to follow that responsiveness. I havenโt used divs in this case because thereโs only one part to edit in order to make this happen.
However, letโs say you add an image, and you are editing the size of the image. However, you want to also add the positioning of the image in a way that the size wonโt affect the positioning. Hence, we put the img src line in a div so we can keep those two features separate.
Think of divs like boxes that we can edit and move around. Itโs pretty useful when all of a sudden a client wants you to change the font-size and you know that your layout of the page is not going to change.
Note: can you see in the img tag we have set the source, class and some weird thing called โalt.โ The alt element is used for google search saying what the image is. Google will search โlogoโ and our image will somehow appear in the catalog. Itโs good practice to do so.
Although there will be another talk on what are the differences between position absolute and relative, letโs figure out how to position things correctly.
So, for this section, we are using position absolute and setting the top and left features. Letโs imagine we donโt have the last line for now.
Right now, if we just had that, it wouldnโt centre it as we want. What position absolute, and setting the top and left do is set that positioning from the edge of the box. Note: put in a background colour css and run it, youโll see what I mean. Letโs say we donโt want the pivot point to be at the far left and we want it to be on the centre! Once itโs on the centre, then we can properly centre it.
Thatโs where the last line comes inโฆthe transform, translate.
The values inside is changing the pivot point. Itโs no longer linked to the position absolute. Rather, itโs readjusting. So, the -50% on both sides I think is changing the pivot point to be the centre. We now achieved our goal and positioning is now a trial and error from here on now.
Thatโs all the energy I got folks! Till next time x
If you feel bad for spending more than your budget on Christmas gifts, donโt be. Youโre giving at the end of the day and at least you have good spirit. At least itโs not for yourself if you know what I mean.
Create your free account to unlock your custom reading experience.