HTML BASICS

Html important rules

In html we have only one h1 element and that a good practice.
To make a text bold we use <b><PARESH/b> or strong element
<strong>Paresh</strong> (use strong).
To make italic we use <i>italic</i> or we use em element for
<em></em> em stands for Emphasize.
Ol stands for ordered list and inside we have li (list items)
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol> and ol gives puts number in the li item while the ul element
puts * in the list item.
Attributes are basically piece of data which we can use to describe elements.
To open a tab in new browser we use target= “_blank”
To wrap links element we use nav.
Semantic HTML :- a meaning or a purpose attached to them

> A semantic element clearly describes its meaning to both the browser and the
developer.

- Examples of non-semantic elements: <div> and <span> - Tells nothing about its
content.

- Examples of semantic elements: <form>, <table>, and <article> - Clearly defines

its content.
>Semantic HTML or semantic markup is HTML that introduces meaning to the web
page rather than just presentation.

- For example, a <p> tag indicates that the enclosed text is a paragraph. This is both
semantic and presentational because people know what paragraphs are, and
browsers know how to display them.

- On the flip side of this equation, tags such as <b> and <i> are not semantic. They
define only how the text should look (bold or italic), and don't provide any additional
meaning to the markup.

> References:

- Semantic Web (web 3.0): What is Semantic Web

- Semantic tags: All Semantic Elements
Aside element is used for some secondary information that complimants the
information in the main part of the page.

There are 3 places where we can write css:-

Inline css,internal, external css
1. Inline css is those in which we write css code inside of the element in the
html.(never use this technique)
2. Internal css is those in which we write css in head element in html
Which is enclosed with style element. (bad practice)
3. External we use by making new css file and then linking with html.

Line-hieght property gives the paragraph ability to set space between the
lines/
By default the line hieght is 1 and we set to 1.5 then the line hieght would be
1.5 time the font-size.
Text-alegn: center will center the text of the viewport.
Descendent selector
Footer inside p footer p{ it select all the elements that are inside the footer
elements.
}
Id and classes : - in id we can use each id name only once , it means we cant
repeat id names and for that we use classes.
Pseudo class
We write a pseudo class by writing a colon and the list of options appeared and
in decleation block we write the code.
Li:first-child, li:last-child and we can tearget the specific child li:nth-child(2){}
Li:nth-child(odd){
}
a:link {
color: #1098ad;
}

This will target all the anchor elements that have an href attribute and the with
not it will not target.
a:active {
background-color: black;
font-style: italic;
}

When we click on the click this code will be triggred.

Padding: 20px 40px; (first top bottom ,

second left and right)

Css and SCSS

 By the browser have some padding and margin
For default example, an h1 element so the main heading there
always some margin in it and we don’t want that, to fix that we we
use universal selector that use like this *{ margin: 0; Padding:0; box-
sizing: border-box}.
  That basically allows us to start clean without adding any
margins or paddings that we don’t want to ours elements.
 Box-sizing border box what it does is to change the box model
so that the border and the paddings are no longer added to the
total width or the total height that we specify for a box.
 Without this any paddings and borders are added to the height
or the width of an element.
 Detailed example :

This div has width of 200px and we give a 10px border then it add to
this div what will happen is the 10px add to the div give a total width
of 220px.

With box sizing border box :-

And we give some additional padding it width increases to 240px,
With box sizing it width remain same as 200px.

Overall Font Properties for entire

webpage
The properties related to font are basically inherited so we use that
properties in body slector { font-family: wahtever;} and doing in this
way is more effiecient and it’s a better practice than to all of this in
univerasal selector.
Important properties defination:-
 Line hieght is the overall gap between the lines.
 Vh means viewport, the hieght of the box of tehe element
should be 95% of the viewport hieght / 95% of the display
page.
 Background-cover what it does is that whatever the width of
the viewport or the element, it’ll try to fit.
 Backgorund-position: center what it does when we try to resize
the image it will resize from that position, there are 2 similar
properties avilable with them (bottom , center)
 Linear gradient property we always specify on background
image and we can specify the direction onto it. For example :-

Style properties
Clip-path property checkout this property from
https://bennettfeely.com/clippy/
Img properties:
In img properties we have alt attribites is to describe the image for SEO but also in the case
the image fails to load and then on the website instead of image showing this text appears
that we put in alt attribute.
Inline and block level elements :-
Block elements means it occupy all space which he gets in his
width and the next element comes in a new line. Or in the
other side they cannot be side by side with one another.
Elements occupy 100% width of parent element width no matter the content.
A block-level element always takes up the full width available (stretches out
to the left and right as far as it can).
You can define the hieght and width in block lvl elements.
It does not let anyone else come after it in the same line,
Block lvl elements are <address>
<article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt>
<fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6 >
<header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre>
<section> <table> <tfoot> <ul> <video>

Inline Elements
An inline element only takes up as much width as necessary.

In inline elements you cannt define the hieght and width. And it is because it
automatically adjust its height and width according to the content.

Padding and margins are applied only horizontally(left and right).

This is a inline element which takes space according to its content.

We increase the content the size increase automatically.

Here are the inline elements in HTML:

<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code>
<dfn>
<em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q>
<samp>
<script> <select> <small> <span> <strong> <sub> <sup> <textarea>
<time>
<tt> <var>
Display : inline-block
Like inline element it does not start on a new line.

Like a block level element height and width can be defined.

Position absolute, relative, fixed and

sticky in CSS
Position relative

By putting postion relative we can access to top ,bottom,left, right

properties.

Apni normal position ke relative voh move kareyga and leave a gap at its
position.

Position Absolute

Realtive to the position of its parent which is anything, it move suppose

body.

we can access to top ,bottom,left, right properties.

And it doesn’t leave a gap

When we put absolute make sure there is

always some refrence from which parent
element it has to move and put postion
relative to that parent.
Shortcut way of position a element to a
center
.text-box {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}

Adjacent sibling selector

Adjacent sibling is the sibling that
comes right after it.
H3 + p { only the paragraph that comes
after h3 got selected.
}

LAYOUTS
1. FLOATS
Collapsing elements when there is one parent
element and inside of those there are two div
element and we specified float left and other
to float right the parent hieght will
collapsed.
It is same as absolute positioning as the
element is not on the page.

Fixing the float :-

First technique
To fix the float we add another div in parent
elemnt and keep it empty and then .

Second technique
 The second technique we use is to add class of
clearfix to the parent element whose hieght has
collapsed and then select the class like this :
.clearfix::after {
content: "";
clear: both;
display: block;
}

Position center
.text-box {
position: absolute;
top: 50%;
left: 50%;

/* these 50% are no longer relation to parent element but of the

text-box itself */

/* -50% on x-axis will shifted half of the width to the left side and
same on the y axis i mean height , it will be shifted 50% of the height
to the top */
transform: translate(-50%, -50%);
}

Animations
There are generally two types of
animation in css
1. Transition property
2. Keyframes

This is how we do animation

 First we have to sepratley define
the animation with a name.
@keyframes moveInleft {
0% {
opacity: 0;
transform: translateX(-100px);
}
80% {
transform: translateX(10px);
}

100% {
opacity: 1;
transform: translate(0);
}
}

And then which element has to animate we

have to simply put in that this property
name,
Other properties for animation we can
specify
 animation-delay: 3s;
first it waited 3s then it loads the
animation.
 Animation-iteration-count
If we set to three times the animation
repeat 3 times.
 Animation-Timing Function
Ease-in,ease-out,ease-in-out

Sometimes the animation shake and

moves to the little top of the
browser.
 To fix this we backface-visibility:
hidden to the parent container in
which the element contains.

Complex Animated Button

What pseudo-elements and pseudo-
classes are ?
.btn:link {
}

Pseudo classes are special state of selector. So

this link here is special state of button
selector.

Centring text element of the box by using text-

align: center;
.btn:active {
transform: translateY(-1px);
} when link is clicked

CSS Syntax
box-shadow: none|h-offset v-offset blur spread color |inset|
initial|inherit;

Note: To attach more than one shadow to an element, add a comma-

separated list of shadows (see "Try it Yourself" example below).

Property Values
Value Description

none Default value. No shadow is displayed

h-offset Required. The horizontal offset of the shadow. A positive value puts the shadow on the right side
box, a negative value puts the shadow on the left side of the box

v-offset Required. The vertical offset of the shadow. A positive value puts the shadow below the box, a n
value puts the shadow above the box

blur Optional. The blur radius. The higher the number, the more blurred the shadow will be

spread Optional. The spread radius. A positive value increases the size of the shadow, a negative value
decreases the size of the shadow

color Optional. The color of the shadow. The default value is the text color. Look at CSS Color Values fo
complete list of possible color values.

How CSS works behind the scenes ?

Three Pillars of writing good HTML and

CSS
1. Responsive Designs

 Fluid Layouts
 Media queries
 Responsive images
 Correct units
 Desktop-First vs mobile-first

2. Maintainable and scalable code

 Clean, easy to understand , Growth, Resuable, How
to Organize files,how to name classes, how to
structure HTML

3. Web Performance
 Less http requests
 Less code
 Compress code
 Use a css preprocessor like sass
 Less images
 Compress Images

Hows css Works behind

the scenes ?
What happens to css when we load up a webpage ?

1.Load HTML
 Browser actually starts to load
the intial html file.
2.Parse HTML
It then takes the loaded HTML code and parses it which
basically means that it decodes the code line by line.
Form this process the browser builds so called DOM which
basically describes the entire web document like a family
tree with parents, children and sibling elements.
So this DOM is where the entire decoded html code is
stored.

3.Load CSS
Now, as the browser parses the html, it also finds the style sheets
included in the html head, and it starts loading them as well. And
just like the html, CSS is also parsed, but the parsing of CSS is a
bit more complex. And that's why we'll talk about that in great
detail

4.Parse CSS
For now, let me just tell you that during the CSS parsing phase,
there are two main steps.

1. First off, conflicting CSS declarations are resolved through a

process known as the cascade.

2. The second step in a CSS parsing is to process final CSS

values. For instance, converting a margin defined in
percentage units to pixels. Imagine that we define the
left margin as 50%, but that 50% on a smartphone is
completely different than a 50% on a large screen, right?

And that's why these percentages, and other relative units, can only
be calculated on the user's device in the parsing phase.

5.CSS object Model

Now after all of this is done, the final CSS is also stored in a
tree-like structure called the CSS Object Model, similar to the DOM.
And now that we have the html, as well as the CSS parsed and stored,
these together form the so-called Render Tree. And with that, we
finally have everything we need to render the page.
Now, in order to actually render the page, the browser using
something called
the Visual Formatting Model. The algorithm calculates and uses a
bunch of stuff
that you already know about, like the box model, floats, and
positioning.

Okay, and so finally, after the Visual Formatting Model

has done it's work, the website it's finally rendered, or painted,
to the screen and the process is finished.

How CSS is parsed, Part 1 : the

cascade and specificity

Process of combining different stylesheets and resolving conflicts

b/w d/f CSS rules and declarations, when more than one rule applies
to a certain element.

Summary
What is sass ?

we use sass to basically fix the problem

that we have with css. Css gets very
messy, very quickly. And with huge
project with thousands of line of code
without any reusable piece without any
logic it gets completely unmanageable
after some time.
Sass features:-
Steps to convert sass
1. Define variables for example :-
color variables names define with it
dollar sign

2. Nesting

if we want to select last child

we done like this works same

in the first child.
but we can do better
 3. Mixin and arguments
A mixin is a resusable piece of code so you can
imagine this a huge variable with mutiple line of
code.
@mixin reusableCode {
// code
}
And we have now stored this entire piece of code inside of this mixin

And to use mixin

@Include reusableCode;

Another Example

@mixin style-link-text($col) { // This right here is called the

argument
Text-decoration: none;
Text-transform: uppercase;
Color: $col;
}

@include style-link-text($color-text-dark);
@include style-link-text($color-text-light);

4. Function
In sass function works like this

@function divide($a, $b){ we pass arguments in it

and it return

@return $a / $b; with the return keyword just like

in js }

And to use this function

Nav{
 Margin: divide(60,2) * 1px ; //30px
Backgorund-color: $color-primary;
}

And we could, of course, do much more complex stuff, much more

complex calculation, instead of just dividing one number by the other. All
right, so we talked about mixins, about functions,

Implementing 7-1
architecture with sass
7-1 pattern where we create 7 folders and
one main SASS file to import all the
files that are in these folders.
So, Let's start by creating the base folderwhich is where we're going to
put our basic project definitions.
Responsive Design Principles
and layout types
Use @if and @else to Add Logic To Your Styles

@mixin border-stroke($val){
@if $val == light{
border: 1px solid black;
}
@else if $val == medium{
border: 3px solid black;
}
@else if $val == heavy{
border: 6px solid black;
}
@else {
border: none;
}
}

#box {

width: 150px;
height: 150px;
background-color: red;
@include border-stroke(medium);
}
Not pseudo selector
And we use like this
&:not(:last-child){ } without the not it
would simply select the last child and
what not does it select everything except
the last child.
Linear gradient: it goes from one side to
other one while the radial gradient start
in the middle of an element and goes from
there in all the outside directions
bascially.

RESPONSIVE WEB DESIGN

Responsive Images
ART DIRECTION
<picture class="footer__logo">
<source srcset="img/logo-green-small-1x.png
img/logo-green-small-2x.png 2x" media="(max-width:
37.5em)">
<img srcset=" img/logo-green-1x.png 1x,
img/logo-green-2x.png 2x" alt="Full logo" >
</picture>

Density and resolution

switching
How to allow browser to decide the best img to download using
the srcset attribute, width descriptors and the size attribute of
the <img> element.
FLEXBOX
Flexbox properties

Normal max-width in element agar container ki

width choti hui 120rem toh voh pura space cover
kar lega viewport ka
Flex-start : the items will start at the start of the

container.
Strech all the elements will automatically stretch as tall as the tallest element in align-items: flex-
start
Align-items center will center the element in the container vertically and is used for all the items.

Whereas align-self: property is for particular or selected element.

Justify content center will center the elements horizontally

Justify content space-between will distribute the space between the elements.

Order property: by default all the order of the elements in the flex container are zero

And the one with the less order will appear in first -1, 0, 1 .

Gap property will give the gap between the flex items in the flex container.

Flex property is a shorthand for flex grow , flex basis and felx shrink.

Default .el{

Flex-grow: 0;

Flex-shrink: 1; flex-basis: auto;

Flex-basis is like width of a item in flex-container.

Flex-grow gives the elmenet ability to grow as large as they can
With flex-shrink set to zero we doesn’t allow flex – item to shrink. That has the
width define speficifly/.
Margin-right auto

CSS GRID
Grid-template colomns: 250px 150px;
Fr unit So using the fr unit here instead of pixels
will allow us to very easily create flexible columns,
and flexible rows.
It helps to fill the remaining space. Same width to
all column set to 1fr.

Implicet grid vs explict grid

explicit grid are those which we define using grid
property and implict grid are those which is
define by the browser.
And what we have to manipulate the explicit
grid..
Grid-auto-rows

Max-content
It makes the column as wide as
it has to be to fit the content .

Min-content
It fits the content without
overflowing
Min-max function
It ensures that the property
stays between 150px and min-
content or whatever we define.
Auto-fill
It make column automaticalyy
to fill the entire width;
Max-width set on a cantainer :- if container has not
enogh space then it will occupy 100vh
Stroke css changes the color of svg element.
By fill we can fill the coloe inside the svg element.
Adding shadow to the box :-
Box-shadow: first one is horizontal offset between the
box and the shadow, second value if for vertical
direction, third value is for blur, value number four is
optional(it allows us to do bascially scale the shadow
up, last one is color of the shadow)
Text-shadow: this one doesn’t have fourth value.
!important: - Margin 0 auto works when we define the
width of a element.

VW unit I too struggled to understand why we are defining the height of a row,
with a unit that suggests width. So I looked into it:

It's important to look at it this way; we are not defining the width of the row here,
using the VW unit. We are defining the HEIGHT. Strange? I know! but it makes sense.
How? well, 40vw used with grid-template-rows: says that the HEIGHT of that
particular row will ALWAYS be 40%(40vw) of the viewport width(width of your
screen). So for example, if you are on a device that has a viewport width of 400px,
the height of the row specified as 40vw, will have a height of 160px (400 * 0.4 =
160).
1. He defined the height of the row using the vw unit.

2. It's done so because we want to make it responsive in the horizontal

direction.

3. if we decrease the viewport width in the horizontal direction,, it decrease the row
height.

4. if we have used the vh unit then it wouldn't be possible to reduce the row height
while decreasing the viewport width.

-1 works with the explicit grid. So we have to use span

2
- good practice to display images as block
- in some situtaions we don’t set grid to the container
that holding 2 divs but instead we wrap those two divs
in another div (like we did in omnifood project)
- in some cases when we add border to button when we
hover the layout kind of jumps out
Solution: - trick to add border inside by using box
shadow
--transition property is always put in the “state”
--in before pseudo element 60% height not works then
by putting padding-variable: 60% will works !
-- to center element position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

 The element which have high z-index will appear

on the the top.
 The bigger the element the longer we can hover it
means transition seconds put longers .4s
 &-text {
 font-size: 1.8rem;
 }
 &-name {
 line-height: 1.8;
 }
 }
 New thing this line-height is a multiplayer of font-
size then that will be the line-height
 It is a good practice to put the image in a
container element (figure) not all only one
 In media queries one rem is not 10px as we define
in html instead one rem will be default font size
browser setting.
One rem = one em = 16px;
In body if we write overflow hidden , then it will only
work if there is no position absolute elements in
relation to body

BEM NOTATIONS
BLOCK AND MODIFIER

not going to work in

regular css