Video Link

Video Link
KG Coding
Some Other One shot Video Links:
• Complete HTML
• Complete CSS
• Complete JavaScript
• Complete React and Redux
• One shot University Exam Series
http://www.kgcoding.in/ Our Channels KG Coding Android App
KG Coding Knowledge GATE KG Placement Prep Sanchit Socket

What is IDE
1. IDE stands for Integrated
Development Environment.
2. Software suite that
consolidates basic tools
required for software
development.
3. Central hub for coding,
finding problems, and
testing.
4. Designed to improve
developer efficiency.
Need of IDE
1. Streamlines development.
2. Increases productivity.
3. Simplifies complex tasks.
4. Offers a unified
workspace.
5. IDE Features
1. Code Autocomplete
2. Syntax Highlighting
3. Version Control
4. Error Checking
Installation & Setup
1. Search VS Code
VsCode Extensions
FF5F1F
1. Live Server
2. Prettier
FrontEnd / BackEnd / FullStack
Client Side / Front- Server Side

End Back-End
Web Development
Full Stack
Role of Browser
1. Displays Web Page: Turns HTML code into what

you see on screen.
2. User Clicks: Helps you interact with the web page.
3. Updates Content: Allows changes to the page using
JavaScript.
4. Loads Files: Gets HTML, images, etc., from the
server.
HTML
(Hypertext Markup Language)
1. Structure: Sets up the

layout.
2. Content: Adds text,
images, links.
3. Tags: Uses elements like
<p>, <a>.
4. Hierarchy: Organizes
elements in a tree.
CSS
(Cascading Style Sheets)
1. Style: Sets the look and feel.

2. Colors & Fonts: Customizes
text and background.
3. Layout: Controls position and
size.
4. Selectors: Targets specific
HTML elements.
JS
(Java Script)
1. JavaScript has nothing to do

with Java
2. Actions: Enables interactivity.
3. Updates: Alters page without
reloading.
4. Events: Responds to user actions.
5. Data: Fetches and sends info to
server.
Importance of CSS
Premium Website Premium Brand Premium Customer
High Salary Developer

HTML required for CSS
HTML Revision Covered

Course Levels
● Level 1 CSS Basics
● Level 2 Color System and Background
● Level 3 Text Properties
● Level 4 Box Model CSS
● Level 5 Display & Position
● Level 6 Flexbox, Grid & Media Queries
● Level 7 Animation, Transition & Transform
● Project: Myntra Clone
KG Coding
• Complete HTML
• Complete CSS

Level 1
CSS Basics
1. Basic Syntax
2. Color Property
3. Including Styles
4. HTML Refresher
5. Comments
6. MDN Documentation
7. Browser Tools
8. Selectors
1. Basic Syntax
• Selector: The HTML element that you want to style.

• Property: The attribute you want to change (like font, color,
etc.).
• Value: The specific style you want to apply to the property (like
red, bold, etc.).
2. Color Property
• Definition: The CSS color property defines the text

color or foreground color in an HTML element.
• Enhancement: Use it to emphasize sections and
elevate webpage aesthetics.
3. Including Styles (Inline Styling)
• Direct Application: Apply styles directly to HTML elements using

the style attribute.
• One-off Changes: Ideal for single, unique style alterations.
• Can Be Cluttered: May lead to cluttered HTML if used extensively.
• Limited Reusability: Reduces the reusability of CSS rules in larger
projects.
3. Including Styles (Internal Styling)
• Embedded CSS: Styles are placed within <style> tags in the

HTML head section.
• Cleaner than Inline: More organized compared to inline styles.
• Reusable Styles: Allows for some reuse of styles across the
page.
3. Including Styles (External Styling)
• Separate CSS File: Stores styles in a separate .css file, linked to HTML.
• Reusable: Enables style reuse across multiple webpages.
• Link in HTML: Use the <link> tag within the <head> section to link the CSS.
• Relative or Absolute Path: The href attribute can contain a relative or
absolute path to the CSS file.
4. HTML Refresher (Tags & Attributes)
1. Elements that are used to 1. Provides additional information

create a website are called about elements
HTML Tags. 2. Use name=value format
2. Tags can contain content or
other HTML tags.
3. Define elements like text,
images, links
4. HTML Refresher (DOM)
1. Structure Understanding: Helps in
understanding the hierarchical structure of a
webpage, crucial for applying targeted CSS styles.
2. Dynamic Styling: Enables learning about
dynamic styling, allowing for real-time changes
and interactivity through CSS.
5 Comments
1. Used to add notes in HTML or
CSS code
2. Not displayed on the web page
3. Syntax: 
4. Helpful for code organization
5. Can be multi-line or single-line
6.MDN Documentation
1. For Official resource for CSS, visit

https://developer.mozilla.org/
2. Includes examples for real-world use
3. Updated with latest CSS-3 features
4. Trusted by developers worldwide
7.Browser Tools (Inspect element)
1. Allows real-time editing of HTML/CSS

2. Useful for debugging and testing
3. Shows element hierarchy and layout
4. Highlights selected elements on page
7.Browser Tools (HTML Live Edit)
Changed Subscriber
count
7.Browser Tools (CSS Live Edit)
Changed Channel
Name color
7.Browser Tools (JS Live Edit)
7.Browser Tools (Changes happening at Client)
1. Changes made are temporary

2. Affect only the current session
3. Not saved to the server
4. Reset upon page reload
5. Useful for testing, not permanent
fixes
Like: If you change the question in

your question paper that has no
effect on actual exam.
7.Browser Tools (CSS Specific element)
• Styles Panel
• Box Model
• Changes happening only at client
KG Coding
• Complete HTML
• Complete CSS

7.Browser Tools (Source tab)
7.Browser Tools (Network tab)
7.Browser Tools (Performance tab)
8. Selectors (Element selector)
• Targets Elements: Selects HTML elements based on their tag name.

• Syntax: Simply use the element's name
• Uniform Styling: Helps in applying consistent styles to all instances.
• Ease of Use: Straightforward and easy to implement for basic styling.
8. Selectors (Universal selector)
• Matches All: Targets and styles all elements on a webpage.

• Syntax: Utilized as an asterisk (*).
• Resets Styles: Commonly used to reset margins and paddings globally.
• Broad Styling: Useful for setting universal attributes like font or color.
• Usage Caution: Can cause style conflicts due to its wide-reaching effects.
8. Selectors (id & class property)
• ID Property: Assigns a unique identifier to a single HTML element.

• Class Property: Allows grouping of multiple HTML elements to style
them collectively.
• Reusable Classes: Class properties can be reused across different
elements for consistent styling.
• Specificity and Targeting: Both properties assist in targeting
specific elements or groups of elements for precise styling.
8. Selectors (Id selector)
• Unique Identifier: Targets a specific element with a unique ID

attribute.
• Syntax: Uses the hash (#) symbol
• Single Use: Each ID should be used once per page for uniqueness.
• Specific Targeting: Ideal for styling individual, distinct elements.
8. Selectors (Class selector)
• Group Styling: Allows styling of multiple elements grouped under a

class.
• Syntax: Utilizes the dot (.) symbol.
• Reusable: Can be used on multiple elements for consistent styling.
• Versatility: Ideal for applying styles to a category of elements.
8. Selectors (Group selector)
• Multiple Elements: Styles multiple elements simultaneously.

• Syntax: Separates selectors with commas.
• Efficiency: Reduces code redundancy and saves time.
8. Selectors (Descendant selector)
• Nested Targeting: Styles elements nested within a specified element.

• Syntax: Separate selectors with spaces.
• Hierarchy-Based: Allows styling based on the hierarchical structure of HTML.
• Specific Styling: Facilitates more targeted and specific styling of elements.
Level 1 Revision
FF5F1F
CSS Basics
1. Basic Syntax
2. Color Property
3. Including Styles
4. HTML Refresher
5. Comments
6. MDN Documentation
7. Browser Tools
8. Selectors
Practice Set Level 1
CSS Basics
• Create a heading and set the text color red.

• Create a div with id #heading, include CSS
using all 3 ways line, style tag and external,
and observe priority.
• Add comments to your CSS class
• Create a div, paragraph and heading and use id
Selector, element selector and class selector
for them.
• Create two divs with id first and second and
define color for both using group selector.
KG Coding
• Complete HTML
• Complete CSS

FF5F1F
Level 2
Color System & Background
9. Background-Color Property
10. Color System
11. Absolute Units
12. Height & Width Property
13. Background-Image Property
14. Visibility Property
9. Background Color
• Definition: Sets the background color of an element.

• Syntax: Utilized as background-color: color;
• Visual Appeal: Enhances the visual appeal and contrast
of webpage elements.
10. Color System (Color Theory)
• RGB Model: Creates colors by mixing Red (R),
Green (G), and Blue (B) light sources.
• Additive Model: More light means increased
brightness.
• Primary Colors: R, G, and B are the
foundational colors.
• White & Black: All combined yield white;
absence equals black.
• Color Depth: Allows for millions of color
variations.
10. Color System (color picker)
10. Color System (RGB Color Model)
• Three Channels: Consists of Red (R), Green (G), and Blue (B)
channels to create a variety of colors.
• Syntax: Utilized as rgb(r, g, b) where r, g, and b are values
between 0 and 255.
10. Color System (RGB Color Model)
10. Color System (HEX Color Model)
• Hexadecimal Codes: Represents colors using
hexadecimal values, consisting of 6 digits
combined from numbers and letters (A-F).
• Syntax: Written as #RRGGBB
• Easy Color Matching: Facilitates easy color
matching with graphic design tools and
branding colors.
• Web Standards: Widely supported and a
common standard for defining colors in web
design
10. Color System (HEX Color Model)
10. Color System (Alpha Channel)
• RGBA: RGB's extension, includes alpha for opacity control (0-1 range).
• Transparency Control: Facilitates the adjustment of transparency levels in
colors.
• Visual Effects: Enables the creation of visual effects like shadows and overlays.
• Layering: Assists in layering elements with varying degrees of visibility.
10. Color System (Alpha Channel)
11. Absolute Units
• Definition: Pixels (px) are fixed-size units,
representing a dot on a computer screen.
• Precision: Allows for precise control over
element dimensions.
• Graphics & Web Design: Commonly used in
graphics and web design for setting font sizes,
margins, and more.
• Cross-Browser Consistency: Provides
consistency across different browsers.
• High-DPI Displays: Can vary in appearance on
high-DPI (dots per inch) displays.
• Dimensions Control: Used to specify the height and width of elements.

• Unit Variability: Can use units like pixels (px)
• Box Model Component: Influences padding, border, and margin.
• Min and Max Values: Can utilize min-height, max-height, min-width,
and max-width to set restrictions on dimensions.
13. Background image Property
• Usage: Adds an image as a background to elements.
• Syntax: Defined using background-image:
url('path/to/image’);.
• Repetition: Control image repetition using
background-repeat.
• Positioning: Adjust image position using background-
position.
• Size Control: Manipulate image size using
background-size.
• Background-Attachment: Sets whether the
background image scrolls with the element or
remains fixed.
• Shorthand (color, image, repeat, attachment,
position)
• Usage: Controls the visibility of elements without changing the layout.

• Values: Can take visible, hidden, or collapse as values.
• Space Occupancy: Even when hidden, the element occupies space.
• Interactivity: Hidden elements are not accessible to user interactions.
Level 2 Revision
FF5F1F
9. Background-Color Property
10. Color System
11. Absolute Units
13. Background-Image Property
• Create a div bar with text and

background color with opacity
• Change the color of the main
content
• Add background image to one div
• Use background shorthand property
KG Coding
• Complete HTML
• Complete CSS

FF5F1F
Level 3
Text Properties
15. Text-Align Property

16. Text-Decoration Property
17. Text-Transform Property
18. Line-Height Property
19. Font Properties
20. Font Family
21. Icon using fonts
15.Text-Align Property
• Usage: Controls the horizontal alignment of text within an

element.
• Values: Can take values like left, right, center, and justify.
• Visual Appeal: Enhances readability and visual appeal by
organizing text neatly.
• Usage: Modifies the appearance of inline text.

• Values: Options include none, underline, overline, and line-through.
• Hyperlinks: Commonly used to remove underlines from hyperlinks for
aesthetic purposes.
16. Text-Decoration Property (style)
16. Text-Decoration Property (color)
• Usage: Controls the capitalization of text.

• Common Values: Can be uppercase, lowercase, or capitalize.
• None Value: none value disables text transformations.
• Typography: Useful for setting text style and improving typography in web design.
18. Line Height
• Usage: Adjusts the amount of space above and below inline elements.
• Readability: Enhances text readability by preventing overcrowding.
• Vertical Spacing: Useful for controlling vertical spacing between lines
of text.
19. Font Property (font-size)
• Usage: Sets the size of the font in web content.

• Responsiveness: Helps in creating responsive designs adaptable to various screen
sizes.
• Readability: Crucial for ensuring the readability of text on websites.
19. Font Property (font-weight)
• Usage: Defines the thickness of characters in a font.

• Values: Can take values like normal, bold, bolder, or numeric values (100 to 900).
• Text Emphasis: Utilized to emphasize text or create contrast between text elements.
19. Font Property (font-style)
• Usage: Controls the style of the font, mainly affecting its inclination.
• Values: Common values are normal, italic, and oblique.
• Text Formatting: Useful for highlighting or distinguishing certain text
segments.
20. Font Family
• Usage: Defines which font should be used for
text within an element.
• Specific Fonts: Common choices include Arial,
Segoe UI, Times New Roman, and others.
• Fallback Mechanism: Incorporate a fallback
font family in case the primary font is
unavailable; helps in maintaining the site
aesthetics.
• Web Safe Fonts: Employ web-safe fonts to
ensure consistency across different browsers
and operating systems.
• Generic Family: Always end the font family list
with a generic family like serif or sans-serif as a
last resort option.
20. Font Family
21. Icons using Fonts
Using https://fontawesome.com
FF5F1F
Level 3 Revision
Text Properties
15. Text-Align Property

18. Line-Height Property
19. Font Properties
20. Font Family
21. Icon using fonts
Text Properties
• Create an Heading at the centre and

make capitalized
• Use Font family for the whole page
to TimeNewRoman
• Create one div inside another div.
Set id and text outer to outer div,
set id and text inner to inner div.
Set outer div text size to 25px.
Set inner to 10px.
• Use icons from fontawesome.com and
use icons of LinkedIn and GitHub
KG Coding
• Complete HTML
• Complete CSS

FF5F1F
Level 4
Box Model
22. What is Box Model

23. Padding Property
24. Margin Property
25. Border Property
!मठाई भ'डार पे चलो
• Core Concept: Central concept in CSS that
outlines the design and layout of elements on
the web page.
• Components: Consists of four main
components - margin, border, padding, and
content.
• Margin: The space outside the border,
separating the element from others.
• Border: The outline that encapsulates the
padding and content.
• Padding: The space between the border and
the actual content, providing a buffer.
• Content: The innermost layer where text,
images, or other media are housed.
• Usage: Defines the space between the content of an element and its
border.
• Individual Sides: Allows setting padding for individual sides using
padding-top, padding-right, padding-bottom, and padding-left.
• Shorthand: Can use shorthand property padding to set all sides at
once, e.g., padding: 10px 20px 10px 20px.
24. Margin Property
• Functionality: Sets the space around elements, separating them from others.
• Individual Sides: Customizable for top, right, bottom, and left sides.
• Shorthand: Allows quick setup, e.g., margin: 10px 20px. (clockwise)
• Auto Value: Can be used for central alignment with auto value.
24. Border Property
• Usage: Creates an outline around HTML elements.

• Components: Defined by width, style, and color attributes.
• Styles: Includes options like solid, dashed, and dotted.
• Shorthand: Can set attributes at once, e.g., border: 2px solid black.
24. Border Property (border radius)
• Usage: Used to create rounded corners for elements.

• Individual Corners: Allows setting different radii for each corner.
• Shorthand: e.g., border-radius: 10px 20px.
24. Border Property (box sizing)
FF5F1F
Level 4 Revision
Box Model

24. Margin Property
25. Border Property
Box Model
- Create a div with height and width 200px and

observe different values in the box model by
inspecting.
- Create a button and give 10px padding to top
and bottom and 15px on the sides.
- Add 100px margin to the button on all sides.
- Add dotter border with color red and so much
that the button becomes a circle.
- Create two boxes with different box-sizing
values and observe changes in box model.
KG Coding
• Complete HTML
• Complete CSS

FF5F1F
Level 5
Display and Position
26. Display Property

27. Responsive Websites
28. Relative Units
29. Position Property
30. Semantic Tags
26. Display Property (Block / Inline Elements)
Block Elements Inline Elements

● New Line: Start on a new line. ● Flow: Stay in line with text.
● Full Width: Take up all horizontal space. ● Width: Just as wide as the content.
● Styling: Can have margins and padding. ● No Break: No new line between elements.
● Size: Width and height can be set. ● Limited Styling: Can't set size easily.
● Examples: <div>, <p>, <h1>, <ul>, <li>. ● Examples: <span>, <a>, <strong>, <em>.
26. Display Property (Block)
26. Display Property (Inline)
26. Display Property (Inline-Block)
26. Display Property (None)
27. Responsive Website
FF5F1F
27. Responsive Website
1. Adapts layout for different screen sizes

2. Flexible layouts
3. Optimizes images and assets
4. Enhances user experience on mobile and
desktop
28. Relative Units
28. Relative Units (Percentage)
• Relative Sizing: Facilitates dynamic sizing relative to parents.

• Adaptability: Ensures responsiveness across various screens.
• Dimensions: Quickly set width and height as a percentage.
28. Relative Units (EM)
• Relative Unit: Sized relative to the parent element's font size.

• Scalability: Facilitates easy scaling of elements for responsive design.
• Font Sizing: Commonly used for setting font sizes adaptively.
28. Relative Units (REM)
• Relative Sizing: Facilitates dynamic sizing relative to root element.

• Adaptability: Ensures responsiveness across various screens.
• Dimensions: Quickly set width and height as a percentage.
28. Relative Units (VW/VH)
• Viewport Relative Units: Units based on viewport's width (vw) or height (vh) for
responsive design.
• Responsive Layouts: Essential for creating adaptive layouts; e.g., height: 100vh for
full-screen sections.
• Element Sizing: Useful for defining heights and widths that scale with the
viewport.
• Static (default) : Elements follow the normal document flow. (top, right,
bottom, left, z-index would not work)
• Relative: Element's position adjusted from its normal position.
• Absolute: Positions element relative to the nearest positioned ancestor.
• Fixed: Element positioned relative to the viewport, does not move on scroll.
29. Position Property (z index)
• Stacking Order: Determines the stacking order of elements along
the Z-axis.
• Position Context: Only applies to elements with position set to
relative, absolute, fixed, or sticky.
• Integer Values: Accepts integer values, including negative numbers.
• Higher Values: An element with a higher z-index value appears
above others.
30. Semantic Tags
30. Semantic Tags
Semantic Tags Non-Semantic Tags

● Meaningful: Describe content. ● Generic: No specific meaning.
● SEO: Good for search engines. ● For Styling: Used for layout.
● Accessibility: Useful for screen ● No SEO: Not SEO-friendly.
readers. ● Examples: <div>, <span>, <i>,
● Examples: <header>, <footer>, <b>.
<article>, <section>, <nav>.
FF5F1F
Level 5 Revision
26. Display Property

27. Responsive Websites
28. Relative Units
30. Semantic Tags
- Create a webpage with header, footer, and a
content area.
- Header
- Create a nav bar with links.
- Main
- Create a div with width and height,
Background green and border radius 50%
- Create Three divs with container height
and width 100px. Display inline block.
- Set the correct position property for the
single div element to ensure it remains at the
right side of the page and does not shift when
scrolling.
- Use z-index to place the div on top of
another div.
- Footer
- Add text in footer.
KG Coding
• Complete HTML
• Complete CSS

Level 6
Flex Box, Grid and Media Queries
31. Float Property

32. What is Flexbox?
33. Flex Model
34. Flexbox Direction
35. Properties: Flexbox container
36. Properties: Flex Items
37. Grid Layout
38. Media Queries
31. Float Property
• Element Alignment: Allows elements to be aligned to the left or right
within their containing element.
• Values: Can take values like "left", "right", or "none" to determine the
floating direction.
• Old Layout Technique: Less commonly used with the advent of Flexbox.
Flexbox is a one-dimensional layout method for arranging items in rows or columns.
Items flex (expand) to fill additional space or shrink to fit into smaller spaces.
33. Flex Model
display: flex
• Property Name: flex-direction is the property used to define the direction in a flex container.
• Row Layout: row value aligns the flex items horizontally, in a left-to-right fashion.
• Column Layout: column value stacks the flex items vertically, from top to bottom.
• Reverse Direction: Adding -reverse to row or column (as in row-reverse or column-reverse) reverses
the order of the items.
35. Properties: Flexbox container (Justify Content)
• Alignment: Aligns flex items along the main axis.
• flex-start: Items align to the start of the flex
container.
• flex-end: Items align to the end of the flex container.
• Center: Items are cantered within the flex container.
• space-between/space-around/space-evenly:
Distributes space between items evenly.
35. Properties: Flexbox container (Justify Content)
35. Properties: Flexbox container (Flex Wrap)
35. Properties: Flexbox container (Flex Wrap)
35. Properties: Flexbox container (Align Items)
This property is used to align
the flex container's items
along the cross-axis, which is
perpendicular to the main
axis.
35. Properties: Flexbox container (Align Content)
It is utilized to adjust the
spacing between flex lines
within a flex container,
particularly when there is
extra space along the cross-
axis.
36. Properties: Flex Items (Align Self)
Allows individual flex items to override the
container's align-items property, aligning
them differently along the cross-axis.
36. Properties: Flex Items (Flex Shrink)
The "flex-shrink" property in CSS

determines how much a flex item
will shrink relative to other items in
the flex container if there is
insufficient space.
KG Coding
• Complete HTML
• Complete CSS

36. Properties: Flex Items (Flex Grow)
The "flex-grow" property in CSS specifies how much a flex item

will grow relative to other items in the flex container when
additional space is available.
36. Properties: Flex Items (Order)
The "order" property in CSS allows you to define the
sequence in which flex items appear within the flex
container, overriding their original order in the HTML.
37. Grid
37. Grid
• 2D layout system for rows & columns.

• Activate with display: grid;.
• Children become grid items.
• Define structure with grid-template properties.
• Individual units called grid cells.
38. Media Queries
• Tailor styles for specific device
characteristics.
• Use to create responsive web designs.
• Apply styles based on conditions like
screen size.
• Syntax: @media (condition) { CSS rules
}.
• Can combine multiple conditions using
and, or.
38. Media Queries (width)
38. Media Queries (min-width)
38. Media Queries (max-width)
38. Media Queries (combination)
FF5F1F
Level 6 Revision
31. Float Property

33. Flex Model
35. Properties: Flexbox container
36. Properties: Flex Items
37. Grid Layout
38. Media Queries
- Create the same nav bar created in the last

Practice Set but do the spacing using
flexbox.
- Use flexbox to centre an image inside a
div.
- Create a div with three boxes where two
boxes have fixed size, but the third box
grows and shrinks with container size.
- Create a div of 50px by 50px with color
green. It should respond to following
conditions:
- Keep color green under 300px of view
port size
- Change color to red from 300px to 400px
- Change color to blue after 400px
KG Coding
• Complete HTML
• Complete CSS

FF5F1F
Level 7
Animation, Transition & Transform
39. Pseudo Classes

40. Transitions
41. CSS Transform
42. Animation
39. Pseudo Classes
• Used to define special states of HTML elements.
• Syntax: selector:pseudo-class { styles }.
• Common examples: :hover, :active, :first-child.
• Target elements based on their position or user
action.
40. Transitions
CSS transition is a property that enables smooth animation between

changes in CSS property values
• transition-property: Defines which CSS properties will transition.
• transition-duration: Sets how long the transition lasts.
• transition-timing-function: Controls the speed curve of the
transition.
• transition-delay: Specifies a delay before the transition starts.
40. Transitions
41. CSS Transform
• Allows modification of an element's shape
and position.
• Can perform operations like rotate, scale,
and translate.
• Does not affect the layout of surrounding
elements.
• Used to create visual effects like 3D space
transformations.
• Implemented with functions like rotate(),
scale(), and translate().
41. CSS Transform (Rotate)
• Rotates an element around a
fixed point.
• Defined using the rotate()
function within the
transform property.
• Default rotation point is the
element's center.
41. CSS Transform (Scale)
41. CSS Transform (Translate)
41. CSS Transform (Skew)
42. Animation
42. Animation Properties
• animation-name: Specifies the name of the
@keyframes defined animation.
• animation-duration: Defines the total time the
animation takes to complete one cycle.
• animation-timing-function: Controls the pacing of the
animation (e.g., linear, ease-in).
• animation-delay: Sets a delay before the animation
starts, allowing for a pause before initiation.
• animation-iteration-count: Indicates the number of
times the animation should repeat.
• animation-direction: Specifies the direction of the
animation, allowing for reverse or alternate cycles.
42. Animation
42. Animation
Level 7 Revision
39. Pseudo Classes

40. Transitions
41. CSS Transform
42. Animation
Practice Set Level 7 Revision
- Create a webpage with a progress

bar that showcases a smooth loading
animation. The progress bar should
fill up from 0 to 100% with a smooth
transition effect and a slight
bounce when it reaches 100%.
KG Coding
• Complete HTML
• Complete CSS

Project
Myntra Clone
KG Coding
• Complete HTML
• Complete CSS

Video Link

Uploaded by

Copyright:

Available Formats

Video Link

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Video Link

Uploaded by

Copyright:

Available Formats

Video Link

http://www.kgcoding.in/ Our Channels KG Coding Android App

KG Coding Knowledge GATE KG Placement Prep Sanchit Socket

Client Side / Front- Server Side

1. Displays Web Page: Turns HTML code into what

1. Structure: Sets up the

1. Style: Sets the look and feel.

1. JavaScript has nothing to do

Premium Website Premium Brand Premium Customer

High Salary Developer

HTML Revision Covered

http://www.kgcoding.in/ Our Channels KG Coding Android App

KG Coding Knowledge GATE KG Placement Prep Sanchit Socket

• Selector: The HTML element that you want to style.

• Definition: The CSS color property defines the text

• Direct Application: Apply styles directly to HTML elements using

• Embedded CSS: Styles are placed within <style> tags in the

1. Elements that are used to 1. Provides additional information

1. For Official resource for CSS, visit

1. Allows real-time editing of HTML/CSS

1. Changes made are temporary

Like: If you change the question in

http://www.kgcoding.in/ Our Channels KG Coding Android App

KG Coding Knowledge GATE KG Placement Prep Sanchit Socket

• Targets Elements: Selects HTML elements based on their tag name.

• Matches All: Targets and styles all elements on a webpage.

• ID Property: Assigns a unique identifier to a single HTML element.

• Unique Identifier: Targets a specific element with a unique ID

• Group Styling: Allows styling of multiple elements grouped under a

• Multiple Elements: Styles multiple elements simultaneously.

• Nested Targeting: Styles elements nested within a specified element.

• Create a heading and set the text color red.

http://www.kgcoding.in/ Our Channels KG Coding Android App

KG Coding Knowledge GATE KG Placement Prep Sanchit Socket

• Definition: Sets the background color of an element.

• Dimensions Control: Used to specify the height and width of elements.

• Usage: Controls the visibility of elements without changing the layout.

Color System & Background

• Create a div bar with text and

http://www.kgcoding.in/ Our Channels KG Coding Android App

KG Coding Knowledge GATE KG Placement Prep Sanchit Socket

15. Text-Align Property

• Usage: Controls the horizontal alignment of text within an

• Usage: Modifies the appearance of inline text.

• Usage: Controls the capitalization of text.

• Usage: Sets the size of the font in web content.

• Usage: Defines the thickness of characters in a font.

15. Text-Align Property

• Create an Heading at the centre and

http://www.kgcoding.in/ Our Channels KG Coding Android App

KG Coding Knowledge GATE KG Placement Prep Sanchit Socket

22. What is Box Model

• Usage: Creates an outline around HTML elements.

• Usage: Used to create rounded corners for elements.

22. What is Box Model

- Create a div with height and width 200px and

http://www.kgcoding.in/ Our Channels KG Coding Android App

KG Coding Knowledge GATE KG Placement Prep Sanchit Socket

26. Display Property