This 3-day course provides a comprehensive introduction to HTML and CSS for individuals seeking to develop standards-compliant web content with emphasis on contemporary HTML5 and CSS3 standards. The curriculum focuses extensively on HTML5 features and demonstrates techniques for creating HTML5 and CSS3 markup that performs consistently across the broadest possible range of web browsers and devices.
This course establishes the foundational building blocks for any learning pathway that leads to advanced web design or development specializations.
Prerequisites:
You should have experience using a computer operating system such as Windows or Mac OS and familiarity with using browsers to access web content. No previou:s knowledge of web development or coding is required.
Comprehensive Course Outline
Introduction to web development fundamentals
- How web applications function and operate
- Core concepts and principles of HTML and CSS
- Software tools used in web development workflows
- Methods for viewing and accessing deployed web pages
- Five fundamental web development challenges and considerations
How to code, test, and validate web pages
- HTML syntax rules and structure
- CSS syntax rules and syntax conventions
- Using Brackets as your HTML and CSS development environment
- Testing, debugging, and validating HTML and CSS code
How to use HTML for web page structure
- Coding the document head section and metadata
- Creating text elements with semantic meaning
- Organizing and structuring page content logically
- Implementing links, lists, and embedded images
- Building a properly structured complete web page
How to use CSS for element formatting and presentation
- CSS fundamentals and selector techniques
- Specifying measurements and color values accurately
- Working with Cascading Style Sheets and inheritance
- Formatting text with CSS properties and typography
- Building complete web pages using external style sheets
The CSS box model for spacing, borders, and backgrounds
- Understanding the box model concept and structure
- Sizing and spacing page elements appropriately
- Creating web pages that demonstrate sizing and spacing techniques
- Applying borders and background properties to elements
How to use CSS for a responsive page layout
- Floating elements in 2-column and 3-column page layouts
- Creating web pages with a 2-column fixed-width layout design
- Using CSS3 to implement multi-column text layouts
- Positioning elements absolutely and relatively on pages
How to work with lists, links, and navigation menus
- Coding semantic list structures
- Applying CSS formatting to lists
- Creating functional and accessible links
- Building effective navigation menu systems
How to use Responsive Web Design techniques
- Introduction to Responsive Web Design principles and practices
- Implementing fluid layout designs that adapt to screen size
- Applying CSS3 media queries for device-specific styling
- Building web pages that use Responsive Web Design
How to use Flexible Box Layout for layouts and responsive design
- Getting started with Flexible Box Layout and flexbox basics
- Setting flexbox properties and flex container behavior
- Creating responsive web pages using flexbox
How to use Grid Layout for page layouts and responsive design
- Getting started with Grid Layout fundamentals
- Defining grid areas and positioning grid items
- Creating responsive web pages using CSS Grid
- Implementing common page layout patterns with a grid
