My 3rd Week at Jadu (MERN-stack development)

Monday — 22/02/2021

This is my 3rd week at Jadu learning MERN-stack development. I am learning exciting stuff in every class. This is really too much fun learning with such a great community.

So in my first technical class of this week, we learn the following things:

• 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 skeleton of a webpage and CSS is the skin on the skeleton. CSS is used to give styles and make the webpage more eye-catchy and beautiful.

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 learn how to import external fonts to our webpage such as Google Fonts.
• How to change font size, fonts family, and font-weight.
• We 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 class on Growth Mindset. This is like the best lecture because it is true that we are living with our own created world. What I mean is that we have a defined set of values and rules in our minds and we want everyone to follow them with us. But basically, we have to come out from ourselves and see the world.

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.

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 I learned this day are 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 is 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.

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

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.