FRONT END
HTML5 Beginner Syllabus
1. Introduction to HTML
• What is HTML?
• History and versions (HTML, HTML4, XHTML, HTML5)
• Role of HTML in web development
• HTML document structure
2. Basic HTML Document Structure
• <!DOCTYPE html> declaration
• <html>, <head>, <body> tags
• <title> tag
• Saving and opening HTML files in browser
3. Text Formatting Tags
• Headings: <h1> to <h6>
• Paragraph: <p>
• Line break: <br>
• Horizontal line: <hr>
• Bold: <b>, <strong>
• Italic: <i>, <em>
FRONT END
• Underline: <u>
• Highlighted text: <mark>
• Small text: <small>
• Strikethrough / deleted: <del>
• Inserted: <ins>
• Subscript: <sub>
• Superscript: <sup>
4. Lists
• Unordered list: <ul>, <li>
• Ordered list: <ol>, <li>
• Description list: <dl>, <dt>, <dd>
• List attributes: type, start, reversed, CSS styling
5. Links
• Anchor tag: <a>
• href, target, title, download, rel attributes
• Linking to external sites, email, phone numbers
• Linking to sections within the same page
6. Images
FRONT END
• <img> tag
• src, alt, width, height, title, loading attributes
• Adding logos, banners, icons
• Image inside links
7. Tables
• <table>, <tr>, <td>, <th>
• Table headers, rows, columns
• Table attributes: border, cellspacing, cellpadding (deprecated),
CSS styling
8. Forms
• <form> tag
• Input fields: <input> types (text, password, email, number,
checkbox, radio, file, submit, reset)
• <textarea>, <select>, <option>
• Form attributes: action, method, name, placeholder, required
9. Multimedia
• Audio: <audio> tag with controls, autoplay, loop, muted
• Video: <video> tag with controls, autoplay, loop, muted,
poster
FRONT END
• Embedding YouTube or external videos: <iframe>
10. Semantic HTML5 Tags
• <header>, <footer>
• <nav> → Navigation menu
• <section>, <article>
• <aside> → Sidebar
• <main> → Main content
• <figure> and <figcaption>
11. Other Useful Tags
• <link> → CSS, favicon, fonts
• <meta> → charset, viewport, description
• <style> → internal CSS
• <script> → internal JavaScript
• <div> → division / block container
• <span> → inline container
• <iframe> → embed another page
• <marquee> (deprecated, only for reference), scrole the conten
from required directions attribute = directions,
FRONT END
12. HTML5 Forms & Input Types
• New HTML5 input types: email, url, date, time, color, range,
number, search
• Attributes: required, placeholder, pattern, min, max, step
13. Meta and SEO Basics
• <meta charset="UTF-8">
• <meta name="viewport" content="width=device-width, initial-
scale=1.0">
• <meta name="description" content="Page description">
14. HTML5 Best Practices
• Use semantic tags instead of <div> for clarity
• Always add alt for images
• Keep HTML clean and properly indented
• Avoid deprecated tags like <font>, <center>, <marquee>
===============================================
content
Basic HTML Tags (Quick Revision)
1. <!DOCTYPE html> → Defines HTML5 document.
2. <html> … </html> → Root of the HTML page.
FRONT END
3. <head> … </head> → Metadata section (title, links).
4. <title> … </title> → Page title (shown in browser tab).
5. <body> … </body> → Main visible content.
6. <h1> … <h6> → Headings (h1 largest, h6 smallest).
7. <p> … </p> → Paragraph.
8. <br> → Line break.
9. <hr> → Horizontal line.
10. <a> … </a> → Anchor tag (links).
11. <img> → Image tag.
12. <ul>, <ol>, <li> → Lists (unordered/ordered).
13. <table>, <tr>, <td>, <th> → Tables.
Quick Revision – HTML Formatted Tags
• <b> → Bold text
• <strong> → Important/strong text (bold)
• <i> → Italic text
• <em> → Emphasized text (italic)
• <u> → Underlined text
• <mark> → Highlighted text
• <small> → Smaller text
• <del> → Deleted/strikethrough text
• <ins> → Inserted/added text
• <sub> → Subscript
• <sup> → Superscript
FRONT END
LINKS
HTML <link> Tag – Quick Revision
Purpose
• Links external resources to your HTML page.
• Usually placed inside <head>.
Syntax
<link rel="stylesheet" href="[Link]">
Rel =relationship, hypertext reference
Common Uses
1. Link CSS stylesheet
<link rel="stylesheet" href="[Link]">
2. Favicon / Website icon
<link rel="icon" href="[Link]" sizes="32x32" type="image/png">
3. Import Google Fonts
<link href="[Link]
rel="stylesheet">
4. Alternate language version
<link rel="alternate" href="[Link]" hreflang="hi">
5. Preload resources (performance)
<link rel="preload" href="[Link]" as="image">
FRONT END
Common Attributes
• rel → Relationship (stylesheet, icon, preload, alternate)
• href → Path to the resource
• type → Type of resource (optional, e.g., text/css, image/png)
• sizes → Icon size (e.g., 32x32)
• media → Device type (screen, print)
• as → Type of resource when using preload (image, script)
LIST TAGS
Types of List Tags in HTML
1. Ordered List (<ol>)
• Used when the order of items is important.
• Items are automatically numbered.
• Sub-tag: <li> (list item).
• Attributes:
o type → sets numbering style (1, A, a, I, i).
o start → sets the starting number/letter.
o reversed → displays numbering in reverse order.
FRONT END
• Example:
• <ol type="A" start="3">
• <li>Third Item</li>
• <li>Fourth Item</li>
• </ol>
2. Unordered List (<ul>)
• Used when the order of items is not important.
• Items are marked with bullets by default.
• Sub-tag: <li>.
• Attribute:
o type (deprecated in HTML5, but works in old HTML). Possible
values: disc, circle, square.
o Modern way → use CSS: list-style-type.
• Example:
• <ul style="list-style-type: square;">
• <li>Apples</li>
• <li>Bananas</li>
• </ul>
3. Description List (<dl>)
• Used for terms and their descriptions (like dictionary or glossary).
• Sub-tags:
FRONT END
o <dt> → definition term.
o <dd> → definition description.
• No special attributes.
• Example:
• <dl>
• <dt>HTML</dt>
• <dd>HyperText Markup Language</dd>
• <dt>CSS</dt>
• <dd>Cascading Style Sheets</dd>
• </dl>
Uses of List Tags
• <ol> → steps in instructions, rankings, or ordered tasks.
• <ul> → menus, shopping lists, unordered items.
• <dl> → FAQs, glossaries, dictionaries, term-definition pairs.
HTML Tables
Tables are used to display data in rows and columns on a web page.
Syntax
<table border="1">
<tr> <!-- Table Row -->
<th>Header 1</th> <!-- Table Header -->
<th>Header 2</th>
FRONT END
</tr>
<tr>
<td>Data 1</td> <!-- Table Data -->
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
1. Basic Table Structure
• <table> → Main container for the table
• <tr> → Table row
• <th> → Table header (bold and centered by default)
• <td> → Table data cell
• border → Adds border around table and cells
• cellspacing → Space between cells (deprecated, use CSS)
• cellpadding → Space inside cells (deprecated, use CSS)
• colspan → Merge cells horizontally
• rowspan → Merge cells vertically
FRONT END
3. Example Usage
• Display student marks
• Display project details
• Display inventory or product list
Forms
Syntax
<form action="[Link]" method="post">
<!-- form controls here -->
</form>
Form Layouts – Quick Revision
1. Vertical Form (Default)
• Fields appear top → bottom.
• No extra styling needed.
Name: [____]
Email: [____]
Password: [____]
[Submit]
2. Inline Form
• Fields appear side by side in one line.
• Used for short forms (like search bars).
FRONT END
Name [____] Email [____] Password [____] [Submit]
3. Horizontal Form
• Label + Input on the same line (row by row).
• Looks like a table structure.
Name: [____]
Email: [____]
Password: [____]
[Submit]
Summary:
• Vertical → One below another (default).
• Inline → All in one line.
• Horizontal → Label + Field side by side (row wise).
1. Form Tag
• <form> → Creates a form to collect user [Link] stors in db for
futher processing
• Attributes:
o action → URL where data will be sent.
o method → how data is sent (GET or POST).
.
FRONT END
1. GET Method
• Sends form data as URL parameters (visible in the browser’s address bar).
• Best for: search forms, data retrieval, non-sensitive data.
• Limited data length.
2. POST Method
• Sends form data in the HTTP body (not visible in the URL).
• Best for: login forms, registration, file upload, sensitive data.
• Can handle larger amounts of data.
2. Input Types
it is a un paired tag used to take diffrent types of inputs from the use like text
number etc..
input tag attributs
pattrens
it is used to perform reg x to perfrom client side validation
How it works
• User enters data in the input box.
• Browser checks if input matches the pattern.
• If not, form cannot be submitted.
• title attribute is used to show a tooltip / message if input is invalid.
Quick Summary
• pattern → Validate input using regular expressions.
• Prevents form submission if input does not match the pattern.
• Works with text, email, password, tel, etc.
FRONT END
• type → Kind of input (text, password, email, number, radio, checkbox, file, submit, reset,
button).
• name → Name of the field (used when sending data).
• value → Default value / button text.
• id → Unique identifier (used with <label> / CSS / JS).
• placeholder → Hint text inside box.
• required → Makes input mandatory.
• readonly → Field cannot be edited.
• disabled → Field is disabled (greyed out, not sent).
• maxlength → Max number of characters.
• size → Width of input (in characters).
• checked → Pre-selects radio button / checkbox.
• min / max → Minimum & maximum values (numbers, dates).
• step → Step size for numbers.
• autofocus → Automatically focuses on page load.
• autocomplete → Suggests saved values (on / off).
• multiple → Allows multiple file/email selection.
Common Attributes of <input>
• <input type="text"> → single-line text box.
• <input type="password"> → hidden characters for passwords.
• <input type="email"> → accepts only emails.
• <input type="number"> → accepts numbers only.
FRONT END
• <input type="radio"> → lets user pick one option.
• <input type="checkbox"> → lets user pick multiple options.
• <input type="file"> → allows file upload.
• <input type="submit"> → button to submit form.
• <input type="reset"> → button to clear form.
• range → numeric slider (min–max)
• color → hex color code (#ff0000)
date/time/datetime-local → date & time values
3. Other Form Elements
• <textarea> → multi-line text input.
• <select> with <option> → dropdown list.
• <select> attributes:
name → name for form data
id → unique identifier
multiple → select many options
size → number of visible options
disabled → makes dropdown inactive
required → must choose before submit
autofocus → auto-focus on load
• <option> attributes:
FRONT END
value → data sent to server
selected → default option
disabled → not selectable
• <button> → clickable button (can be used instead of input button).
4. Grouping
• <fieldset> → groups related inputs inside a box.
• <legend> → title for that group.
5. Common Attributes
• name → unique name for backend.
• value → default value inside the input.
• placeholder → grey hint text inside input box.
• required → must be filled before submitting.
• checked → pre-selected radio/checkbox.
• selected → pre-selected dropdown option.
• disabled → makes input unusable.
• readonly → input visible but not editable.
So in one line definition style:
• Form → Collects input.
• Input → Different types of fields.
FRONT END
• Textarea → Big text box.
• Select → Dropdown.
• Fieldset/Legend → Group inputs
Loging form
<center>
<h2>Login</h2>
<form action="from" method="post">
<mark>user name</mark> <input type="text"
required pattern="[A-Z]{1}[a-z]*[_]{1}[0-9]{5}" title="Uabc_25458">
<br>
<br>
password <input type="text" 
placeholder="enter password" required pattern="[A-Z]{1}[a-
z]*[_]{1}[0-9]{5}" title="dear: User_123">
<br>
<br>
<input type="submit" value="Submit">
Div tag
In HTML, the <div> tag is a block-level element used to divide a web page
into sections or containers.
<div> Content goes here </div>
in short
ChatGPT said:
Here’s the short version of <div> attributes:
FRONT END
• id → unique name for the div
• class → apply CSS/group divs
• style → inline CSS styling
• title → tooltip on hover
• lang / dir → language & text direction
• onclick / ondblclick → event handling
Most used: id, class, style.
Secmatic tags
A semantic tag in HTML is a tag that clearly describes its meaning and the
role of the content inside it,to craet page lay out laso making code more
readable and SEO-friendly
<header> ... </header> <!-- Page or section header -->
<nav> ... </nav> ….
Main structure tags
• <header> →it is used to creat Header section/division
• <nav> → Navigation links
• <main> → Main content of page
• <section> → Groups related content
• <article> → Independent/self-contained content
• <aside> → Sidebar or extra info
• <footer> → Footer section
Content-level tags
• <h1>–<h6> → Headings (carry meaning of importance)
FRONT END
• <p> → Paragraph text
• <address> → Contact information
• <figure> → Figure (with optional <figcaption>)
• <figcaption> → Caption for a figure
• <mark> → Highlighted text
• <time> → Date/time info (machine-readable)
• <details> → Expand/collapse content
• <summary> → Heading for <details>
Media/interactive semantic tags
• <audio> → Audio content
• <video> → Video content
• <track> → Text tracks for media (like captions)
• <canvas> → Graphics/drawing
• <svg> → Scalable Vector Graphics
FRONT END
Css
Syllabus
CSS Syllabus (Basic → Advanced)
1. Introduction to CSS (Basics)
• What is CSS? (Inline, Internal, External CSS)
• CSS Syntax (Selectors, Properties, Values)
• CSS Comments
• Applying CSS to HTML (style tag, external stylesheet)
• CSS Colors (RGB, HEX, HSL, Named colors)
• CSS Units (px, %, em, rem, vh, vw)
2. CSS Selectors
• Basic Selectors → element, .class, #id
• Grouping & Universal Selector *
• Attribute selectors → [type="text"]
• Combinators → div p, div > p, div + p, div ~ p
• Pseudo-classes → :hover, :focus, :nth-child(), :first-child
• Pseudo-elements → ::before, ::after, ::first-line
FRONT END
3. CSS Box Model
• Content, Padding, Border, Margin
• box-sizing: border-box vs content-box
• Outline vs Border
4. CSS Text & Fonts
• Text formatting → color, text-align, line-height, text-transform
• Font properties → font-family, font-size, font-weight, @font-face,
Google Fonts
• Letter & word spacing
5. CSS Backgrounds
• Background color, image, position, repeat, size
• Background gradients (linear, radial, conic)
• Multiple backgrounds
6. CSS Borders & Shadows
• Border styles, rounded corners (border-radius)
• Box shadow (box-shadow)
• Text shadow (text-shadow)
7. CSS Positioning & Display
• Display types → block, inline, inline-block, none
FRONT END
• Position → static, relative, absolute, fixed, sticky
• Z-index
• Overflow (hidden, scroll, auto)
• Float & Clear
8. CSS Flexbox (Responsive Layout)
• Flex container properties (display: flex)
• Direction (flex-direction)
• Alignment (justify-content, align-items, align-content)
• Wrapping (flex-wrap)
• Order, flex-grow, flex-shrink, flex-basis
9. CSS Grid
• Grid container (display: grid)
• Grid template rows/columns
• Grid gap
• Grid area (naming & placing items)
• Implicit & explicit grids
• Responsive grid layouts
10. CSS Transitions & Animations
• CSS Transitions → transition-property, transition-duration, ease-in,
ease-out
FRONT END
• CSS Animations → @keyframes, animation-duration, animation-
delay, infinite
• Transformations → rotate, scale, skew, translate
11. CSS Advanced Topics
• CSS Variables (--var)
• CSS Functions → calc(), min(), max(), clamp()
• CSS Filters → blur, grayscale, brightness, etc.
• CSS Masks & Clip-path
• CSS Blend modes (mix-blend-mode, background-blend-mode)
12. Responsive Web Design
• Media Queries (@media)
• Mobile-first & Desktop-first design
• Fluid typography & layouts
• CSS Units for responsiveness (em, rem, vh, vw)
13. CSS Frameworks & Preprocessors
• Bootstrap (basics of grid, components)
• Tailwind CSS (utility-first CSS)
• Sass / SCSS (variables, nesting, mixins, partials)
14. Modern CSS & Best Practices
FRONT END
• CSS Grid + Flexbox together
• CSS Custom Properties
• Dark Mode with CSS (prefers-color-scheme)
• CSS Cascade Layers (@layer)
• Performance Optimization (minification, critical CSS)
Content
CSS Properties Syllabus (Basic → Advanced)
1. Text & Font Properties
• color → text color
• font-family → font type
• font-size → size of text
• font-weight → boldness (normal, bold, 100–900)
• font-style → normal, italic, oblique
• text-align → left, center, right, justify
• text-decoration → none, underline, overline, line-through
• text-transform → uppercase, lowercase, capitalize
• line-height → space between lines
• letter-spacing → space between letters
• word-spacing → space between words
• text-indent → first line indentation
• direction → ltr, rtl
2. Background & Colors
FRONT END
• background-color
• background-image
• background-repeat → repeat, no-repeat
• background-position → top, bottom, center, x% y%
• background-size → cover, contain, auto
• background-attachment → scroll, fixed, local
• background-clip → border-box, padding-box, content-box
• opacity → 0 to 1
3. Box Model
• margin → space outside element
• margin-top, margin-right, margin-bottom, margin-left
• padding → space inside element
• padding-top, padding-right, padding-bottom, padding-left
• border → border shorthand
• border-width, border-style, border-color
• border-radius → rounded corners
• width, height
• max-width, min-width, max-height, min-height
• box-sizing → content-box, border-box
4. Display & Layout
• display → block, inline, inline-block, flex, grid, none
FRONT END
• visibility → visible, hidden, collapse
• overflow → visible, hidden, scroll, auto
• overflow-x, overflow-y
• float → left, right, none
• clear → left, right, both, none
• position → static, relative, absolute, fixed, sticky
• top, left, right, bottom
• z-index → stack order
• clip-path → create shapes
• cursor → pointer, default, move, not-allowed
5. Flexbox Properties
• display: flex
• flex-direction → row, row-reverse, column, column-reverse
• flex-wrap → nowrap, wrap, wrap-reverse
• justify-content → flex-start, flex-end, center, space-between, space-
around
• align-items → flex-start, flex-end, center, stretch, baseline
• align-content → flex-start, flex-end, center, space-between, space-
around, stretch
• order → element order in flex
• flex-grow, flex-shrink, flex-basis
6. Grid Properties
FRONT END
• display: grid
• grid-template-columns, grid-template-rows
• grid-column, grid-row
• grid-gap / gap
• justify-items, align-items
• justify-content, align-content
• grid-auto-flow → row, column
7. Effects & Styling
• box-shadow → shadow around element
• text-shadow → shadow for text
• outline → border outside element
• outline-width, outline-style, outline-color
• filter → blur, brightness, contrast, grayscale, sepia, hue-rotate, invert,
saturate, drop-shadow
• clip-path → shapes
• mix-blend-mode, opacity
8. Transitions & Animations
• transition-property, transition-duration, transition-timing-function,
transition-delay
• transform → translate(x,y), scale(), rotate(), skew()
• animation → shorthand
• @keyframes → define animation steps
FRONT END
• animation-name, animation-duration, animation-timing-function,
animation-delay, animation-iteration-count, animation-direction,
animation-fill-mode
9. Lists & Tables
• list-style → none, disc, circle, square
• list-style-type, list-style-position, list-style-image
• border-collapse → collapse, separate (tables)
• border-spacing → space between table cells
• caption-side → top, bottom
10. Responsive Design / Units
• @media → media queries
• width, height in %, vw, vh, em, rem
• min-width, max-width, min-height, max-height
• calc() → dynamic sizes
• box-sizing → border-box (helps with responsive layout)
11. Pseudo-classes & Pseudo-elements
• :hover, :active, :focus, :visited, :first-child, :last-child, :nth-child(n)
• ::before, ::after, ::first-letter, ::first-line
12. Other Useful Properties
• overflow-x, overflow-y → horizontal/vertical scroll
FRONT END
• white-space → nowrap, pre, normal
• word-break → break-all, keep-all, normal
• visibility → visible, hidden
• pointer-events → none, auto
• border-width → thickness
• border-style → solid, dashed, dotted, double, groove, ridge, inset, outset, none
• border-color → color
• border-top, border-right, border-bottom, border-left → each side
Selectors
These are used to select HTML elements to apply styles. I’ll organize them from
basic to advanced.
1. Basic Selectors
Selector Usage Example
* Universal selector – selects all elements * { margin: 0; }
element Selects specific HTML tag p { color: blue; }
.class Selects elements with a class .box { background: red; }
#id Selects element with an ID #header { font-size: 20px; }
2. Grouping & Combining
FRONT END
Selector Usage Example
selector1, h1, h2 { color:
Group multiple selectors
selector2 green; }
selector1 Descendant selector – elements inside
div p { color: blue; }
selector2 another
3. Attribute Selectors
Selector Usage Example
[attr] Elements with attribute [title] { color: red; }
[attr=value] Attribute equals value [type="text"] { width: 200px; }
[attr~=value] Attribute contains word [class~="menu"] { font-weight: bold; }
`[attr =value]` Attribute starts with value
MARGIN
in short
ChatGPT said:
The margin property in CSS sets the outer space around an element (outside its
border).
• margin: 20px; → same on all sides
• margin: 10px 20px; → top/bottom 10px, left/right 20px
• margin: 10px 20px 30px 40px; → top, right, bottom, left
• auto → often used to center elements
Simply: Margin = outside space, Padding = inside space.
Padding
padding: 20px; → same on all sides
FRONT END
padding: 10px 20px; → top/bottom 10px, left/right 20px
padding: 10px 20px 30px 40px; → top, right, bottom, left
Float
The float property in CSS is used to position an element to the left or right side of its
container, allowing text or inline elements to wrap around it.
Syntax
selector {
float: left | right | none | inherit;
}
List style
list-style-image → Uses an image as the bullet (url('[Link]'))
list-style-position → Places bullet inside or outside the text
list-style → Shorthand for all three (type position image)
display: inline;
Makes an element display in the same line as other elements (no line break).
Hover
Change color, font, or background
Add shadow or border effects
Enlarge or animate an element
Show hidden menus or tooltips
Hover properties (in short):
• color – text color
• background-color – background change
• border / border-radius – border style
FRONT END
• box-shadow – glow/shadow
• transform – scale/rotate
• opacity – transparency
• font-size / font-weight – text style
• transition – smooth effect
cursor
cursor property — used in CSS to change the mouse pointer style when hovering
over an element.
Value Description
default Normal arrow
pointer Hand icon (used for links/buttons)
text I-beam (for text selection)
move Move icon
not-allowed Blocked sign
wait Loading/spinner
crosshair Cross symbol
help Question mark
Display
The display property in CSS defines how an element is shown (its layout behavior)
on a web page.
Common display values:
Value Description
block Starts on a new line, takes full width (e.g., <div>, <p>)
inline Flows in line, takes only needed width (e.g., <span>, <a>)
FRONT END
Value Description
inline-block Acts like inline but allows height/width
none Hides the element completely
flex Enables flexbox layout
Position
The position property in CSS defines how an element is placed on a web page.
Types of Position:
Value Description
static Default position (normal flow of the page)
relative Positioned relative to its normal place
absolute Positioned relative to the nearest positioned parent
fixed Stays fixed relative to the viewport (doesn’t move on scroll)
sticky Acts like relative, but becomes fixed when scrolling past a point