Course Content
Overview
0/16
HTML5 & CSS3
JavaScript (ES6+ Mastery)
PHP Basics (Core Foundation)
SQL & Database Basics
Laravel Fundamentals
Blade Template Engine
Models & Eloquent ORM
Database Migrations & Seeders
Forms, Validation & Request Handling
Authentication & Authorization
Laravel Middleware
RESTful APIs in Laravel
File Uploads & Storage
Laravel Events, Listeners & Queues
Caching & Performance Optimization
Laravel Security
Laravel Web Development

1. Introduction to HTML

  • What is HTML

  • Structure of an HTML Document

  • DOCTYPE declaration

  • HTML tags, attributes, elements

  • Block vs Inline elements

2. HTML Document Structure

  • <html>

  • <head>

  • <body>

  • Metadata

  • <title>

  • Linking external CSS/JS files

3. Text Formatting Tags

  • <p>, <h1>–<h6>

  • <strong>, <em>

  • <b>, <i>, <u>

  • <mark>, <sub>, <sup>

  • <br>, <hr>

4. List Tags

  • Ordered lists <ol>

  • Unordered lists <ul>

  • Definition list <dl>

5. Hyperlinks & Navigation

  • <a> tag

  • Absolute vs Relative paths

  • Target attribute

  • Email/telephone links

6. Images & Media

  • <img> tag

  • alt, title, srcset

  • <audio> & <video>

  • Controls, autoplay, loop

7. HTML5 Semantic Elements

  • <header>

  • <footer>

  • <nav>

  • <section>

  • <article>

  • <aside>

  • <main>

  • <figure>

  • <figcaption>

8. HTML Forms (Very Important)

  • <form> basics

  • Input types (text, email, number, password, date, file, range, color, etc.)

  • <label>, <input>, <textarea>, <select>, <option>

  • Radio buttons, checkboxes

  • Required, placeholder, pattern

  • Form validation

  • Submit & reset buttons

  • <datalist>

  • <fieldset> & <legend>

9. Tables in HTML

  • <table>

  • <tr>

  • <th>

  • <td>

  • colspan, rowspan

  • <thead>, <tbody>, <tfoot>

10. HTML5 APIs

  • Geolocation API

  • Local Storage

  • Session Storage

  • Web Storage

  • Drag and Drop API

  • Canvas basics

11. Iframes

  • Embedding YouTube

  • Embedding maps

  • Secure iframe attributes (sandbox, allowfullscreen)

12. Accessibility (A11Y)

  • ARIA attributes

  • alt text best practices

  • Keyboard navigation

🎨 CSS3 Syllabus (Beginner → Advanced)

1. Introduction to CSS

  • What is CSS

  • Inline, internal, external CSS

  • Syntax, selectors

  • CSS comments

2. CSS Selectors

Basic Selectors

  • Element selector

  • Class selector

  • ID selector

Advanced Selectors

  • Attribute selectors

  • Pseudo-class selectors

  • Pseudo-element selectors

  • Descendant, child, sibling selectors

3. CSS Colors & Units

  • Color formats: rgb, rgba, hex, hsl

  • Units: px, em, rem, %, vw, vh

  • Opacity

4. Box Model

  • Margin

  • Padding

  • Border

  • Width & height

  • Box-sizing

5. CSS Display Properties

  • block

  • inline

  • inline-block

  • none

  • visibility

  • overflow

6. Backgrounds

  • background-color

  • background-image

  • background-repeat

  • background-position

  • background-attachment

  • background-size

7. Typography

  • font-family

  • font-size

  • font-weight

  • line-height

  • text-align

  • text-transform

  • text-decoration

  • letter-spacing

  • word-spacing

8. CSS Positioning

  • static

  • relative

  • absolute

  • fixed

  • sticky

  • z-index

9. CSS Flexbox (Very Important for Layouts)

  • Flex container, flex items

  • justify-content

  • align-items

  • flex-direction

  • flex-wrap

  • align-self

  • gap

  • Responsive layouts with flex

10. CSS Grid Layout (Modern)

  • Grid container & items

  • grid-template-rows

  • grid-template-columns

  • grid-template-areas

  • auto-fit & auto-fill

  • gap

  • Creating full webpage layouts

11. CSS Transitions & Animations

  • transition-property

  • transition-duration

  • transition-timing-function

  • @keyframes

  • animation properties

12. CSS Transformations

  • rotate

  • scale

  • skew

  • translate

  • 2D & 3D transforms

13. CSS Pseudo Classes & Elements

  • :hover

  • :focus

  • :active

  • :visited

14. Responsive Web Design (RWD)

  • Media queries

  • Mobile-first design

  • Responsive typography

  • Responsive images

  • Viewport meta tag

Previous
Next
www.datec.in