1,081 reads

Episode 30: Opening the CSS box and practices.

by Dania MahDecember 2nd, 2017

Too Long; Didn't Read

I’m documenting my <a href="https://hackernoon.com/tagged/learning" target="_blank">learning</a> on one of the Udemy courses on <a href="https://hackernoon.com/tagged/css" target="_blank">CSS</a>. 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.

Companies Mentioned

featured image - Episode 30: Opening the CSS box and practices.

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.

Good practice in CSS:

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?

Everything in your <head> tag should be required files or styles that will be implemented on your page. If there is a font you require or a certain view you want to apply to all the elements and the page itself, inside the <head> tag is where you should put it.
Everything in your <body> should be what content you edit. (i.e elements on your page)
Starting clean.

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:

CSS3 box-sizing property_Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript…_www.w3schools.com

Now, we know what it means by starting clean by having cleaned out the margins, border and set the border-box

Responsiveness:

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…

Cropping an image:

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.

We know that 0 is left and 100 is right for the first coordinate.
We also know that 0 is the top and the bottom can go for a higher number, past as the image dimensions.

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.

What SPANS are actually for:

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.

Yes, we are finally not limited by 8 elements that call text boxes. (h1-h7 & p) anymore. Hallelujah!

Moving stuff in DIVS.

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.

Positioning correctly:

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

Fun fact of the Day:

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.