NgNinja Academy | All Rights Reserved

HTML and CSS

Table Of Content

Module 1 - Getting Started

Create Your First HTML Page
Write the following boilerplate code in index.html le
Run Your First HTML File
Run the application on the Internet for FREE
If I do not put <! DOCTYPE html> will HTML5 work?
DOM
When should you use section, div or article?
section
article
div
Headings
Paragraph
Links / Anchor elements
Images
Image Sizes
Image as links
Module 2 - Styling your Webpage
Create a CSS File
Then add your style in your index.html le
Now let's create the body of your Valentine's Day card
Now let's add your rst style
Selectors
.class
child .class
#id
element tag
Mix n match

1 / 20
NgNinja Academy | All Rights Reserved

Id and Class
Element and Class
Advanced Selectors
adjacent selector
attributes selector
Backgrounds
Colors
Borders
Fun with Border Radius
Shapes
Shorthand
Circle and leaf
Circle
Leaf
Module 3 - Display and position your elements
Box model
Total width of an element should be calculated like this:
Total height of an element should be calculated like this:
Margins
Margin On Individual Sides
Margin Shorthands
Auto Margin
Paddings
Padding On Individual Sides
Padding Shorthands
Display
Block
Inline
Inline-block
None
Visibility Hidden
Flex
Positions
Static
Relative
Absolute
Fixed
Centering:
Centering Vertically
CSS Float
Clearing Floats
Methods to clear oat:
Module 4 - Semantic HTML5
Semantic HTML?
More about Semantic HTML
Di erence between HTML and HTML5?

2 / 20
NgNinja Academy | All Rights Reserved

HTML
HTML 5
Below are new semantic elements
What elements have disappeared in the latest HTML?
Di erence between <div> and <frame>?
What is HTML5 Web Storage?
localStorage:
sessionStorage:
Module 5 - Flexbox intro and media query
Flexbox
Flex box container properties
Flex box item properties
Flexbox Examples
Media queries
Always Design for Mobile First
Orientation: Portrait / Landscape
Let's talk about the sizes - px vs em vs rem
How to calculate PX from REM
More on rem vs em
CSS Grids
Flexbox
Grids
Example
Example #2 - Gaps
Example #3 - Fractions
Example #4 - Fractions Contd.
Nested grids
Start-End points of Grid
Module 6 - Quirks, tips, and tricks
FOUC
How to avoid it?
BEM naming convention
OOCSS - Object Oriented CSS
CSS User Agent Styles
Normalizing CSS
Reset CSS
Validate your CSS
Testing Strategies
Conditional CSS

3 / 20
NgNinja Academy | All Rights Reserved

Module 1 - Getting Started

Create Your First HTML Page

Create an app folder on your computer

Create le named index.html inside app folder on your computer
Open that page in your favorite text editor
I personally use VSCode

Module 2 - Styling your

Webpage

Now let's add your rst style

Let's add styles for your valentine's day card

We are using .card - class selector to grab the card DIV and style it
Here we are just setting a nice red border: 10px solid #E53038;
height: 100vh; is done to match out body tag's height - which is the full view-port height.

4 / 20
NgNinja Academy | All Rights Reserved

display: flex; makes this card DIV a ex-box.

We are just making all our flex-children align in vertically and horizontally center
position in one column.
NOTE: We will learn about ex-box in the later section.

.card {
border: 10px solid #E53038;
height: 300px;
width: 300px;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

5 / 20
NgNinja Academy | All Rights Reserved

Fun with Border Radius

Shapes

Borders also take another property called border-radius using which you can give di erent
shapes to your elements

In the above illustration we have a square on the left and circle on the right
If you provide border-radius of 50% it will turn your square into a circle

.square {
border-radius: none;
}

.circle {
border-radius: 50%;
}

6 / 20
NgNinja Academy | All Rights Reserved

Shorthand

If one value is set, this radius applies to all 4 corners.

If two values are set, the rst applies to top-left and bottom-right corner, the second
applies to top-right and bottom-left corner.
If three values are set - the second value applies to top-right and also bottom-left.
If four values apply to the top-left, top-right, bottom-right, bottom-left corner (in
that order).

7 / 20
NgNinja Academy | All Rights Reserved

<div class="card one">

<h1 class="">One</h1>
</div>
<div class="card two">
<h1 class="">Two</h1>
</div>
<div class="card three">
<h1 class="">Three</h1>
</div>
<div class="card four">
<h1 class="">Four</h1>
</div>

// all 4 corners
.one {
border-radius: 50%;
}

// 10% top-left and bottom-right, 20% top-right and bottom-left

.two {
border-radius: 10% 20%
}

// 10% top-left, 20% top-right and also bottom-left, 30% bottom-right

.three {
border-radius: 10% 20% 30%;
}

// top-left, top-right, bottom-right, bottom-left corner (in that order)

.four {
border-radius: 10% 20% 30% 40%;
}

.card {
border: 10px solid #E53038;
height: 100px;
width: 100px;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}

8 / 20
NgNinja Academy | All Rights Reserved

Circle and leaf

Circle

.circle {
border-radius: 50%;
}

9 / 20
NgNinja Academy | All Rights Reserved

Leaf

.leaf {
border-radius: 5px 20px 5px;
}

10 / 20
NgNinja Academy | All Rights Reserved

Module 3 - Display and

position your elements

Paddings

Paddings are used to generate space around the given element's content - inside its border

<div class="myDiv">
<p>My Paragraph</p>
</div>

// styles

.myDiv {
padding: 20px;
}

padding: 20px; gives the div element padding of 20px

So, basically there will be 20px space between p and div on all the sides

11 / 20
NgNinja Academy | All Rights Reserved

Padding On Individual Sides

You can also give padding to the elements on any particular side if you'd want

padding-top
padding-right
padding-bottom
padding-left

Padding Shorthands

To give padding on all the sides

div {
padding: 20px;
}

The below example give padding 20px top and bottom

And give padding 40px left and right

div {
padding: 20px 40px;
}

12 / 20
NgNinja Academy | All Rights Reserved

The below example give padding 20px top

And give padding 40px left and right
And give padding 50px bottom

div {
padding: 20px 40px 50px;
}

13 / 20
NgNinja Academy | All Rights Reserved

Display

Block

This property stretches the element left to right as far as it can

Default is block for div, p, form, header, footer, section (and some more)
Such elements cannot be placed on the same horizontal line with any other display modes
Except when they are oated
Like shown in the illustration -> every item stretches and uses up the entire row

Inline

Inline element sits in line

Without disrupting the ow of other elements
Like shown in the illustration -> every item takes up only the space it needs
Item wraps to the next row if there is no enough space
span, em, b are examples of inline elements
They take only width needed for it
They do not honor vertical padding
No width
No height
They just ignores them
Horizontal margin and padding are honored
Vertical margin and padding are ignored

14 / 20
NgNinja Academy | All Rights Reserved

Inline-block

This is just like inline element

BUT they will respect the width and height
Basically, they combine the properties of both block elements and inline elements
The element can appear on the same horizontal line as other elements
So, like the illustration shows if you set width you can t all the items together in a single row

None

These elements will not appear on the page at all

But you can still interact with it through DOM
NO space allocated on the page

Visibility Hidden

Space is allocated for it on the page

Tag is rendered on the DOM
The element is just no visible

div {
visibility: hidden;
}

Flex

15 / 20
NgNinja Academy | All Rights Reserved

Flex property gives ability to alter its item's width/height to best ll the available space
It is used to accommodate all kind of display devices and screen sizes
Fills available space
Or shrink to prevent over ow

16 / 20
NgNinja Academy | All Rights Reserved

Module 4 - Semantic HTML5

What is HTML5 Web Storage?

With HTML5, browsers can store data locally

It is more secure and faster than cookies
You are able to store large information -> more than cookies
They are name/value pairs
2 objects
window.localStorage - stores data with no expiration date
window.sessionStorage - stores data for one session (data is lost when the tab is closed)

localStorage:

Stores the data with no expiration date

Data is NOT deleted when browser is closed
Available the next day, week, or year
It's not possible to specify expiration
You can manage its expiration in your app

// Store
localStorage.setItem("lastname", "Smith");

// Retrieve
document.getElementById("result").innerHTML =
localStorage.getItem("lastname");

17 / 20
NgNinja Academy | All Rights Reserved

sessionStorage:

Stores the data for only one session

Data deleted when browser is closed

if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}

document.getElementById("result").innerHTML = "You have clicked the button

" +
sessionStorage.clickcount + " time(s) in this session.";

18 / 20
NgNinja Academy | All Rights Reserved

Module 5 - Flexbox intro and

media query

Let's talk about the sizes - px vs em vs rem

Pixels are ignorant, avoid using them

If you’re setting all of your font-sizes, element sizes and spacing in pixels, you’re not treating the
end user with respect.

Users will have to zoom in and out with ctrl plus +/- depending on the device they are on

REMs are a way of setting font-sizes based on the font-size of the root HTML element

Allows you to quickly scale an entire project by changing the root font-size

em is relative to the font size of its direct or nearest parent

When you have nested styles it becomes di cult to track ems

This is what REMs solve - the size always refers back to the root

Both pixels and REMs for media queries fail in various browsers when using browser zoom, and
EMs are the best option we have.

How to calculate PX from REM

19 / 20
NgNinja Academy | All Rights Reserved

EX: HTML font-size is set to 10px, paragraph font-size is set to 1.6rem

Then size in pixels is - 1.6rem * 10px = 16px

Module 6 - Quirks, tips, and

tricks

Normalizing CSS

Small CSS le that provides cross-browser consistency

Provides default styles for HTML elements
Make sure that all HTML elements renders the same way in ALL browsers - same padding, margin,
border, etc..
In some cases this approach applies IE or EDGE styles to the rest of the browsers

Reset CSS

This approach says that we don’t need the browsers’ default styles at all
We’ll de ne in the project according to our needs
CSS Reset resets all of the styles that come with the browser’s user agent
Grab sample CSS reset here
The problem with CSS Resets is that they are ugly and hard to debug
Solution - use Normalize CSS with little bit of CSS Reset
Unlike an ordinary CSS reset, target speci c HTML tags’ styles rather than making a big list of tags.
Make it less aggressive and a lot more readable

20 / 20