Jadu Fellowship- Week 3
This is going to be a detailed blog as I’ve spent a week writing it.
Week 3, class 1
This week was the beginning of learning CSS (Cascading Style Sheet)that is use to covert your boring black and white html page into a full fledged website by filling it with colors, properly aligned text, cool background and much more.
There are three ways to add CSS in your html code
- Inline
- In Page (Internal)
- Out Page (External)
Inline style:
In this type CSS is added within html tags by using “style” attribute.
For Example. In this example green color is applied on <h1> and <h2> within their tags.
In Page (Internal CSS):
In this type, CSS is written in “.html” file inside an additional tag called
<style>…</style> tag.
Example:
Out Page (External CSS):
This style is by far the most preferable style of using CSS because of obvious reasons. In this type a new file is created and saved with “.css” extension then it is linked to “.html” file by using <link> tag of html.
Once you have linked your “.css” file to html now, you can write your CSS code in that “.css” file. This helps with writing “clean code” as this is one of the advantage of using external style.
But why are there three different ways to write CSS? and which one is best?
As I have mentioned above that external style is always the best practice.
Then what’s the point of the other two?
Well that’s where the “priority concept” comes in as Inline CSS has highest priority while external having the lowest.
CSS Properties.
There are tons of properties available in CSS, you name it, and you have it.We discussed the basic one’s in our first class, such as:
- color
- background
- external fonts
- font size
- font Styling
- margins & padding
Color:
colors can be added in CSS by using “color” property. Colors can be selected by name, color code, or by rgb(), rgba() methods.
Background:
This property is used to add background effects to a website. Whether you want to add a background image , or add colors, animations etc all of this is possible with Background property.
Thanks to Visual Studio for suggestions as we don’t need to memories all of them.
Font size, styling and weight:
These are some basic CSS properties use to style our font.
font-size: Use to specify size of font.
font-styling: Here is the list of styles you can apply on your font.
font-weight: In a nutshell this property will specify how “fat” your font is.
You can also add external fonts by using google fonts. Check out my blog(Coming soon) for a detailed guide on How to use external fonts for your website.
Last but not the least property
Margins and Padding:
Margins: Lets say I have two paragraphs in this image and right now I haven’t set any margin for that, you see the orange line that’s the margin between them.
Now let’s set margin to 30px and check the results.
As you can see I have provided only one value i.e 30px. hence, it will work for all 4 sides but we set different margins for different sides according to our needs by using these margin properties.
You can also write them all in a single line as it will reduce the line of code and provide same results.
Padding:
The space between text and borders is called padding.
This was all we learnt in intro class of CSS. We will discuss more about it in our next technical class.
Also, I made a simple login form by using what I have learnt so far.
Week 3, Class 2-Soft Skill Session
This is my personal favorite session of the week. This week the session was about “Growth Mindset” conducted by the very famous Sir Saad Hamid.
Sir began the session by reflecting on his viral meme #Strawbiryani and we found out that it was actually the “unique name” that created the buzz.
People like crazy new ideas so, when you are creating something think about something unique and just be yourself.
Our Mind is a processor and the moment you realize
“You’ve got one life, make the most of it, do something with it”
that’s when your mind starts processing.
You should always be open to everything, keep trying out new things, keep experimenting and solve world problems because as Sir Saad says:
“Everything is do-able, Every Problem is solvable.”
We also voted on some pools related to “Growth mindset” and learnt that intelligence is not something a person is born with so is talent but, it is developed time to time. As for talents, people discover their talents by trying out new things. hence, we should never stop learning and growing just because we think we’re dumb, instead we should think “If they can do it, I can too.”
Then we discussed the difference between “Fixed mindset” and “Growth mindset.”
The people with fixed mindset always think about what other’s will think. In a fixed mindset, people believe their basic qualities, like their intelligence or talent, are simply fixed traits.
whereas, people with growth mindset see their qualities as things that can be developed through their dedication and effort.
Week 3, Class 3 - Diving deeper in CSS.
This Technical class was the most productive one so far because we covered some advanced css topics such as:
- ID selector
- Class Selector
- Flex box
Selectors:
CSS selectors are used to access different components in an html page separated by <div> tag. There are two most commonly used selectors.
- ID Selector
- Class Selector
ID Selectors: ID Selectors are used to select a specific element you want to style. As shown in example below the id for h1 is “idSelector” so whenever you want to style this element it can be accessed by using this ID. Id of an element should be unique.
ID can be accessed by using a “#” symbol as shown below:
As you can see h1 is styled by using id attribute.
Class Selector: Class selectors have similar functionality as id selectors apart from some differences.
Class is declared by using “class” attribute within the html tag.
It is accessed by using a dot “.” in CSS file.
Styled Output.
Different elements can have similar class but as mentioned above ID should be unique. If we have both an ID and a Class then ID have higher preferences as compared to class.
When to use?
Class is used when you want to use same styling for multiple elements.
The Best practice for using ID and class is ID should be used once and it should be unique. whereas same class can be used for multiple elements.
There are tons of CSS selectors you can use. You can find out more about them in this link “CSS Selectors”.
Flex Box
The most important attribute in CSS used to make responsive websites. If you want to know more about it then I’m providing an amazing website where you can get all the knowledge you want about flex boxes.
Here it is: Flex box - A detailed guide.
At the end we are assigned a cool mini project to practice everything we’ve learnt so far.
That was all what went down in third week with Jadu Family. I will come back next week with the story of another week till then,
