Image by Boskampi from Pixabay
Hello to anyone reading. I find myself becoming more and more shocked by how quick the weeks are moving. Every year always feels like it rushes by faster and faster. This seems truer than ever when you also have lots of studying and other activities that preoccupy you as well.
I do try to be as positive as possible but sometimes you also got to feel the less good emotions at times to and I must admit I have been feeling a little down over the last week. As a result, I have been taking it a bit easier. Best not to get overwhelmed and burned out. It is no singular thing but more everything. Lots of things to take in a lot of pathways to choose from can equal quite a bit of stress.
I do wonder how some people can juggle so many things at once, or at least it seems like many people do. I have never been a good multi-tasker. I am better at focusing on one thing at a time but that’s not always possible unfortunately. A lot of the time it can feel like not enough progress is being made in each area you’ve dedicated to and you just wonder how you’re meant to tackle that mountain.
I have been making a bit more time in the evenings to watch some paranormal content – Sam & Colby is something new I’ve found lately that I’ve become fixated with – and I find it has been helping me to wind down at the end of the day. It reminds me when I was younger when I’d watch a lot of paranormal shows on television.
Anyway, I’m rambling. I ramble a lot to myself when I am stressed. I think the point I am trying to make is this will be a bit more of a relaxed and structured blogpost – a top ‘ ‘ if you will – that to my brain seems a better way right now for me to complete and put up. It would be good to get out of the habit of writing last minute blogposts… but that’s easier said than done when a lot of other things are on the plate.
So… with that said. Let’s go over some interesting things I have learned from the Project Odin course over the week since my last blogpost:
Number 1 – CSS Resets
For some reason I never realised that browsers use default styling. It sounds dumb but it’s just never something I decided to think about. However, it does make a lot of sense, so things are not just left absolutely bland. But it also brings about issues of potential inconsistencies between browsers. This means that it can cause issues when testing/making your CSS between the different browsers and none are guaranteed to have default elements look the same.
So, the way of dealing with this is using something called CSS Resets which is a bunch of default CSS that makes the styles have consistency, usually in a very basic fashion, so then there is like a consistent template to start off with. One of the most popular is the Meyer Reset.
Some more advanced solutions also exist that extend beyond a typical vanilla CSS Reset, one of which is Normalize.css that is different in that it does not remove all default styles, but keeps the most useful ones that are still consistent across browsers.
Number 2 – Font Stacks
Developers when defining the font will often define a number of ‘fallback fonts’ just in case other fonts they have selected will not work due to them not being supported by a user’s system. Putting a bunch of fonts as fallbacks is also called a font stack.
There are a number of ways to do it such as just listing a number of fonts on the CSS font-family: property, or importing fonts from a library such as Google Fonts. A font can also be downloaded as well and hosted from a file. There are pros and cons to whatever option is chosen to create a font stack.
Number 3 – Pseudo-Classes and Pseudo-Elements
I knew about this but have not really properly looked into them until the Odin Project. Pseudo-classes provide for unique and different ways to target elements while Pseudo-elements are often use to target elements that do not typically exist in the HTML markup.
This sounds confusing via a simple explanation by it includes things like making un-clicked links blue using the :link pseudo-class and making previously clicked links purple using the :visited pseudo-class. This is already done by default in most browsers (and can be stopped via a CSS Reset). You can use :nth-child to define a ‘pattern’ of targeted styling to something, like a HTML Table’s cells, so you could do something like tr:nth-child(odd) td to target each odd line of cells with a style (so the 1st column, 3rd column, 5th column, etc).
Another common one is :root to target the very top level of the document (the root element) – which is typically the <html></html> element that is a parent to all the other elements. This can be useful because it has a higher specificity than just targeting the html element directly, and can be used to set styles that will be consistent across the webpage, as well as setting ‘global’ CSS Variables.
As for pseudo-elements you can use something like ::marker to target the bullet points or numbers of HTML list elements to give them your own custom styling. Or use something like ::selecting to style highlighting (when a user selects text). Much of it is just ways to make your content look especially unique.
Number 5 – CSS Functions
Although CSS is not a programming language, it is able to use functions like a programming language, although the functions it uses are premade (you cannot make your own). Functions are useful if you wanted to do something during runtime, such as calculate a value that will determine a style or calculate values for responsive design. This is useful as in many cases it can be very hard or even impossible to calculate some values in advance.
Such functions used to calculate things include calc() – the default one used for basic arithmetic on targeted elements, and it can even nest another calc() within it to have more complex calculations. And then there are ones like min(), max(), and clamp() used to calculate responsive sizes of elements based on variables during runtime.
One of the more well-known and simpler functions is rgb() which is one of many other ways to define colour styles in CSS for a targeted element instead of just using colour names or the hex code. The rgb one uses the red, green, blue colour spectrum and uses decimal numbers to create the colour. But others also exist like hsl() which takes in values for hue, saturation, and lightness to determine a colour style. Each one also accepts a 4th optional value to determine a colour’s opacity.
Number 6 – CSS Variables
Finally, there are variables in CSS as well. Variables are something well-known in typical programming languages, but they also exist in CSS and are very useful. They are not exactly the same as variables from programming languages as they go by some different rules.
But basically, you define a CSS variable (otherwise known as a custom property) like this: –my-css-variable
It can have any name you want but it is best to give it a name that defines its purpose. After that it can be used to hold a CSS property and value. Then just simply place the CSS Variable name in a var() function and use that to target the element you want to style in the CSS. This makes it so there is just one instance of that property (rather than needing multiple) which makes it easier to update it all at once if needed.
One thing to note is that CSS Variables are limited by scope – they can only target elements within a specific selector they were defined in as well as their children. The best way around this is to create the :root selector and define all of the ‘global’ CSS Variables you want to use across your CSS there, those CSS Variables can then target any elements as all of the elements are children of the :root element.
Conclusion
These are just a few things I found most interesting this week in the Odin Project. I knew about a number of them previously but was able to get a deeper and more well-rounded understanding of them from the course.
I only give very simple explanations of them here that people unfamiliar with CSS and HTML may not fully understand (I certainly know I would not have understood this myself before I begun learning). And there are still some things even that allude me, but I am trying my best to learn.
You should check the Odin Project out if you are interested in getting a fuller explanation on these subjects and more beyond that.
Thank you for reading. If you have any queries please Email me, you can find my Email in the Contacts & Community section. Please also follow The Weekly Rambler on Twitter, Reddit, Pinterest and Facebook which you can access through the buttons at the bottom of this website. You can also use the social media buttons under each blogpost to share with your family, friends and associates.