Let's get started!
It's 2020 and you just lost your job due to the pandemic. You had your hopes up to find a new job but nothings coming. You start doubting yourself and asking what's wrong.
Guess what, You are not the problem! We are in crisis and we have our own ways to deal with it.
The majority of us is loved developing using frameworks, like React, Angular, etc right? ( I don't want to speak for everyone but personally I love using frameworks!)
Here's My Story
One casual and random day, my girlfriend found this awesome online course and she said, "Hey, what if you focus on honing your skills?" and she sent me the link.
I enrolled with CS50's Web Programming with Python and JavaScript and try to learn and improve my skills.
While taking the early part of the course, (I just started hehe). I realized that there's still so much to learn in HTML, CSS, and Javascript! So much to review about and hey, I started using SASS!
Took time to understand deeper on bootstrap and how to write cleaner code and minimal lines!
Things I Learned (So far!)
1. How to use Grid and FlexBox properly
Some people would say, "It's easy!" or "What a basic!". Okay and this is not for you, I guess.
There's this layout that you really want to follow.
Ask yourself:
one-dimensional ~ row OR columns?
multi-dimensional ~ row AND columns?
Once you figured that out, everything comes smoothly.
and also, you can use both FlexBox and Grid and even nest them if you want to!
2. Selecting Selectors in CSS!
There are 5 categories to select that element you want to modify!
Simple Selectors
These are the class, id, or element name! It is the common selector that everyone use to style, the element.
* { } //Universal Selector
div { } //element name
.class { } //class
#id { } //id
Combinator Selectors
This is a way to make use of the relationship between the selectors. There are 4 combinators you can utilize in css.
- General Sibling Selector (~)
- child selector (>)
- adjacent sibling selector (+)
- descendant selector (space)
General Sibling Selector ( ~ )
If you want to select the sibling element of one certain element, you can use this selector.
Example:
div ~ p {}
This will select the p tag as long as it's a sibbling of the div tag.
Take note that this will not select the div tag's children.
Child Selector ( > )
Do you want to select the child element of a certain element? You can use the child selector!
Example:
div > h1 {}
This will select the h1 that's a child of the div. That's pretty straightforward.
Adjacent Sibling Selector ( + )
To understand this, we first need to know the meaning of adjacent. Adjacent means "next to or adjoining something else."
With that, using the adjacent sibling selector will find the sibbling element that's immediately following.
To understand better here's an example:
div + p {}
The CSS snippets will find the p that's immediately following or next to div. They must have the same parent.
Descendant Selector
This selector will find the descendant of a specified element.
Example:
div span h1 {}
The snippet will find and select all the h1 inside the span inside the div.
Pseudo-Classes
A pseudo-class is added to a selector that specified a state of the element. A common example is :hover. When a mouse pointer hovers on a element, a certain style will be applied.
Example
button:hover {
color: red;
}
The button's color will change to red when a mouse hovers it.
Pseudo-Elements
A pseudo-element is used to style a specific part(s) of an element.
For starters, it can be used to style the first letter or line of an element, or if you want to add content before or after an element.
a::before {
content: "check this out";
}
<a href="#"> Coding Tips! </a>
The content "check this out" will be added before the "Coding Tips!" How fun is that!
If you want to style the first letter? you can do something like this:
h1::first-letter{
color: red;
}
This will change the first letter of the h1 to the color red.
Attribute Selectors
There's a nice way to select a specific element with a specific attribute, and yes it is possible!
Example:
button[type="submit"] {}
This will select the button with an attribute type="submit"
3. Sass: Syntactically Awesome Style Sheets
Sass made my css style very "sassy",
What is SASS?
Well, according to sass-lang.com, It is the most stable, and powerful grade css extension language in the world.
It's very fun and easy to use! You can install it using node and viola! You can play around and use it in your projects. There many ways to utilize sass.
You can check their site and documentation to learn!
SO FAR ...
before advancing,
Make sure you are familiars with your roots, and other get to know the basic language, tools and etc... This will make your life as a coder much easier, and you will understand advance tools and technologies like a cakewalk.
That's all and what do you want to know next? I'm open for a conversation of you guys want to discuss or add your "roots" before advancing to the next level.
Top comments (2)
Great article! And as they say about SASS it's css with super powers.
Thanks! Indeed!