HTML & CSS

$ 220

12 Hours

฿ 7500

HTML & CSS-HTML Styles

Introduction to Web Development

HTML Basics

Understanding HTML Structure
What is HTML?
HTML Document Structure (DOCTYPE, <html>, <head>, <body>)
Basic Tags: <html>, <head>, <title>, <body>
Common HTML Elements
Headings: <h1>, <h2>, <h3>, etc.
Paragraphs: <p>Lists: <ul>, <ol>, <li>Links: <a>Images: <img>Forms: <form>, <input>, <textarea>, <button>
Creating Your First Web Page
Adding text, images, and links
Using <meta> tags for better SEO and user experience

Structuring Web Pages with HTML

HTML Semantic Elements
Headers: <header>, <nav>Main Content: <main>Articles and Sections: <article>, <section>Footers: <footer>
HTML Tables and Forms
Creating Tables: <table>, <tr>, <th>, <td>Forms: <input>, <select>, <textarea>, <button>, and form submission
Hyperlinks and Navigation
Creating Links: Absolute and Relative Links
Linking to External Resources: Images, CSS, JavaScript

Introduction to CSS

What is CSS?
CSS Basics: How Styles are Applied to HTML
Inline, Internal, and External CSS
Selectors: Type, Class, and ID Selectors
CSS Syntax and Structure
CSS Properties: Font Size, Color, Margin, Padding
Basic Styling: Text, Links, Lists, and Images
Units of Measurement: Pixels (px), Percentages (%), Em, Rem

Styling Web Pages with CSS

CSS Box Model
Margin, Padding, Border, Content
Understanding Box-Sizing and Overflow
Styling Text and Typography
Font Families, Sizes, and Weights
Line Height and Text Alignment
Text Color, Background Color, and Highlighting
Working with Colors
Hex, RGB, RGBA, HSL, and HSLA Color Notations
CSS Gradients
CSS Layout Techniques
Display Property: Block, Inline, and Inline-Block
Positioning: Relative, Absolute, Fixed, Sticky
Flexbox Introduction: Aligning Items with Flexbox

Advanced CSS Layouts

CSS Flexbox
What is Flexbox?
Flexbox Container and Items
Aligning Items Horizontally and Vertically
Building Responsive Layouts with Flexbox
CSS Grid
Introduction to CSS Grid Layout
Defining Rows and Columns
Grid Templates and Areas
Building Complex Layouts with Grid
Responsive Design Principles
Introduction to Media Queries
Making Web Pages Mobile-Friendly
Creating Fluid Layouts: Percentage-based Widths, Flexbox, and Grid
Using Viewport Units (vw, vh)

Best Practices and Debugging

Coding Best Practices
Clean Code: Indentation, Commenting, and Readability
Organizing HTML and CSS Files
Reusable Code: Classes and IDs
Accessibility in Web Design: Alt Text for Images, Keyboard Navigation
Debugging HTML and CSS
Browser Developer Tools (Inspect Element)
Common HTML and CSS Errors: Missing Closing Tags, Broken Links, Misaligned Styles
Troubleshooting Layout Issues

Final Project: Build Your Own Website

Project Planning and Structure
Creating a Website Layout and Content Plan
Structuring HTML and Organizing CSS
Building the Website
Implementing Responsive Design with Flexbox and Grid
Styling a Complete Web Page with Text, Images, Links, and Forms
Finalizing the Website
Testing the Website on Different Screen Sizes
Debugging and Ensuring Accessibility

Course Overview:

Duration: 6-8 Weeks
Skill Level: Beginner
Tools & Technologies: HTML, CSS, Code Editor (VS Code, Sublime Text, or any preferred text editor), Web Browser