Week-3 with Jadu Fellowship
--
February 22, 2021 — February 26, 2021
I have completed my 3rd week with Jadu successfully. In week-3 I have learnt exciting things about CSS (Cascading Style Sheet) and most important is the soft skill session which was about growth mindset.
Monday’s Session:
February 22,2021
In the previous week we completed our first topic which was HTML. Now it was the time to start working on CSS.
The first things was how to write CSS. There are three ways:
Using inline CSS:
For example:
<h1 style="color:red;margin-left:20px;">Today’s Update</h1>
Using internal CSS stylesheets:
For example:
<head>
<style type="text/css">
h1 {
color:#fff
margin-left: 20px;
}
p {
font-family: Arial, Helvetica, Sans Serif;
}
</style>
</head>
Using external CSS stylesheets:
For example:
<link href="style.css" rel="stylesheet" type="text/css">
In my opinion using external CSS is a good practice, It looks more professional while we can also use internal CSS but using inline CSS is a bad practice.
We also looked into some other properties of CSS i.e. Colors, Font Sizing, Font Styling, External fonts, Margin, Padding, Developer Tool CSS, Border.
Tuesday’s Session :
February 23,2021
This session was about growth mindset which highlighted the importance of having a growth mindset. In today’s world linear thinking cannot take you any further we should have a growth mindset.
By our hard work and dedication we can achieve anything in life, people who believe that success depends on natural abilities are wrong.
Individuals who believe their talents can be developed (through hard work, good strategies, and input from others) have a growth mindset. They tend to achieve more than those with a more fixed mindset (those who believe their talents are innate gifts).
“A growth mindset is when students understand that their abilities can be developed.”
(Dweck, 2014).
Friday’s Session :
February 26,2021
CSS Box Model:
In CSS, the term “box model” is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
CSS id Selector:
The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element is unique within a page, so the id selector is used to select one unique element!
To select an element with a specific id, write a hash (#) character, followed by the id of the element.
CSS class Selector:
The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the class name.
Flexbox:
The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.
The flex container properties are: