Html predestination - must everyone have

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

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-
End
Web Development
Server Side
Back-End
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

● 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
Course Levels

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.

1. Elements that are used to
create a website are called
HTML Tags.
2. Tags can contain content or
other HTML tags.
3. Define elements like text,
images, links
4. HTML Refresher (Tags & Attributes)
1. Provides additional information
about elements
2. Use name=value format

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

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 (Inspect element)

Changed Subscriber
count
7.Browser Tools (HTML Live Edit)

Changed Channel
Name color
7.Browser Tools (CSS Live Edit)

7.Browser Tools (JS Live Edit)

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 (Changes happening at Client)

7.Browser Tools (CSS Specific element)
• Styles Panel
• Box Model
• Changes happening only at client

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.

FF5F1F
Level 1 Revision
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.

Level 2
Color System & Background
FF5F1F
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.

FF5F1F
Level 2 Revision
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

Level 3
Text Properties
FF5F1F
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.

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

• 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
Text Properties

Level 4
Box Model
FF5F1F
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.

Level 5
Display and Position
FF5F1F
26. Display Property
27. Responsive Websites
28. Relative Units
29. Position Property
30. Semantic Tags

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

26. Display Property (Inline-Block)

1. Adapts layout for different screen sizes
2. Flexible layouts
3. Optimizes images and assets
4. Enhances user experience on mobile and
desktop
27. Responsive Website

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.

Non-Semantic Tags
● Generic: No specific meaning.
● For Styling: Used for layout.
● No SEO: Not SEO-friendly.
● Examples: <div>, <span>, <i>,
<b>.
Semantic Tags
● Meaningful: Describe content.
● SEO: Good for search engines.
● Accessibility: Useful for screen
readers.
● Examples: <header>, <footer>,
<article>, <section>, <nav>.
30. Semantic Tags

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.

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.

• 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 (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.

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
• 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 (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

Level 7
Animation, Transition & Transform
FF5F1F
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.

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.

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.

Level 7 Revision
39. Pseudo Classes
40. Transitions
41. CSS Transform
42. Animation

- 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%.
Practice Set Level 7 Revision

Html predestination - must everyone have

More Related Content

What's hot (20)

Similar to Html predestination - must everyone have (20)

Recently uploaded (20)

Html predestination - must everyone have