دوره جامع تربیت توسعه دهنده فرانت اند(دوره جامع طراحی وب سایت)

Web Development Fundamentals

• How the Web Works (Client-Server Architecture)
• HTTP/HTTPS Protocols (Basics)
• Domain Names and Hosting
• Introduction to Web Browsers and Developer Tools
• Structure of an HTML Document
• DOCTYPE, html, head, body

HTML Basics

• Elements, Tags, and Attributes
• Headings (h1 – h6)
• Paragraphs and Line Breaks
• Horizontal Rules
• Comments in HTML

Text Formatting

• Bold, Italic, Underline, Strikethrough
• Superscript and Subscript
• Strong and Emphasis (Semantic vs Presentation)
• Blockquote, Pre, Code

Entities and Symbols

• HTML Entities (<, >, &, ©, etc.)
• Emoji and Special Characters
• Non-breaking Space (&nbsp;)

Hyperlinks

• Anchor Tag (a)
• Absolute vs Relative URLs
• Opening Links in New Tab (target=”_blank”)
• Internal Links (ID-based navigation)
• Email and Telephone Links
• Download Attribute
• Link States (Styling with CSS)

Semantic Elements (SEO and Accessibility)

• header, nav, main, section, article, aside, footer

Images

• Image Tag (img)
• src, alt, width, height Attributes
• Image Formats (JPEG, PNG, SVG, WebP, AVIF)
• Responsive Images (srcset, sizes)
• Figure and Figcaption

Video and Audio

• Video Tag (video) – Controls, Autoplay, Loop, Muted, Poster
• Audio Tag (audio) – Controls, Autoplay, Loop
• Source Tag (Multiple Formats – MP4, WebM, OGG)

Lists

• Unordered Lists (ul)
• Ordered Lists (ol) – Types and Start Attribute
• Definition Lists (dl, dt, dd)
• Nested Lists
• List Styling (CSS)

Tables

• Table Structure (table, tr, th, td)
• thead, tbody, tfoot
• colspan and rowspan
• Caption and Scope

Forms (Critical for Real Projects)

• Form Tag (form) – action, method (GET vs POST)
• Input Types (text, password, email, number, tel, url, date, time, color, range, file, hidden, submit, reset, button)
• Textarea
• Select and Option (Dropdown)
• Checkbox and Radio Buttons
• Label and Fieldset
• Datalist (Autocomplete)
• Form Validation (required, min, max, pattern, minlength, maxlength)
• New HTML5 Input Attributes (placeholder, autofocus, disabled, readonly, multiple)
• Form Submission and Handling (Introduction to FormData)

Introduction to CSS

• What is CSS and Why We Need It
• CSS Syntax (Selector, Property, Value)
• Inline, Internal, and External CSS
• CSS Comments
• CSS Specificity and Cascade (Basics)

Normalizing CSS

• Browser Default Styles
• CSS Reset vs Normalize.css
• Using Normalize.css
• Universal Selector Reset (*)

Providing CSS

• Linking External Stylesheet (link tag)
• @import Rule (and Why to Avoid It)
• Embedding Styles in HTML (style tag)
• Inline Styles (When to Use)

Basic Selectors

• Universal Selector (*)
• Type Selector (Element)
• Class Selector (.)
• ID Selector (#)
• Grouping Selectors (,)
• Chaining Selectors

Combinator Selectors

• Descendant Selector (space)
• Child Selector (>)
• Adjacent Sibling Selector (+)
• General Sibling Selector (~)

Pseudo-class Selectors

• Dynamic Pseudo-classes (:link, :visited, :hover, :active, :focus)
• Structural Pseudo-classes (:first-child, :last-child, :nth-child, :nth-of-type, :not)
• Form Pseudo-classes (:checked, :disabled, :enabled, :required, :invalid, :valid)
• Target Pseudo-class (:target)
• Root Pseudo-class (:root)

Pseudo-element Selectors

• ::before and ::after (Creating Content with CSS)
• ::first-line and ::first-letter
• ::selection
• ::marker (List Styling)
• ::placeholder (Styling Input Placeholders)

Selectors Specificity

• How Specificity Works (Inline > ID > Class/Attribute > Element)
• Calculating Specificity (0,0,0,0)
• When to Use Important (and Why to Avoid It)
• Specificity and Inheritance

Inheritance

• What Properties Are Inherited (Text, Font, Color)
• Using inherit, initial, unset, revert
• The inherit Keyword in Practice
• Inheritance vs Cascade

Colors

• Color Names (Predefined)
• Hexadecimal (#RRGGBB, #RGB)
• RGB/RGBA (rgb(), rgba())
• HSL/HSLA (hsl(), hsla())
• CurrentColor
• Color Contrast and Accessibility
• Modern Color Functions (color-mix, relative colors – Brief)

Gradients

• Linear Gradients (linear-gradient)
• Radial Gradients (radial-gradient)
• Conic Gradients (conic-gradient)
• Repeating Gradients
• Gradient Patterns
• Gradient with Multiple Colors and Stops

Borders

• Border Width, Style, Color (solid, dashed, dotted, double)
• Border Radius (Rounded Corners)
• Individual Border Sides (top, right, bottom, left)
• Border Image (border-image – Brief)
• Outline (vs Border)
• Box Decoration Break

Shadows

• Box Shadow (box-shadow) – Inset, Blur, Spread
• Text Shadow (text-shadow)
• Drop Shadow Filter (filter: drop-shadow)
• Multiple Shadows

Sizing Elements

• Width and Height (auto, values, %)
• Min-width, Max-width
• Min-height, Max-height
• Aspect Ratio (aspect-ratio property)
• Intrinsic Sizing (fit-content, min-content, max-content)

The Box Model

• Content, Padding, Border, Margin

Overflowing

• Overflow Property (visible, hidden, scroll, auto)
• Overflow-x and Overflow-y
• Margin Collapsing
• Padding and Margin Shorthand
• Negative Margins

Measurement Units

• Absolute Units (px, pt, cm, mm, in)
• Relative Units (%, em, rem, vw, vh, vmin, vmax)
• em vs rem – When to Use Each
• Ch Unit (Character Width)
• Ex Unit
• Using calc() for Dynamic Calculations
• Min(), Max() Functions

Positioning

• Static Positioning (Default)
• Relative Positioning
• Absolute Positioning (Absolute vs Relative Parent)
• Fixed Positioning (Fixed to Viewport)
• Sticky Positioning (Sticky – Mix of Relative and Fixed)
• Z-index and Stacking Context
• Position with Top, Right, Bottom, Left

Introduction to Floating Elements

• When to Use Float (and Why It’s Not Recommended for Layouts)

FlexBox (Modern Layout – Essential)

• Display: flex
• Flex-direction (row, column, row-reverse, column-reverse)
• Flex-wrap (nowrap, wrap, wrap-reverse)
• Justify-content (flex-start, flex-end, center, space-between, space-around, space-evenly)
• Align-items (stretch, flex-start, flex-end, center, baseline)
• Align-content (for Multi-line Flex)
• Flex-grow, Flex-shrink, Flex-basis
• Flex Shorthand
• Align-self (Individual Item Alignment)
• Order (Changing Visual Order)
• Gap (gap, row-gap, column-gap)
• Practical Examples

Grid (Modern Layout – Essential)

• Display: grid
• Grid-template-columns and grid-template-rows
• Fractional Units (fr)
• Repeat() Function
• Minmax() Function
• Auto-fill vs Auto-fit
• Grid Gap (gap, row-gap, column-gap)
• Grid-template-areas (Named Areas)
• Grid-column and Grid-row (Item Placement)

Responsive Design

• Viewport Meta Tag
• Media Types (screen, print, all)
• Media Features (max-width, min-width, orientation, aspect-ratio, prefers-color-scheme, prefers-reduced-motion)
• Breakpoints (Mobile, Tablet, Desktop – Common Breakpoints)
• Mobile-First vs Desktop-First Approach
• Using min-width and max-width
• Logical Operators (and, not, only)

Animations

• Transitions (transition-property, transition-duration, transition-timing-function, transition-delay)
• Easing Functions (ease, linear, ease-in, ease-out, ease-in-out)
• Transform (translate, scale, rotate, skew)
• Transform-origin
• CSS Keyframes Animations (@keyframes)
• Animation Properties (animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode)
• Combining Transitions and Animations
• Performance Considerations (will-change, transform, opacity)

Advanced CSS Features (Modern)

• CSS Variables (Custom Properties – var())
• Using CSS Variables with calc()

CSS Frameworks and Preprocessors (Brief Introduction)

• Introduction to CSS Preprocessors (SASS/SCSS – Benefits)

Projects and Practical Exercises (Throughout the Course)

• Practical projects and exercises integrated throughout the course

• Introduction to Tailwind CSS
• Utility-First Philosophy
• Installation and Setup (CDN, NPM, PostCSS)
• Configuration File (tailwind.config.js)
• Customizing Theme (Colors, Fonts, Screens)
• Typography (Font Size, Weight, Line Height)
• Spacing (Padding, Margin, Width, Height)
• Layout with Flexbox
• Layout with Grid
• Positioning (Relative, Absolute, Fixed, Sticky)
• Borders, Border Radius, and Outline
• Backgrounds and Gradients
• Shadows and Box Shadows
• Transitions and Transformations
• Hover, Focus, Active, and Disabled States
• Responsive Design (Breakpoints: sm, md, lg, xl, 2xl)
• Forms Styling (Input, Select, Checkbox, Radio)
• Group and Peer Modifiers
• Arbitrary Values and Arbitrary Variants
• Reusing Styles with @apply Directive
• Using with Plugins (Typography, Forms, Container)
• Final Project (Tailwind CSS)