My Third Week at Jadu Program

Now here the end of third week of Jadu program in this week I have learned a lot things in the area of technical and non technical so here I am firstly discuss Week 3 Day-1

In this class what I have learned so far so as previous mentioned in week 2

we have learned The signup form was made and then I tried making one too, so now to continue practicing.

so week 3 In first technical class of this week, I have learn the following things in CSS :

You people are thinking what is CSS and how it’s work in website development ?and why we use in website ?

So here I tell you in detail about CSS

What is CSS ?

CSS stand for Cascading Style Sheet

There are three types of CSS

• Inline CSS
• Internal CSS / In page CSS
• External CSS / Out page CSS

First, let me clear a point here about CSS and HTML. HTML is like a structure of a webpage and CSS is used for styling the web page and make beautiful . CSS describes how HTML elements should be displayed.

Now, an Inline CSS is those styles that we define on tag level. For example, if we want to change color of h1 tags we can write <h1 style=” color: blue;”> Heading 1 </h1>.

Internal CSS is those styles that we define in the head section of the HTML page. In internal CSS we wrote <style>styles go here </style> in the Head section of the HTML page.

External CSS are those styles that are off the page and all our styles go to another page. This is the most recommended method of styling a webpage. This method keeps both HTML and CSS code in separate files and our code remains neat, easy to read, and understand.

Further in this class, we learn about the most basic styling attributes and some are mentioned below.

• We have learn how to import external fonts to our webpage such as Google Fonts.
• How to change font size, fonts family, and font-weight.
• We have also learned how to change the text-decoration.
• Changing text and background colors.
• What are margins and paddings and how we apply these HTML elements?
• We learned about the box-model and the instructor explained that really well.

Tuesday — 23/02/2021

This day we have a Non Technical class on Growth Mindset with Best Speaker Saad Hamid

First I have tell you what is Growth Mindset

A Growth mindset is the belief that intelligence can be developed. Students with a growth mindset understand they can get smarter through hard work, the use of effective strategies, and help from others when needed. It is contrasted with a fixed mindset: the belief that intelligence is a fixed trait that is set in stone at birth.

The whole summary of the Growth Mindset is “Think Different, Think Positive”. If you fixed your mind and don’t even listen to other opinions then you can’t grow your mind. You have to listen and respect others’ opinions and try to understand them. This way you can grow your mind. Mind growth is very necessary to become a good man else you will be the only one who will think that you are a good man. Sir Saad explained in detail and encouraged everyone.

Friday — 26/02/2021

This is the second technical class in the 3rd week of the Jadu program. I am learning a lot. This day I learn so much exciting stuff. Things Sirs Arslan Khattak teaches us I Attribute Selectors, States, and Flexbox. Attribute Selectors

Attribute Selectors play a key role in Styling HTML via CSS. With attribute selectors, we can access anything on an HTML page and Style them.
For example, if we want to change the font size of all the paragraphs in the HTML tag we can do that by writing p {font-size: 30px} in our CSS and it will change the font size of paragraphs’ contents in HTML to 30px.

This is not the end, We can change every tag individually by assigning an ID selector in the HTML tag. For example, we have a heading 1 tag at the top and we want to change only that heading 1 style. We can give that heading 1 tag ID like this; <h1 id=”head1”>Heading 1 </h1>. In CSS we will access ID selector with #. #head1{color: blue;}.

We have several attribute selectors and you can see them from here. The most commonly used attributes are ID and Class. To access IDs in CSS we write #id_name and to access Class we write .class name.

States with CSS

We have 6 types of states for HTML elements. These are Focus, Active, Visited, Focus within, Focus Visible and hover. While writing in an input tag we click inside the input tag the state of that input tag then becomes the focus. We can hover the mouse and change the styles of an element. We can apply various stylings by changing the states with CSS.

Flexbox

A very important concept by which we can make beautiful and responsive websites with Flexbox. The FlexBox layout Module makes it easier to design a flexible responsive layout structure without using float or positioning. Flexbox helps developers to avoid writing more codes which makes it less error-prone and easy to read as well.

Before the Flexbox Layout module, there were four layout modes:

• Block, for sections in a webpage
• Inline, for text
• Table, for two-dimensional table data
• Positioned, for explicit position of an element

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

To start using the Flexbox model, you need to first define a flex container.

Example

A flex container with three flex items:

<div class=”flex-container”>
<div>1</div>
<div>2</div>
<div>3</div>
</div>

The most common properties of Flexbox that we can use in our projects are:

• Using display: flex
• Flex-direction
• Flex-wrap
• Justify-content
• Align-items

Browser Support

The flexbox properties are supported in all modern browsers.

Here is the source to understand these deeply. You can also refer to the flexbox cheat sheet which is another source to understand flexbox and its properties. Flexbox is a very interesting concept and easy to use in CSS.

By learning CSS one can easily go one step ahead and learn bootstrap which is a framework for making responsive websites

Here I provide some resources where you can easily learn about CSS and Flexbox Highly recommended these resources for learn CSS and Flexbox

Felxbox

Css

Now here complete the journey of CSS