CHEAT SHEET
HTML5 WEB DEVELOPMENT
Created by @Manz ( https://twitter.com/Manz )
S HTML Syntax
Tag structure
C Comment Syntax
https://lenguajehtml.com/
Dev annotations
S Social metadata
HTML TAG/ATTRIBUTE SYNTAX
HTML COMMENT SYNTAX
FACEBOOK OPEN GRAPH
<tag attribute="value"> content </tag>
<!-- text without effects on webpage -->
For social networks
H Head tags Header & document metadata
<meta> metadata tag for open graph
property metadata type open graph
content metadata value open graph
MAIN TAGS
RELATIONS
REQUIRED METADATA PROPERTIES
<!DOCTYPE html> HTML5 document
<html> document content root tag
<head> metadata header related docs
<body> page content visible content
<link> document relation
href link to related document
hreflang code doc language en, es...
type mime hint type for browser
title set title to stylesheet set
sizes hint size for favicon 64x64, 96x96
rel relation type with other document
D Document tags
HTML main structure
G Global Attributes
for all elements
DOM / STYLE ATTRIBUTES
id element identifier unique per page
class element class multiple per page
slot element slot reference to <slot>
style inline CSS styles css properties
GLOBAL ATTRIBUTES
accesskey shortcut key to focus
contenteditable allow edit element
dir ltr rtl auto text direction
draggable auto enable drag and drop
hidden hide element not relevant
is custom-elem custom built-in elem
lang code set content lang en, es, fr...
nonce hash whitelist script/style [CSP]
spellcheck disable grammar check
tabindex num set element order
title set tooltip text mouse hover
translate yes no disable translation
data-* custom metadata on element
HINT TO BROWSER
enterkeyhint enter done go search
next previous send virtual keyb label
inputmode none text tel url email
numeric decimal search
MICRODATA ATTRIBUTES
itemid set global urn unique identifier
itemscope new metadata item
itemtype set microdata genre url
itemref id list set reference to "id"
itemprop token set property & value
S Inline Styling
CSS inline
INLINE STYLES
<style> embed css style in a document
title set title to stylesheet set
type mime hint type for browser
ONLY FOR <LINK>, PICTURE <SOURCE> & <STYLE>
media apply to specific devices
all all devices computers, mobiles...
print printables devices
screen all devices - (print + speech)
speech devices that read a page
CHEATSHEET LEGEND
html tag html tag w/o close tag obsolete
attribute attribute w/o value
value default value values set
value for content value part
BASIC RELATION
alternate link to alternate version
author link to author URL
help link to help URL
icon link to favicon URL (tab icon)
license fetch module map
pingback link to pingback server
search link to search page url
stylesheet imports a css style sheet
URL STRUCTURE RELATION
canonical link to preferred URL
prev prev part URL of series doc
next next part URL of series doc
RESOURCE HINTS
dns-prefetch resolve dns domain
preconnect pre connect to domain
prefetch fetch/cache link for future
preload fetch/cache link for now
modulepreload fetch module map
prerender background render page
as script font image audio video fetch
document embed object style track
worker
DOCUMENT METADATA
<meta> document metadata
charset enc encoding utf-8, iso-8859-1...
name name of metadata
application-name short webapp name
author name of the page's author
description seo page description
generator software used to build web
keywords comma-separated tags
referrer default page referrer policy
theme-color primary theme css color
viewport hint to initial size viewport
http-equiv pragma directive (legacy)
content-type legacy alt. to charset
default-style default stylesheet set
refresh html redirect 10; URL=file.html
x-ua-compatible better compat IE=edge
content-security-policy enforce csp
content metadata value
<title> seo document title
<base> set a document base url
href link to base url to use
target context place to open link
og:title title of your object
og:type type of your object
music video article book
profile website
og:image image url for preview
og:url canonical & absolute url
OPTIONAL METADATA PROPERTIES
og:audio complementary audio url
og:description 1-2 sentence descr.
og:determiner word auto, the, a, an, ...
og:locale language default: en_US
og:locale:alternative others lang array
og:site_name general site name
og:video complementary video url
TWITTER CARDS
<meta> metadata tag for twitter cards
name metadata type twitter cards
content metadata value twitter cards
BASIC METADATA PROPERTIES
twitter:title title of your object
twitter:card type of your object
summary summary_large_image
app player
OPTIONAL METADATA PROPERTIES
twitter:site account site name
twitter:creator account name @manz
twitter:description description
twitter:image absolute image url
APP METADATA PROPERTIES
twitter:app:country country code
twitter:app:name: **** name of app
twitter:app:id: **** identifier of app
twitter:app:url: **** url of app store
iphone ipad googleplay id for ****
PLAYER METADATA PROPERTIES
twitter:player https url to iframe player
GOOGLE SEO RECOMMENDATIONS
<title> first - second | brand 50-60 chars
<meta> metadata google-supported
name metadata name
description text snippet 50-160 chars
robots googlebot set bots behaviour
all noindex nofollow none
noarchive nosnippet noodp
notranslate noimageindex
unavailable_after: date
google disable google features
notranslate nositelinkssearchbox
rating adult exclude secure search
viewport optimized-mobile page
content="width=device-width, initial-scale=1.0"
CHEAT SHEET
HTML5 WEB DEVELOPMENT
Created by @Manz ( https://twitter.com/Manz )
https://lenguajehtml.com/
S Select data tags Interactive combo
I Interactive tags
MAIN ELEMENTS
SELECT ELEMENTS
OTHER FORM ELEMENTS
<form> form elements collection
name form name document.forms api
method GET POST dialog send method
action url to backend form submission
accept-charset enc force encoding utf-8
autocomplete on off autofill for all form
novalidate bypass form validation
target context place to put response
enctype application/x-www-form-urlencoded
<select> form elements collection
name form name document.forms api
form associate input with a form
size size of element in characters
autocomplete on off autofill for input
autofocus focus input when loaded
disabled avoid press button
required required field default: optional
multiple allow select multiple values
<datalist> predefined and open data list
<output> result of calculation
name element name forms.elements api
form associate input with a form
for associate result to other element
<progress> show a bar progress
value current value of bar progress
max max value of bar progress
<meter> show a known range meter
value current value of meter
low limit of low range
high limit of high range
min lower bound of range
max upper bound of range
optimum optimum value in gauge
F Forms
Forms related tags
multipart/form-data text/plain encoding type
<label> associate element with caption
for reference to id of related element
GROUP FORMS
<fieldset> group of form elements
name element name forms.elements api
form associate fieldset with a form
disabled avoid select this group items
<legend> caption text for fieldset
I Input elements
User input types
USER INPUT DATA
<input> <textarea> specific & large text
name element name form.elements api
autocomplete on off autofill for input
autofocus focus input when loaded
dirname submit element directionality
form associate input with a form
placeholder user visual hint
ONLY <INPUT> ELEMENT
<input> specific text input short text
type text hidden search tel url email
number range color file password
datetime-local date time week month
checkbox radio submit image reset button
value current value of input element
size size of element in characters
list associate with id of <datalist>
accept hint for expected file in upload
checked enable in radio or checkbox
multiple allow multiple values
ONLY IMAGE <INPUT> ELEMENT
src url or name of image button
alt alternative text to image
width height image width/height size
ONLY <TEXTAREA> ELEMENT
<textarea> multiline text input large text
rows cols number of lines and columns
wrap wrap text
ALTER FORM SUBMISSION
ONLY SUBMIT <INPUT> & <BUTTON>
formaction formtarget formnovalidate
formenctype formmethod
attributes to alter main form submission
R Ruby tags Ruby Markup tags
RUBY ELEMENTS
<ruby> ruby annotation E.Asian-like chars
<rp> ruby fallback parenthesis wrapper
<rt> ruby text pronunciation, translation...
SELECT CHILDREN ELEMENTS
<option> item from <select> or <datalist>
label user-visible text instead content
value item value for form submit
selected options selected by default
disabled avoid select this item option
<optgroup> group of <option>
label user-visible group text
disabled avoid select this items
B Generic Button
HTML Button
HTML GENERIC <BUTTON>
<button> generic button container
name element name form.elements api
type submit reset button button type
value button value for form submission
form associate input with a form
autofocus focus button when loaded
disabled avoid press button
Other elements
OTHER INTERACTIVE ELEMENTS
<details> disclosure widget html accordion
open keep accordion opened
<summary> caption or title for <details>
<dialog> window box container dialog box
open keep dialog opened
V Validations HTML validations
USER INPUT DATA
TEXT VALIDATIONS
<INPUT> & <TEXTAREA>
minlength maxlength min/max length
GENERAL VALIDATIONS
<INPUT> & <TEXTAREA>
required required field default: optional
disabled avoid edit field not send
readonly avoid edit field send
NUMBER VALIDATIONS
D Deprecated tags Obsolete elements
DEPRECATED TAG
RECOMMENDED TAG
<applet> java widgets <embed> <object>
<acronym> abbreviation
<abbr>
<basefont> main font use CSS instead
<big> bigger text use CSS font-size
<bgsound> background sound
<audio>
<blink> flicker text use CSS animation
<center> center text use CSS text-align
<dir> directory list use lists instead <ul>
<font> set font features use CSS instead
<frame> <frameset> frames
<iframe>
<marquee> move text use CSS animation
<multicol> col layout use CSS columns
<noframes> frames fallback no supported
<isindex> search in page
<input>
<keygen> keypair gen use webcrypto API
<listing> preformatted text <pre> <code>
<menuitem> context menu no supported
<nextid> auto id generated no supported
<nobr> no break use CSS instead
<noembed> no embed fallback <object>
<plaintext> plain text fragment
<pre>
<rb> <rtc> ruby base & container <ruby>
<spacer> whitespace use CSS instead
<strike> strikethrough text
<s> <del>
<tt> teletype text use CSS instead
<xmp> code block use &lt; <pre> <code>
ONLY <INPUT>
min max min/max value number
step granularity step between values
POWERFUL VALIDATIONS
ONLY <INPUT>
pattern REGEXP pattern for test validation
A ARIA Attributes
Accesible elements
ACCESIBLE RICH INTERNET APPLICATIONS
role specify accessible role for element
complementary list listitem main navigation
region tab alert application article banner
button cell checkbox contentinfo dialog
document feed figure form grid gridcell
heading img listbox row rowgroup search
switch table tabpanel textbox timer
aria-checked true false mixed
aria-selected set current state
LABELS
aria-label specify a string as label
aria-labelledby specify id as label elem
RELATIONSHIPS
aria-owns set id element as child
aria-activedescendant set id as active
aria-describedby set id as description
aria-posinset specify position in set
aria-setsize specify size of set
CHEAT SHEET
HTML5 WEB DEVELOPMENT
Created by @Manz ( https://twitter.com/Manz )
https://lenguajehtml.com/
G Groups tags Block elements
T Text tags
GENERAL GROUP TAGS
TEXT SEMANTIC TAGS
<div> generic division or layer block
<p> text paragraph
<hr> thematic break
<pre> preformatted text
<main> dominant contents
<blockquote> section with quote
cite link to url with quotation source
<em> emphatized text replace for <i>
<strong> important text replace for <b>
<mark> highlight text replace for <u>
<i> alternate voice/mood legacy tag
<b> span w/o extra purposes legacy tag
<u> non-textual data span legacy tag
<sub> <sup> subscript and superscript
<small> side comments small print
<var> math or programming variable
<samp> sample from computing system
<kbd> user input (keyboard shortcut)
<dfn> defining instance of a term
title full term optional
<abbr> abbreviation or acronym
title expansion of abbreviation optional
<cite> title of a work book, film, song...
<q> quoted group from another source
cite link to source url optional
<br> line break visual enter
<wbr> line break opportunity long words
<s> no longer accurate/relevant strike text
<data> associate machine-data to text
value machine-readable value
<time> associate machine-date to date
datetime machine-readable date-time
<code> fragment of computer code
LISTS & TERMS
<ul> <ol> unorderer & orderer list
start first value of list
reversed backwards list
type 1 a A i I kind of marker
<li> item from <ul> or <ol> list
value ordinal value of item
<dl> description list container
<dt> <dd> description term name & value
FIGURE & CAPTIONS
<figure> figure or concept
<figcaption> caption or legend for figure
SEMANTIC TAGS
<article> entity content post, comment...
<section> thematic group of content
<nav> section with navigation links
<aside> secondary content sidebar, menu
<h1> <h2> ... <h6> heading section
<header> introductory header group
<footer> section footer group
<address> contact information group
T Tables tags Tabular data
TABLE ELEMENTS
<table> table container
<caption> title of table optional
<thead> table header includes headers
<tbody> table body includes body data
<tfoot> table footer includes summary
COLUMNS
<col> <colgroup> col & group of columns
span number of columns to span
ITEMS
<tr> table row horizontal container
<th> <td> table header & table cell data
colspan number of columns to span
rowspan number of rows to span
headers one or more id of <th> elements
ONLY FOR <TH> ELEMENT
scope auto row col rowgroup colgroup
abbr short abbreviated description
Inline elements
H Hyperlinks Link to another resource
HYPERLINKS & AREA MAP
<a> <area> hyperlink / image map area
href link to url or filename
hreflang code doc language en, es...
download download name empty valid
rel alternate author bookmark external help
license prev next search tag opener nofollow
noopener noreferrer
target context place to open link
ping url list space-separated to ping
referrerpolicy mode referer behaviour
ATTRIBUTES ONLY FOR <AREA> ELEMENT
shape
coords coords list for shape
alt replacement text when no images
rect circle poly
E Edit tags
Edit elements
Picture content
JPG PNG SVG WEBP JPGXR JPG2000 GIF APNG
<img> image simple or legacy fallback
src link to url image source required
alt alternative text if no image required
width height horizontal & vertical size
loading set lazy loading strategy
auto browser decides
lazy candidate for lazy loading
eager
load right away
usemap name of image map to use
ismap image is part of server-side map
decoding sync async auto hint to decode
<map> image map used w/ <a> & <area>
name imagemap used in usemap
NEXT-GEN IMAGES
<picture> multiple image container
<source> new alternative source image
src link to url image source simple mode
type MIME type optional
media media query of resource media
PICTURE <SOURCE> & <IMG> ATTRIBUTES
srcset image list candidates comma-sep
width a1.jpg 300w, a2.jpg 600w, ...
density b1.jpg 1x, b2.jpg 2x, ...
sizes final rendered width list 640w
M Multimedia tags
VIDEO OR AUDIO CONTAINER ELEMENTS
MP4 WEBM HEVC AV1 OGV
← VIDEO
MP3 AAC OGG OPUS FLAC WAV
← AUDIO
<video> <audio> media container
src link to url video audio source
preload hints how much buffering needs
auto browser decides
fetch metadata only
save bandwidth and no download
autoplay autoplay only if user interact
loop restart when finished
muted silence media by default
controls show play, pause... controls
metada
none
ONLY FOR <VIDEO> ELEMENT
poster cover image prior to playback
width height horizontal & vertical size
playsinline browser try play video inline
TEXT SEMANTIC TAGS
VIDEO OR AUDIO CHILDREN ELEMENT
<ins> <del> addition or removal from doc
cite link to source quotation optional
datetime date/time of change optional
<source> new alternative source media
src link to url media source
type MIME type video/mp4; codecs='...'
<track> external subtitles or tracks
src link to url subtitle resource
srclang language of the text track
label user-visible name of the text track
kind subtitles captions descriptions
T Target destination
S Security & Privacy Edit elements
KEYWORDS & TARGET DESTINATION
POLICIES
target browser destination
_self current place same page
_blank new place new tab page
_parent parent place else _self
_top root parent place else _self
name custom place iframe or other
I Image tags
IMAGES
<IMG>, <VIDEO>, <AUDIO>, <LINK> or <SCRIPT>
crossorigin CORS support
anonymous use-credentials
referrerpolicy set how referer works
no-referrer no-referrer-when-downgrade
same-origin origin strict-origin unsafe-url
origin-when-cross-origin strict-origin-when-cross-origin
chapters metadata
default set default enabled track
CHEAT SHEET
HTML5 WEB DEVELOPMENT
Created by @Manz ( https://twitter.com/Manz )
E Embedded tags
External content
S SVG tags
https://lenguajehtml.com/
Scalar Vectorial Graphics
S Scripting tags Javascript elements
EXTERNAL CONTENT (IFRAME)
MAIN TAGS
SCRIPTING ELEMENTS
<iframe> embeded content
src link to url resource website, file, ...
srcdoc document content html syntax
name name context for target attribute
loading auto lazy eager lazy load iframe
allowfullscreen allow iframe fullscreen
allowpaymentrequest allow payments
width height horizontal & vertical sizes
<svg> svg container standalone svg
viewBox minx miny width height
width height viewport size
preserveAspectRatio align option
align none x***Y*** Min Mid Max
option meet slice
<g> related group container
<script> include dynamic script
src link to script.js instead inline script
type associate fieldset with a form
<IFRAME> SECURITY, PRIVACY & POLICY ATTRIBUTES
sandbox allow-forms allow-modals
allow-orientation-lock allow-pointer-lock
allow-popups-to-escape-sandbox allow-scripts
allow-same-origin allow-presentation
allow-top-navigation-by-user-activation
allow-top-navigation allow-popups
allow feature allow access to feature
ambient-light-sensor autoplay accelerometer
camera display-capture document-domain
encrypted-media fullscreen geolocation
gyroscope magnetometer microphone midi
payment picture-in-picture speaker sync-xhr
usb wake-lock webauthn vr
referrerpolicy mode referer behaviour
LEGACY EMBED/OBJECT TAGS
<embed> external non-html content
src link to url resource
type type of embedded resource
width height horizontal & vertical sizes
<object> external resource multipurpose
data link to url resource
type type of embedded resource
name name context for target attribute
usemap name of image map to use
form associates element with form id
width height horizontal & vertical sizes
<param> external resource multipurpose
name value name & value of parameter
EXPERIMENTAL TAGS
<portal> guest embedded content ~iframe
src link to url resource website, file, ...
referrerpolicy mode referer behaviour
S SVG paths
Scalar Vectorial Graphics
POWERFUL PATHS
<path> define a outline of a shape
d command/coords space-separated
pathLength total length of the path
PATH COMMANDS GUIDE
M m Move to
path begins · M10,30
Z z Close path
path ends · Z
L l Line to
draw line · L90,90
H h Horiz line to
horizontal line · H40
V v Vert line to
vertical line · V20
C c Cubic Bézier
C30,90 25,10 50,10
S s Smooth C. B.
S70,90 90,90
Q q Quadratic Bézier
Q90,60 50,90
T t Smooth Q. B. T30,0 30,0 30,0 30,0
A a Elliptical Arc
A20,20 0,0,1 50,30
SVG METADATA
<title> short text title alternative
<desc> detailed textual information
<metadata> metadata elems. container
CONTENT FOR REUSE
<defs> referenced elements container
<symbol> set reuse template no render
<use> reference another element reuse
href a url link to be cloned for rendering
<switch> reference another element
<***> direct child of <switch>
systemLanguage code
BASIC SHAPES
<rect> define a rectangle
x y horizontal & vertical position
width height horizontal & vertical sizes
rx ry horizontal & vertical radius
<circle> define a circle
cx cy horizontal & vertical center coord
r radius of the circle
<ellipse> define a ellipse
rx ry horizontal & vertical radius
cx cy horizontal & vertical center coord
<line> define a line segment
x1 y1 start point (x,y) of line segment
x2 y2 end point (x,y) of line segment
pathLength total length of the path
<polyline> <polygon> line / closed shape
points set of coords space-separated
pathLength total length of the path
TEXT & IMAGE ELEMENTS
<text> <tspan> text layer & text container
x y start position of text
dx dy relative position of descendant
lengthAdjust spacing spacingAndGlyphs
rotate number rotate degrees per glyph
textLength number length per glyph
<textPath> put text on path
path equivalent of d attribute <path>
href url reference to <path>
startOffset length offset from start path
method align stretch how render glyph
spacing exact auto space between glyph
side left right side of the path to render
lengthAdjust spacing spacingAndGlyphs
textLength number length per glyph
<image> set reference to image
href a url link to image to rendering
preserveAspectRatio align option
crossorigin CORS support
javascript file default .js
JSON data block file .json
module javascript module module .mjs
nomodule fallback for old browsers
defer defer script execution
async exec script when available
text/javascript
application/json
SECURITY & PRIVACY
referrerpolicy mode referer behaviour
crossorigin mode CORS support
integrity verify integrity hash of src file
SCRIPT DOWNLOAD & PARSE MODES
HTML PARSE
FETCH
EXEC
SCRIPTS
NORMAL
DEFER
ASYNC
MODULES
NORMAL
ASYNC
S Other scripting tags Javascript elements
JAVASCRIPT-RELATED TAGS
<noscript> show if no scripting enabled
<template> inert html fragments to clone
<slot> create separate DOM trees
name name of shadow tree slot
<canvas> rendering graphs, art, etc...
width height horizontal & vertical size
<custom-elem> user custom element tag
S SVG Attrs Style SVG attributes
STYLE SVG ATTRIBUTES
FILL SHAPE
fill black color fills shape with a color
fill-rule nonzero evenodd algorithm inside
fill-opacity 1 opacity alpha channel
LINE (STROKE)
stroke none color set color line
stroke-width 1 width set width line
stroke-opacity 1 opacity alpha channel
stroke-linecap butt round square limit type
stroke-linejoin miter miter-clip round bevel arcs
stroke-miterlimit 4 number limit on ratio
stroke-dasharray none number array pattern
stroke-dashoffset 0 number array offset
OTHERS (CSS ATTRIBUTES)
transform css transform apply transform
class id style html attributes inherit
E M M E T C H E AT S H E E T
HTML 5 boilerplate
basic elements
classes and IDs
lorem ipsum (filler text)
!
section
.example
p>lorem10
<!DOCTYPE html>
<section></section>
<div class="example"></div>
<p>Lorem ipsum dolor sit amet
consectetur adipisicing elit. Neque,
facere?</p>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
</body>
</html>
nesting
section#intro>.container
<div class="container">
</div>
link:css
move upwards
<link rel="stylesheet" href="style.css">
ul>li*3^p*3
<ul>
<li></li>
<li></li>
<li></li>
</ul>
siblings
<p></p>
h3+p+p
<p></p>
<h3></h3>
<p></p>
<p></p>
<p></p>
your own text
p{your custom text}
attributes
p[data-author]
<p data-author=""></p>
style and script elements
<script src=""></script>
<section id="intro"></section>
<section id="intro">
</section>
script:src
section#intro
<p>your custom text</p>
grouping
h3+(ul>li*3)+h3
multiplication
ul>li*4
<ul>
<li></li>
<li></li>
<li></li>
<h3></h3>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<h3></h3>
<li></li>
</ul>
numbering
li.list-item-$*3
<li class="list-item-1"></li>
<li class="list-item-2"></li>
<li class="list-item-3"></li>
E M M E T C H E AT S H E E T | K E V I N P O W E L L .C O
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/
KG Coding
Our
Knowledge GATE
Channels
KG Coding Android App
KG Placement Prep
Sanchit Socket
Course Levels
● Level 0 Setup & Fundamentals
● Level 1 HTML Basics
● Level 2 Must-Use HTML Tags
● Level 3 Browser Tools
● Level 4 HTML and Project Structure
● Level 5 List, Tables & Forms
● Level Bonus Github Pages & CodeSpace
FF5F1F
Level 0
Setup & Fundamentals
1. IDE or Code Editor
1. What is IDE
2. Need of IDE
3. IDE Selection
4. Installation and Setup
5. VsCode Extensions
2. Website Components and Fundamentals
1. Client Side vs Server Side
2. FrontEnd / BackEnd / FullStack
3. Role of Browser
4. HTML
5. CSS
6. JS
Level 0
Setup & Fundamentals
1. 1. IDE
OR
Code Editor
FF5F1F
1.1 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.
FF5F1F
1.2 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
FF5F1F
1.3 IDE Selection
1. Sublime Text
2. Atom
3. VS Code
4. Github CodeSpaces
FF5F1F
1.4 Installation & Setup
1. Search VS Code
FF5F1F
1.5 VsCode Extensions
1. Live Server
2. Prettier
FF5F1F
Level 0
Setup & Fundamentals
2. Website
Components
And
Fundamentals
2.1 Client Side vs Server Side
Client Side
Server Side
Execution Location
Executes on user's
device.
Executes on a remote
machine.
Languages
Primarily JavaScript,
HTML, CSS.
PHP, Python, Java,
Node.js, etc.
Main Job
Makes clicks and scrolls
work
Manages saved
information
Access Level
Can't access server
data directly
Can read/write files,
interact with databases.
Speed
Quicker for UI changes
Slower due to network
latency.
2.2 FrontEnd / BackEnd / FullStack
Client Side / Front-End
Web Development
Full Stack
Server Side
Back-End
2.3 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.
2.4 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.
2.5 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.
2.6 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.
FF5F1F
Level 0 Revision
Setup & Fundamentals
1. IDE or Code Editor
1. What is IDE
2. Need of IDE
3. IDE Selection
4. Installation and Setup
5. VsCode Extensions
2. Website Components and Fundamentals
1. Client Side vs Server Side
2. FrontEnd / BackEnd / FullStack
3. Role of Browser
4. HTML
5. CSS
6. JS
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/
KG Coding
Our
Knowledge GATE
Channels
KG Coding Android App
KG Placement Prep
Sanchit Socket
FF5F1F
Level 1
HTML Basics
1. Starting up
1. First File using Text Editor
2. File Extension
3. Opening the project in VsCode
4. Index.html
2. Basics of HTML
1. What are Tags
2. Using Emmet ! to generate code
3. Basic HTML Page
4. MDN Documentation
5. Comments
6. Case Sensitivity
FF5F1F
Level 1
HTML Basics
1. 1. Starting
Up
FF5F1F
1.1 First file using Text Editor
1. Create a folder with name First
Project on your Desktop.
2. Open Notepad.
3. Create a file and save it as
index.html
4. Copy Sample code
5. Open Browser and Check.
1.2 File Extension
FF5F1F
HTML
1.
2.
3.
4.
Most commonly used.
Works across all browsers.
Widely recognized and supported.
Typically saved as .html.
HTM
1.
2.
3.
4.
Less commonly used.
Originated for compatibility with older systems.
Works same as .html.
Typically saved as .htm.
1.3 Opening project in VsCode
1.4 Importance of index.html
1. Default name of a website’s
homepage.
2. First page users see when
visiting a website
3. Important for SEO (Search
Engine Optimization)
4. Provides uniform starting point
across servers
5. Serves as fallback when no file is
specified in URL
FF5F1F
Level 1
HTML Basics
1. 2. Basics of
HTML
2.1 What are Tags
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
2.2 Using Emmet ! to generate code
1. Type ! and wait for suggestions.
2.3 Basic HTML Page
<!DOCTYPE html>
Defines the HTML Version
<html lang="en">
Parent of all HTML tags / Root element
<head>
Parent of meta data tags
<title>My First Webpage</title> Title of the web page
</head>
<body>
Parent of content tags
<h1>Hello World!</h1> Heading tag
</body>
</html>
2.4 MDN Documentation
1. Visit https://developer.mozilla.org/
2. Official resource for HTML
3. Offers comprehensive guides and
tutorials
4. Includes examples for real-world
use
5. Updated with latest HTML features
6. Trusted by developers worldwide
2.5 Comments
1. Used to add notes in HTML
code
2. Not displayed on the web page
3. Syntax: <!-- Comment here -->
4. Helpful for code organization
5. Can be multi-line or single-line
2.6 Case Sensitivity
1. HTML is case-insensitive for tag
names
2. Attribute names are also be
case-insensitive
3. Best practice: use lowercase for
consistency
FF5F1F
Level 1 Revision
HTML Basics
1. Starting up
1. First File using Text Editor
2. File Extension
3. Opening the project in VsCode
4. Index.html
2. Basics of HTML
1. What are Tags
2. Using Emmet ! to generate code
3. Basic HTML Page
4. MDN Documentation
5. Comments
6. Case Sensitivity
FF5F1F
Project Level 1
HTML Basics
1. Create a new project with
Index.html
2. Generate boilerplate code using
Emmet
3. Write “I am learning with
Prashant sir”
4. Use comments
5. Also use Case insensitive tags
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/
KG Coding
Our
Knowledge GATE
Channels
KG Coding Android App
KG Placement Prep
Sanchit Socket
FF5F1F
Level 2
Must-Use HTML Tags
1. HTML Attributes
1. What are HTML Attributes
2. Id Property
2. HTML Tags
1. Heading Tag
2. Paragraph Tag
3. <BR> <HR> tags
4. Image Tag
5. Video Tag
6. Anchor Tag
7. Bold / Italic / Underline / Strikethrough
8. Pre Tag
9. Big / Small Tag
10. Superscript / Subscript
3. Character Entity Reference
1. What are Character Entity References
FF5F1F
Level 2
Must-Use HTML Tags
1. 1. HTML
Attributes
1.1 What are HTML Attributes?
1. Provides additional information
about elements
2. Placed within opening tags
3. Common examples: href, src, alt
4. Use name=value format
5. Can be single or multiple per
element
1.2 id property
●
●
●
Unique Identifier: Each id should be unique within a page.
Anchoring: Allows for direct links to sections using the #id syntax in URLs.
CSS & JavaScript: Used for selecting elements for styling or scripting.
FF5F1F
Level 2
Must-Use HTML Tags
1. 2. HTML
Tags
2.1 Heading Tag
1.
2.
3.
4.
5.
Defines headings in a document
Ranges from <h1> to <h6>
<h1> is most important, <h6> is least
Important for SEO
Helps in structuring content
2.2 Paragraph Tag
1. Used for defining paragraphs
2. Enclosed within <p> and </p> tags
3. Adds automatic spacing before and after
4. Text wraps to next line inside tag
5. Common in text-heavy content
2.3 <BR> Tag
1. <br> adds a line break within text
2. <br> is empty, no closing tag needed
3. <br> and <br /> are both valid
2.3 <HR> Tag
1. <hr> creates a horizontal rule or line
2. <hr> also empty, acts as a divider
2.4 Image Tag
1.
2.
3.
4.
5.
Used to embed images
Utilizes the src attribute for image URL
alt attribute for alternative text
Can be resized using width and height
Self-closing, doesn't require an end tag
2.5 Video Tag
1.
2.
3.
4.
Embeds video files on a page
Uses src attribute for video URL
Supports multiple formats like MP4, WebM
Allows for built-in controls via attributes like
autoplay, controls, loop
2.6 Anchor Tag
1.
2.
3.
4.
Used for creating hyperlinks
Requires href attribute for URL
Can link to external sites or internal pages
Supports target attribute to control link behavior
2.7 Bold/Italic/Underline/Strikethrough Tag
1.
2.
3.
4.
5.
<b> makes text bold
<i> makes text italic
<u> underlines text
<s> or <strike> applies strikethrough
Primarily used for text styling and emphasis
2.8 Pre Tag
1.
2.
3.
4.
Preserves text formatting
Maintains whitespace and line breaks
Useful for displaying code
Enclosed within <pre> and </pre> tags
2.9 Big/Small Tag
1. <big> increases text size
2. <small> decreases text size
3. Less common due to CSS alternatives
2.10 Superscript/Subscript Tag
1.
2.
3.
4.
<sup> makes text superscript
<sub> makes text subscript
Used for mathematical equations, footnotes
Does not change font size, just position
FF5F1F
Level 2
Must-Use HTML Tags
1. 3.Character
Entity
Reference
3.1 Character Entity Reference
1. Used to display reserved or special characters
2. Syntax often starts with & and ends with ; (e.g., &amp; for &)
FF5F1F
Level 2 Revision
Must-Use HTML Tags
1. HTML Attributes
1. What are HTML Attributes
2. Id Property
2. HTML Tags
1. Heading Tag
2. Paragraph Tag
3. <BR> <HR> tags
4. Image Tag
5. Video Tag
6. Anchor Tag
7. Bold / Italic / Underline / Strikethrough
8. Pre Tag
9. Big / Small Tag
10. Superscript / Subscript
3. Character Entity Reference
1. What are Character Entity References
FF5F1F
Project Level 2
Must-Use HTML Tags
1. Create a page with heading,
paragraph, line breaks and
separators.
2. Use an image with height 300,
which is a link to another page.
3. Use bold, italic, underline and
strike through in one line.
4. Write third equation of motion
using superscript and subscript.
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/
KG Coding
Our
Knowledge GATE
Channels
KG Coding Android App
KG Placement Prep
Sanchit Socket
FF5F1F
Level 3
Browser Tools
1. Browser Tools
1. View Page Source
2. Inspect Element
3. HTML without CSS
2. Responsive Design
1. Different screen size
3. Live Edit Code
1. Live edit HTML
2. Live edit CSS
3. Live edit JS
4. Changes only happening at client
4. Validating Web pages
1. Using validator.w3.org
FF5F1F
Level 3
Browser Tools
1. 1. Browser
Tools
1.1 View Page Source
1. Displays raw HTML and CSS
2. Useful for debugging and
learning
3. Shows external files like
JavaScript links
1.2 Inspect Element
1. Allows real-time editing of
HTML/CSS
2. Useful for debugging and testing
3. Shows element hierarchy and
layout
4. Includes console for JavaScript
5. Highlights selected elements on
page
1.3 HTML without CSS
FF5F1F
Level 3
Browser Tools
1. 2.
Responsive
Design
2.1 Different Screen Sizes
1. Adapts layout for different
screen sizes
2. Flexible layouts
3. Optimizes images and assets
4. Enhances user experience on
mobile and desktop
FF5F1F
Level 3
Browser Tools
1. 3. Live Edit
Code
3.1 Live edit HTML
Changed Subscriber
count
3.2 Live edit CSS
Changed Channel
Name color
3.3 Live edit JS
3.4 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.
FF5F1F
Level 3
Browser Tools
1. 4. Validating
WebPages
4.1 Using validator.w3.org
1. Ensures HTML adheres to
standards
2. Minimizes cross-browser issues
3. Helps in achieving better SEO
results
4. Easier to debug and maintain
5. Optimizes performance by
reducing parsing errors
FF5F1F
Level 3 Revision
Browser Tools
1. Browser Tools
1. View Page Source
2. Inspect Element
3. HTML without CSS
2. Responsive Design
1. Different screen size
3. Live Edit Code
1. Live edit HTML
2. Live edit CSS
3. Live edit JS
4. Changes only happening at client
4. Validating Web pages
1. Using validator.w3.org
FF5F1F
Project Level 3
Browser Tools
1. Save Source of Instagram in a
file and check the render.
2. Inspect the likes element on the
page and read the code to
understand.
3. Change number of likes on Your
Instagram post
4. Validate the page we created in
last project.
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/
KG Coding
Our
Knowledge GATE
Channels
KG Coding Android App
KG Placement Prep
Sanchit Socket
FF5F1F
Level 4
HTML and Project Structure
1. Semantic Tags
1. Semantic / Non-Semantic Tags
2. Body Tags
1. Header Tag
2. Main Tag
1. Section Tag
2. Article Tag
3. Aside Tag
3. Footer Tag
3. Folder Structure
1. Recommended Folder structure
4. More Tags
1. Navigation tags
2. Block / Inline Elements
3. Div tags
4. Span Tags
FF5F1F
Level 4
HTML and Project Structure
1. 1. Semantic
Tags
1.1 Semantic/Non-Semantic Tags
Semantic Tags
Non-Semantic Tags
● Meaningful: Describe content.
● SEO: Good for search engines.
● Accessibility: Useful for screen
readers.
● Examples: <header>, <footer>,
<article>, <section>, <nav>.
●
●
●
●
Generic: No specific meaning.
For Styling: Used for layout.
No SEO: Not SEO-friendly.
Examples: <div>, <span>, <i>,
<b>.
FF5F1F
Level 4
HTML and Project Structure
1. 2. Body
Tags
2.1 Header Tag
1. Purpose: Used to contain introductory content or navigation links.
2. Semantic: It's a semantic tag, providing meaning to the enclosed content.
3. Location: Commonly found at the top of web pages, but can also appear within
<article> or <section> tags.
4. Multiple Instances: Can be used more than once on a page within different
sections.
2.2 Main Tag
1.
2.
3.
4.
5.
Purpose: Encloses the primary content of a webpage.
Semantic: Adds meaning, indicating the main content area.
Unique: Should appear only once per page.
Accessibility: Helps screen readers identify key content.
Not for Sidebars: Excludes content repeated across multiple pages like site
navigation or footer.
2.2.1 Section Tag
1.
2.
3.
4.
Purpose: Groups related content in a distinct section.
Semantic: Adds structure and meaning.
Headers: Often used with a heading <h1> to <h6> to indicate section topic.
Nested: Can be nested within other <section> or <article> tags.
2.2.2 Article Tag
1.
2.
3.
4.
Purpose: Encloses content that stands alone, like a blog post or news story.
Semantic: Provides contextual meaning.
Independence: Content should make sense even if taken out of the page context.
Multiple Instances: Can be used multiple times on the same page
2.2.3 Aside Tag
1.
2.
3.
4.
Purpose: Contains sidebar or supplementary content.
Semantic: Indicates content tangentially related to the main content.
Not Crucial: Content is not essential to understanding the main content.
Examples: Could hold widgets, quotes, or ads.
2.3 Footer Tag
1. Purpose: For footer content like extra info or links.
2. Semantic: Provides meaning to enclosed content.
3. Location: Typically at the bottom of pages or sections.
4. Content: Includes copyrights, contact info, and social links.
5. Multiple Instances: Can be used more than once on a page.
FF5F1F
Level 4
HTML and Project Structure
1. 3. Folder
Structure
3.1 Recommended Folder Structure
1. Root Directory: Main folder containing all website files.
2. HTML Files: Store main .html files at the root level for easy
access.
3. CSS Folder: Create a css/ folder for all Cascading Style
Sheets.
4. JS Folder: Use a scripts/ folder for JavaScript files.
5. Images Folder: Store images in an images/ or images/
folder.
6. Assets: Other assets like fonts can go in an assets/ folder.
7. Sub-directories: For multi-page websites, use sub-folders to
categorize content.
FF5F1F
Level 4
HTML and Project Structure
1. 4. More
Tags
4.1 Navigation Tags
1.
2.
3.
4.
Purpose: Encloses navigation links or menus.
Semantic: Signals that the content is meant for navigating the site.
Common Content: Usually contains lists <ul>, <ol> of links <a>.
Accessibility: Aids screen readers in identifying site navigation.
4.2 Block / Inline Elements
Block Elements
Inline 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>.
● 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>, <img>.
4.3 Div Tags
1.
2.
3.
4.
Purpose: Acts as a container for other HTML elements.
Non-Semantic: Doesn't provide inherent meaning to enclosed content.
Styling: Commonly used for layout and styling via CSS.
Flexibility: Highly versatile and can be customized using classes or IDs.
4.4 Span Tags
1.
2.
3.
4.
Purpose: Used for inline elements to style or manipulate a portion of text.
Non-Semantic: Doesn't add specific meaning to the enclosed text.
Styling: Commonly used for changing color, font, or adding effects via CSS.
Inline Nature: Doesn't break text flow or create a new block-level element.
FF5F1F
Level 4 Revision
HTML and Project Structure
1. Semantic Tags
1. Semantic / Non-Semantic Tags
2. Body Tags
1. Header Tag
2. Main Tag
1. Section Tag
2. Article Tag
3. Aside Tag
3. Footer Tag
3. Folder Structure
1. Recommended Folder structure
4. More Tags
1. Navigation tags
2. Block / Inline Elements
3. Div tags
4. Span Tags
FF5F1F
Project Level 4
HTML and Project Structure
1. Create a page with header,
footer, main(section, article,
aside tag).
2. Make sure the project from level
3 has correct folder structure.
3. Create groupings of multiple
tags using div.
4. Create navigation to important
sections of your page.
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/
KG Coding
Our
Knowledge GATE
Channels
KG Coding Android App
KG Placement Prep
Sanchit Socket
FF5F1F
Level 5
List, Tables & Forms
1. List Tag
1. Ordered Lists
2. Types of Ordered Lists
3. Unordered Lists
2. Table Tag
1. <tr>, <td>, <th> tags
2. Captions
3. Col spans
3. Forms
1. Input tag
2. Action Attributes
3. Name and Value Property
4. Label Tag
5. Exploring Types
4. iFrame Tag
1. Using iFrames
FF5F1F
Level 5
List, Tables & Forms
1. 1. List
Tag
1.1 Ordered Lists
1. Purpose: Used for creating lists with items that have a specific order.
2. Default: Items are automatically numbered.
3. Nesting: Can be nested within other lists.
1.2 Types of Ordered Lists
Ordered Lists
● Numeric: Default type, (1, 2, 3, ...)
Attribute: type="1"
● Uppercase Letters: (A, B, C, ...)
Attribute: type="A"
● Lowercase Letters: (a, b, c, ...)
Attribute: type="a"
● Uppercase Roman: (I, II, III, ...)
Attribute: type="I"
● Lowercase Roman: (i, ii, iii, ...)
Attribute: type="i"
1.3 Unordered Lists
1. Purpose: Used for lists where the order of items doesn't matter.
2. Default: Items are usually bulleted.
3. Nesting: Can be nested within other lists.
FF5F1F
Level 5
List, Tables & Forms
1. 2. Table
Tag
2.1 <tr>, <td>, <th> Tags
1. <tr> Table Row : Used to define a row in an HTML table.
2. <th> Table Header : Used for header cells within a row.
Text is bold and centered by default.
3. <td> Table Data : This Holds the actual data.
2.2 Captions
1.
2.
3.
4.
Purpose: Provides a title or description for a table.
Placement: Must be inserted immediately after the <table> opening tag.
Alignment: Centered above the table by default.
Accessibility: Helps screen readers understand the table's purpose.
2.3 Col Spans
1.
2.
3.
4.
Attribute: Uses the colspan attribute in <td> or <th> tags.
Purpose: Allows a cell to span multiple columns horizontally.
Alignment: Takes the space of the specified number of columns.
Layout: Useful for combining cells to create complex table layouts.
FF5F1F
Level 5
List, Tables & Forms
1. 3. Forms
3.1 Input Tag
1. Purpose: Used within a <form> element to collect user input.
2. Self-Closing: The <input> tag is self-closing; doesn't require
a closing tag.
3. Attributes: Common attributes are name, value, placeholder,
and required.
3.2 Action attribute
1. Purpose: Specifies the URL to which the form data should
be sent when submitted.
2. Default: If not specified, the form will be submitted to the
current page's URL.
3. Server-Side: Usually points to a server-side script (like
PHP, Python, etc.) that processes the form data.
3.3 Name and Value property
●
●
`name` Property:
○ ID for Data: Identifies form elements when submitting.
○ Unique: Should be unique to each element for clarity.
`value` Property:
○ Default Data: Sets initial value for input elements.
○ Sent to Server: This is the data sent when form is
submitted.
3.4 Label Tag
●
●
●
●
Purpose: Adds a text description to form elements.
for Attribute: Connects the label to a specific form
element using the element's id.
Accessibility: Makes the form more accessible.
Readability: Enhances form readability and usability.
3.5 Input type: Date
3.5 Input type: File
3.5 Input type: Color
3.5 Input type: Range
3.5 Input type: Button
3.5 Input type: Submit
3.5 Input type: Radio
3.5 Input type: Checkbox
3.5 Input type: Select
3.5 Input type: TextArea
1. Purpose: <textarea> is used for multi-line text input in forms.
1. rows Property: Specifies the visible number of lines in the textarea.
2. cols Property: Sets the visible width measured in average character
widths.
2. Resizable: Some browsers allow users to manually resize the textarea.
FF5F1F
Level 5
List, Tables & Forms
1. 4. iFrame
Tag
4.1 Using iFrames
1. Embedded Content: Allows you to embed another webpage or multimedia
content within a webpage.
2. src Attribute: Specifies the URL of the content to be embedded.
3. Dimensions: Width and height can be set using width and height attributes.
FF5F1F
Level 5 Revision
List, Tables & Forms
1. List Tag
1. Ordered Lists
2. Types of Ordered Lists
3. Unordered Lists
2. Table Tag
1. <tr>, <td>, <th> tags
2. Captions
3. Col spans
3. Forms
1. Input tag
2. Action Attributes
3. Name and Value Property
4. Label Tag
5. Exploring Types
4. iFrame Tag
1. Using iFrames
FF5F1F
Project Level 5
List, Tables & Forms
1. Create a page with all type of
ordered list and one unordered list.
2. Create a table with headings,
captions and a few rows. One of
heading should take at least 3
columns.
3. Create a contact me form with
relevant details for your resume
website.
4. Use iFrame to add this video to
your page.
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/
KG Coding
Our
Knowledge GATE
Channels
KG Coding Android App
KG Placement Prep
Sanchit Socket
FF5F1F
Level Bonus
Github Pages & CodeSpace
1. Github
1. What is Version Control
2. What is Git and GitHub
3. Account Creation
4. Creating a Repo
5. Creating a Codespace
6. Creating a Github page
7. Publishing our project
2. FrameWorks
1. React
2. Angular
3. Vue
FF5F1F
Level Bonus
Github Pages & CodeSpace
1. 1. GitHub
1.1 What is Version Control
1. Definition: A system to track changes in files over time.
2. Types: Centralized (like SVN) and Distributed (like Git).
3. Purpose: Helps in teamwork and fixes mistakes.
4. Snapshots: Each 'commit' saves a file version.
5. Branching: Lets you work on different tasks separately.
6. Merge: Combines changes from different people.
7. Undo: Easy to revert to older file versions.
1.2 What is Git and GitHub
What is Git?
●
●
●
●
Definition: A software tool that tracks changes in code,
enabling collaboration and version control.
Commit: Records a snapshot of file changes.
Branch: Allows separate paths of development.
Merge: Combines changes from different branches.
What is GitHub?
●
●
●
●
Definition: A web service for hosting and collaborating on
Git repositories.
Fork: Creates a personal copy of another user's repository.
Pull Request: A way to propose changes to existing code.
Issues: Used for tracking bugs and feature ideas.
1.3 Account Creation
1.4 Creating a Repo
1.5 Creating a CodeSpace
1.6 Creating a Github Page
1.7 Publishing our Project
FF5F1F
Level Bonus
Github Pages & CodeSpace
1. 2.
Frameworks
3.1 ReactJS
1. Definition: A tool for making websites
interactive.
2. Components: Reusable pieces for
building a webpage.
3. Virtual DOM: Makes websites faster by
updating only what's needed.
4. JSX: A special way to write code that
looks like HTML.
5. State: Keeps track of changes on the
webpage.
6. Props: Shares information between
different parts of a webpage.
3.2 AngularJS
1. Definition: A framework for building web
applications, developed by Google.
2. Two-Way Data Binding: Updates both the view
and the model simultaneously.
3. Directives: Custom HTML tags for added
functionality.
4. Dependency Injection: Automatically manages
how parts of the app work together.
5. Controllers: Manages the data for a specific
part of the webpage.
6. SPA Support: Good for Single Page
Applications where the page doesn't reload.
3.3 VueJS
1. Definition: A JavaScript framework for
creating web interfaces.
2. Components: Small, reusable parts for
building a website.
3. Reactivity: Automatically updates the
webpage when data changes.
4. Directives: Special tokens in HTML for
added functionality.
5. Vuex: Helps manage shared data across the
site.
6. Single-File Components: Keeps template,
script, and style in one file.
FF5F1F
Level Bonus Revision
Github Pages & CodeSpace
1. Github
1. What is Version Control
2. What is Git and GitHub
3. Account Creation
4. Creating a Repo
5. Creating a Codespace
6. Creating a Github page
7. Publishing our project
2. FrameWorks
1. React
2. Angular
3. Vue
FF5F1F
Level Bonus Project
Github Pages & CodeSpace
1. Create a Github account if you
don’t have one.
2. Create a repo for the project
you have done till now.
3. Create a Codespace and make
changes.
4. Publish it using Github pages.
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/
KG Coding
Our
Knowledge GATE
Channels
KG Coding Android App
KG Placement Prep
Sanchit Socket
FF5F1F
Major Project
Idea
1. Create your Resume or Portfolio
website.
2. Create a repo in Github.
3. Publish it on Github pages.
4. Add the link to your resume.
5. Add the link in the comment
section.
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/
KG Coding
Our
Knowledge GATE
Channels
KG Coding Android App
KG Placement Prep
Sanchit Socket
0
advertisement
Download
advertisement
Add this document to collection(s)
You can add this document to your study collection(s)
Sign in Available only to authorized usersAdd this document to saved
You can add this document to your saved list
Sign in Available only to authorized users