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
🚀 Build modern websites with HTML5 and CSS3 Training in Chennai at Payilagam, the best software training institute in Chennai and gain hands-on experience in real-time projects!
Join Now
