This 3-day course is designed as an introduction to HTML and CSS for those who want to learn to develop standards-compliant web content, with a focus on current HTML5 and CSS3 standards. It focuses on the features of HTML5, covering how to create HTML5 and CSS3 markup that will work well on the widest possible variety of web browsers.
This course is the first building block in any learning plan leading to additional web design or development.
Prerequisites
It is assumed you have experience using a computer operating system such as Windows or Mac OS and that you have experience using browsers to access the web as an end-user. No prior knowledge of web development is required.
Course Outline
Introduction to web development
- How web applications work
- An introduction to HTML and CSS
- Tools for web development
- How to view deployed web pages
- Five critical web development issues
How to code, test, and validate a web page
- The HTML syntax
- The CSS syntax
- How to use Brackets to work with HTML and CSS files
- How to test, debug, and validate HTML and CSS files
How to use HTML to structure a web page
- How to code the head section
- How to code text elements
- How to structure the content of a page
- How to code links, lists, and images
- A structured web page
How to use CSS to format the elements of a web page
- An introduction to CSS
- How to specify measurements and colors
- How to work with Cascading Style Sheets
- How to work with text
- A web page that uses external style sheets
The CSS box model for spacing, borders and backgrounds
- An introduction to the box model
- How to size and space elements
- A web page that illustrates sizing and spacing
- A web page that uses borders and backgrounds
How to use CSS for page layout
- How to float elements in 2- and 3-column layouts
- Two web pages that use a 2-column, fixed-width layout
- How to use CSS3 to create text columns
- How to position elements
How to work with lists, links, and navigation menus
- How to code lists
- How to format lists
- How to code links
- How to create navigation menus
How to use Responsive Web Design
- Introduction to Responsive Web Design
- How to implement a fluid design
- How to use CSS3 media queries
- A web page that uses Responsive Web Design
How to use Flexible Box Layout for page layout and RWD
- Getting started with Flexible Box Layout
- How to set flexbox properties
- A responsive web page that uses flexbox
- Getting started with Grid Layout
- How to define the grid areas for elements
- A responsive web page that uses grid
- Common page layouts that use grid