DEV Community

Jeya Lakshmi
Jeya Lakshmi

Posted on

Html css

[](

  1. HTML Basics

What is HTML?

HTML structure (<!DOCTYPE html>, ,

, )

Elements, tags, attributes

Headings, paragraphs, lists

Links ()

Images ()

  1. Text Formatting

Bold, italic, underline

Superscript, subscript

Quotations & comments

  1. Forms

Input types (text, email, number, password, checkbox, radio)

Textarea

Select dropdown

Labels

Form validation attributes

Form submit & reset

  1. Media

Audio

Video

Iframe

Picture element

  1. Tables
, ,

,

Rowspan & colspan

Table styling basics

  1. Semantic HTML (VERY IMPORTANT)

,

,

,

Accessibility basics (alt, aria)

  1. HTML5 APIs

LocalStorage / SessionStorage

Geolocation

Drag & Drop

Canvas (basic)

CSS Syllabus

  1. CSS Basics

Syntax, selectors, properties

Inline, internal, external CSS

  1. Selectors

Class, ID, universal

Attribute selectors

Pseudo-class (:hover, :focus)

Pseudo-element (::before, ::after)

  1. Box Model

Margin, padding

Border

Width, height

box-sizing

  1. Display & Positioning

Inline, block, inline-block

float

position (static, relative, absolute, fixed, sticky)

  1. Layout (VERY IMPORTANT)

Flexbox (all properties)

Grid (rows, columns, template, gap)

  1. Colors & Backgrounds

Color formats (hex, rgb, hsl)

Gradients

Background-image, position, repeat

  1. Typography

Font-family

Font-size, weight

Line-height, letter spacing

  1. Transitions & Animations

Transition property

Keyframes animation

  1. Media Queries

Responsive design basics

Breakpoints

  1. CSS Functions

calc()

var()

Custom properties (CSS variables)

Bootstrap Syllabus (v5)

  1. Bootstrap Basics

Grid system (containers, rows, columns)

Breakpoints

Utility classes

  1. Layout

Flex utilities

Spacing utilities (m-, p-)

Display utilities (d-flex, d-none)

  1. Components

Navbar

Carousel

Cards

Accordion

Dropdowns

Modal

Alerts

Tooltips & Popovers

Pagination

Badges & Buttons

  1. Forms

Form controls

Input groups

Validation styles

  1. Helpers

Ratio

Position helpers

Overflow

Text utilities

  1. Customization

Customizing colors

Theme customization

Using Bootstrap with Sass

SASS / SCSS Syllabus

  1. Sass Basics

What is Sass?

.sass vs .scss

How to install/use (CLI, VS Code extensions)

  1. Variables

Declaring and using variables

Colors, fonts, spacing variables

  1. Nesting

Nested selectors

Nested properties

  1. Partials & Import

Splitting CSS files into components (_header.scss, _buttons.scss etc.)

Main style import

  1. Mixins

What is a mixin?

Reusable functions

Adding parameters

  1. Functions

Color functions (lighten, darken)

Math operations

Custom functions

  1. Extend / Inheritance

@extend keyword

Creating placeholder selectors

  1. Control Directives

@if, @else, @for, @each, @while

  1. Modular Structure

7–1 Architecture (industry standard)

abstracts/

base/

components/

layout/

pages/

themes/

vendors/

main.scss

)

Top comments (0)