Building web sites with modern Html and CSS

Last modified: 2022-09-22

Audience

Web developers

Duration

4 days

Prerequisites

Navigating the web and using Google search

Description

HTML is the language of the web. All web pages are built with HTML and CSS. Although HTML is not hard to learn, it is a challenge to use correctly. There are lots of pitfalls for newbies. And a lot of tutorials and articles on the internet are now obsolete.

CSS controls styling. It allows you to style the web and change how pages are displayed. (Colors, fonts, sizes, positioning, etc.)

This course will teach you how to use Modern HTML and CSS to build web sites.

Course Outline

HTML Basics

  • Tags
  • Attributes
  • Comments
  • Closing Tags
  • Containers and enclosing tags
  • Basic structure: body, head, title

Tooling

  • Editor (Visual Studio Code)
  • Support (Can I Use.com)
  • Validators (w3c)
  • Performance (Lighthouse)
  • Testing (Browserstack.com)
  • Source code repository (GitHub)
  • Play with ideas (Codepen, JsFiddle, StackBlitz, CodeSandbox)
  • Publish your website (Neocities, Netlify, Azure, GitHub Pages)

Content structure

  • Structural tags vs. semantic tags
  • Heading
  • Paragraphs
  • Bold and italic
  • Subscript and superscript
  • White space
  • Line breaks and horizontal rules
  • Quotations
  • Abbreviations and Acronyms
  • Citations and definitions
  • Author (Address)
  • Changes (ins, del, s)

Lists

  • Ordered lists
  • Unordered lists
  • Definition list
  • Nested list

Links

  • Types of links
  • Relative, absolute and external link
  • Folder structure
  • Open link in new tab
  • Link to email
  • Link to an anchor

Images

  • img tag
  • Width and height
  • Alignment
  • Image types (png, jpeg, webp, etc)
  • Vector images
  • figure and figcaption
  • picture and srcset

Tables

  • Headings
  • Columns
  • Rows

Forms

  • Text input, password, multi-line
  • Radio button, checkbox, option list
  • Submit, reset, validation
  • Email, url, date, search
  • Action, method
  • Hidden input
  • Labels and placeholder
  • Fieldset and legend

Media

  • Video
  • Audio
  • Iframes
  • Canvas
  • Svg

CSS Basics

  • Selectors, declarations, properties, values
  • External CSS (link), page CSS (style tag), Inline style
  • Cascading rules, inheritance
  • Foreground and background colors
  • RGB, hexadecimal, HSL, color names
  • Opacity and transparency

CSS and text

  • Character fonts
  • Measures and sizes
  • Pixels, percentage, ems, rem, cm, in, pt, pc
  • Viewport size: vw, vh, vi, vb, vmin, vmax
  • Bold, italic, uppercase, lowercase, underlined
  • Spacing around words and letters, line spacing
  • Alignment: left, right, center, justified
  • vertical and horizontal alignment
  • Paragraph indent
  • Drop shadow
  • Pseudo-classes: first-letter, first-line, link, hover, active, focus

CSS and Boxing

  • Dimensions (width, height, min-width, max-width)
  • Overflow
  • Borders, margins and padding
  • Border styling, colors and images
  • Centering
  • display types: inline, block, none
  • Visibility
  • Box shadow
  • Rounded corners (border-radius)

Positioning

  • Types: static, relative, absolute, fixed
  • Z-index

Grids

  • Rows and columns
  • Grid items
  • Sizing elements (fr units)
  • Alignment
  • Gap

Flexbox

  • Containers and items
  • Vertical and horizontal flow
  • Gaps and spacing
  • Alignment

CSS with tables and lists

  • Lists and pins
  • Tables and properties
  • Striping tables (even odd)
  • Forms and label layout
  • Cursor

Responsive Web Design

  • Viewport
  • Media queries
  • Images
  • Examples

Transitions and animations

  • Transitions between state
  • Transitions between pages
  • Animating elements

Introduction to Bootstrap

  • Class system
  • Layout and Breakpoints
  • Containers, column grids, gutters
  • Forms
  • Components: Cards, Buttons, Alerts, Modal, Navbar, Toasts