Icon [email protected]
img img img img img

HTML & CSS

Module 1: Introduction to Web Development

  • How websites work

  • Client-server architecture

  • Introduction to HTML, CSS, and JavaScript

  • Web development tools (browsers, text editors, IDEs)

  • Setting up your development environment

Module 2: HTML Fundamentals

HTML Basics

  • HTML document structure (<!DOCTYPE>, <html>, <head>, <body>)

  • Basic HTML tags (<h1>-<h6>, <p>, <br>, <hr>)

  • HTML attributes

  • Comments in HTML

Text Formatting

  • Headings and paragraphs

  • Text formatting tags (<strong>, <em>, <mark>, etc.)

  • Special characters and symbols

Links and Images

  • Anchor tags (<a>) and href attribute

  • Linking to external pages, internal pages, and page sections

  • Image tags (<img>) and attributes

  • Image formats for the web (JPG, PNG, GIF, SVG, WebP)

  • Figure and figcaption

Lists

  • Ordered lists (<ol>)

  • Unordered lists (<ul>)

  • Definition lists (<dl>, <dt>, <dd>)

  • Nested lists

Module 3: HTML Intermediate Concepts

Tables

  • Table structure (<table>, <tr>, <td>, <th>)

  • Table headers and footers

  • Colspan and rowspan

  • Styling tables with CSS

Forms

  • Form element (<form>) and attributes

  • Input types (text, password, email, number, etc.)

  • Textarea, select, and option elements

  • Radio buttons and checkboxes

  • Buttons (<button>, <input type="submit">)

  • Form validation

  • Fieldset and legend

Semantic HTML

  • Semantic vs non-semantic elements

  • <header>, <footer>, <nav>, <main>

  • <article>, <section>, <aside>

  • <figure>, <figcaption>

  • Accessibility considerations (ARIA attributes)

Module 4: CSS Fundamentals

Introduction to CSS

  • Inline, internal, and external CSS

  • CSS syntax (selectors, properties, values)

  • CSS comments

  • The cascade and specificity

CSS Selectors

  • Element selectors

  • Class and ID selectors

  • Attribute selectors

  • Pseudo-classes and pseudo-elements

  • Combinators (descendant, child, adjacent sibling, general sibling)

Colors and Backgrounds

  • Color values (keywords, HEX, RGB, RGBA, HSL, HSLA)

  • Background properties (color, image, repeat, position, size)

  • Opacity vs RGBA/HSLA transparency

  • Gradients (linear and radial)

Text Styling

  • Font properties (family, size, weight, style)

  • Text properties (alignment, decoration, transformation)

  • Line height and letter spacing

  • Text shadows

  • Web fonts (@font-face, Google Fonts)

Module 5: CSS Box Model and Layout

Box Model

  • Understanding margin, border, padding, content

  • Box-sizing property

  • Margin collapse

  • Display property (block, inline, inline-block)

Positioning

  • Static, relative, absolute, fixed, sticky positioning

  • Z-index and stacking context

  • Float and clear

  • Overflow property

Flexbox

  • Flex container and items

  • Main axis and cross axis

  • Flex-direction, justify-content, align-items

  • Flex-wrap, align-content

  • Flex-grow, flex-shrink, flex-basis

CSS Grid

  • Grid container and items

  • Grid template columns and rows

  • Grid gap

  • Grid line placement

  • Grid areas

  • Responsive grid patterns

Module 6: Responsive Design

  • Mobile-first approach

  • Viewport meta tag

  • Media queries (min-width, max-width)

  • Responsive units (rem, em, vh, vw, %)

  • Responsive images (srcset, sizes)

  • Common responsive patterns (fluid layout, column drop, etc.)

  • CSS frameworks overview (Bootstrap, Tailwind, etc.)

Module 7: Transitions, Animations, and Transforms

  • CSS transitions (property, duration, timing function, delay)

  • CSS transforms (translate, rotate, scale, skew)

  • CSS animations (@keyframes, animation properties)

  • Performance considerations

Module 8: Advanced CSS Topics

  • CSS variables (custom properties)

  • CSS preprocessors (SASS/SCSS overview)

  • BEM methodology

  • CSS architecture

  • Browser prefixes and feature detection

  • CSS methodologies (OOCSS, SMACSS, ITCSS)

Module 9: Project Work

  • Building a complete website from scratch

  • Portfolio website project

  • E-commerce product page

  • Blog layout

  • Dashboard UI

Module 10: Deployment and Best Practices

  • Code organization and file structure

  • Performance optimization

  • Cross-browser compatibility

  • Basic SEO for HTML

Brochure: Download
Course includes:
  • img Level Certificate
  • img Duration 45 Days
  • img Certifications Yes
  • img Placement 100% Assistence
logo-image star image-editing star star star star star