Reflection On the Third Week of -JaduJob Full Stack Developer Program
It's now three weeks with the Jadu family. I am really enjoying the learning process and fun activities during class, especially in Saad Bhai lectures. In this week we study the design element of web development and we discuss the growth mind.
So in the first technical class of this week, we learn the following things:
- Inline CSS
- Internal CSS / In page CSS
- External CSS / Out page CSS
- Basic CSS properties
- How to add an external font from google fonts in your code?
What is CSS?
CSS stands for Cascading Style Sheets. CSS is a language that allows complete and total control over the style of a hypertext document, including colors, layout, and fonts. It allows one to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
There is three different way to apply CSS in the web which we studied in our first lecture.
1. Inline CSS:
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.
Inline-styles are defined within the “style” attribute of the relevant element:
<!DOCTYPE html>
<html>
<body><h1 style=”color:blue;text-align:center;”>This is a heading</h1>
<p style=”color:red;”>This is a paragraph.</p></body>
</html>
2. Internal/Inpage CSS:
An internal style sheet may be used if one single HTML page has a unique style. The internal style is defined inside the <style> element, inside the head section.
Internal styles are defined within the <style> element, inside the <head> section of an HTML page:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body><h1>This is a heading</h1>
<p>This is a paragraph.</p></body>
</html>
3. External/Outpage CSS:
With an external style sheet, you can change the look of an entire website by changing just one file!
Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section.
External styles are defined within the <link> element, inside the <head> section of an HTML page:
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”mystyle.css”>
</head>
<body><h1>This is a heading</h1>
<p>This is a paragraph.</p></body>
</html>
Basic CSS properties
We studied several CSS properties in our first technical class like colors, background-colors, external fonts, font size, font-weight, font transform, text-decoration, margin and paddings, borders, box model.
Padding
CSS has properties for specifying the padding for each side of an element:
padding-toppadding-rightpadding-bottompadding-left
All the padding properties can have the following values:
- length — specifies padding in px, pt, cm, etc.
- % — specifies padding in % of the width of the containing element
- inherit — specifies that the padding should be inherited from the parent element
Note: Negative values are not allowed.
Example Codediv {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
CSS Margin
CSS has properties for specifying the margin for each side of an element:
margin-topmargin-rightmargin-bottommargin-left
Example Codep {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
you can refer to w3schools for further detail about the CSS properties.
In the second technical class of this week, we studied the intermediate level CSS. Things I learned this day are Attribute Selectors, States, and Flexbox.
- CSS Selectors
- States
- Flexbox
- CSS Selectors
CSS Selector
In CSS, selectors are patterns used to select the element(s) you want to style. Selectors play a key role in Styling HTML via CSS. With CSS selectors, we can access anything on an HTML page and Style them. There are a number of selectors like
- ID selector
- Class selector
- Attribute selector etc
for further selectors visit w3schools.
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
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.
Flexbox is 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
Reflection on Non-Technical Class
This day we have a course on Growth Mindset. Usually just like the best lecture since it is real that we are living with our possess made world. What I mean is that we have a characterized set of values and rules in our minds and we need everybody to take after them with us. But fundamentally, we got 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.
If you liked my article, Please do clap and follow me on LinkedIn and Twitter. Thanks…
