HTML5 and CSS3 Syllabus in Chennai at Payilagam

HTML5 and CSS3 Essentials for Web Designers

HTML5 Essentials for Web Designers

Module 1: HTML Elements

• ➤ Introduction to HTML5 syntax
• ➤ Block-level vs Inline elements
• ➤ Common elements: <div>, <span>, <p>, <a>, <img>, <br>, <hr>
• ➤ Nesting elements correctly

Module 2: HTML Attributes

• ➤ Global attributes: id, class, title, style, lang
• ➤ data Specific attributes: href, src, alt, type, value, placeholder
• ➤ Boolean attributes: checked, disabled, readonly, required

Module 3: HTML Forms

• ➤ <form> element and its attributes (action, method, etc.)
• ➤ Input fields: <input>, <textarea>, <select>, <option>, <button>
• ➤ Fieldsets, legends, and labels
• ➤ Form validation (required, pattern, minlength, maxlength)

Module 4: HTML Lists

• ➤ Ordered Lists: <ol>, <li>
• ➤ Unordered Lists: <ul>, <li>
• ➤ Description Lists: <dl>, <dt>, <dd>
• ➤ Nesting and styling lists

Module 5: HTML Tables

• ➤ Creating tables with <table>, <tr>, <th>, <td>
• ➤ Table structure: <thead>, <tbody>, <tfoot>
• ➤ Merging cells with colspan and rowspan
• ➤ Table accessibility and semantics

Module 6: Semantic HTML

• ➤ Importance of semantic elements for SEO & accessibility
• ➤ Elements: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>
• ➤ When and where to use semantic tags

Module 7: HTML Media

• ➤ Images: <img>, srcset, alt, picture
• ➤ Video: <video>, controls, autoplay, loop, muted
• ➤ Audio: <audio>, controls, autoplay, loop, preload
• ➤ Embedding YouTube and other media

Module 8: Input Types

• ➤ Text-based: text, email, password, search, url, tel
• ➤ Choice-based: checkbox, radio
• ➤ Date/time: date, datetime-local, time, month, week
• ➤ Others: file, color, range, number, hidden

CSS3 Essentials for Web Designers

Module 1: CSS Selectors

• ➜ Basic selectors: element, class, ID
• ➜ Grouping and combining selectors
• ➜ Attribute selectors
• ➜ Combinators: descendant, child (>), adjacent sibling (+), general sibling (~)

Module 2: Box Model

• ➜ Understanding content, padding, border, and margin
• ➜ Using box-sizing: border-box
• ➜ Visualizing box dimensions with dev tools
• ➜ Margin collapsing

Module 3: Display Property

• ➜ block, inline, inlineblock, none flex
• ➜ grid
• ➜ visibility: hidden vs display: none

Module 4: Positioning

• ➜ Static, Relative, Absolute, Fixed, Sticky
• ➜ Using top, right, bottom, left with positioning
• ➜ Z-index and stacking context

Module 5: Flexbox

• ➜ Introduction to display: flex
• ➜ Main axis vs cross axis
• ➜ Properties: justify-content, align-items, align-content, flex-wrap
• ➜ Flex item properties: flex, flex-grow, flex-shrink, flex-basis, order

Module 6: CSS Grid

• ➜ Introduction to grid layout
• ➜ Creating columns and rows using grid-template-columns and grid-template-rows
• ➜ Placing items with grid-column, grid-row
• ➜ Grid gap, alignment, and nested grids