FUNDAMENTALS OF WEB DEVELOPMENT TRAINING COURSE

Web Development Level 1

Setup & Introduction

Noble Desktop
Web Development Level 1
Building Websites with HTML5 & CSS3
ISBN: 978-1-941333-17-4

Free Web Page Editors, HTML Editors, Web Page Builders, and Website Builders

WYSIWYG

Text-based

Website Fundamentals

  • What are HTML & CSS?
  • The structure of an HTML tag
  • Graphic file formats
  • File naming conventions

HTML vs. XHTML Syntax

  • Differences between HTML & XHTML syntax

Before You Begin

  • Choosing a code editor to work in
  • Downloading the latest browsers
  • Supported browsers
  • Required software
  • Recommended software
  • Installing packages into Sublime Text to boost functionality

Section 1

Setting Up: Do This Before Other Exercises!

  • Setting up your class files

Coding Basics: Intro to HTML Syntax

  • The HTML, head, title, & body tags
  • Headings, paragraphs, & lists
  • strong & em tags
  • The doctype declaration (DTD)
  • The lang attribute
  • The meta tag & the unicode character set

Coding Links: Absolute & Relative URLs

  • Anchor tags & hrefs
  • Linking to other websites
  • Linking to pages within a website
  • Opening a link in a new browser window/tab

Adding Images

  • The break tag
  • The image tag & source attribute
  • Using the width, height, & alt attributes
  • Using horizontal rules

Intro to Cascading Style Sheets (CSS)

  • The style tag
  • Tag selectors
  • font-size, font-family, color & line-height properties
  • Hexadecimal color codes

Section 2

CSS Class Selectors

  • The class attribute
  • CSS class selectors
  • The span tag

The Div Tag & Basic Page Formatting

  • Creating divisions with the div tag
  • Setting a div width
  • CSS background-color
  • Adding padding inside a div
  • Centering content
  • CSS borders
  • CSS shorthand & the DRY principle

Using Browser Developer Tools

  • Opening the DevTools in Chrome
  • Editing HTML in the DevTools Elements panel
  • Enabling, disabling, & editing CSS in the DevTools
  • Using DevTools to fine tune your CSS

HTML5 Semantic Elements

  • The outline algorithm
  • The header, nav, aside, & footer elements
  • Understanding articles and sections
  • The main element
  • The figure & figcaption elements
  • Validation

Section 3

Fluid Layout & Max-Width

  • Making images fluid
  • divs for presentational style
  • Assigning IDs to divs
  • Assigning max-width to content
  • Hexadecimal shorthand

Revolution Travel: Real-World Layout

  • Organizing content into semantic sections
  • Adding images
  • Tagging headings

The Box Model

  • What is the box model?
  • Setting div width
  • Fixing a display issue in Internet Explorer
  • Setting page defaults for font styles
  • Padding & margin spacing

Floats & Images

  • Adding a hero image
  • Fluid images
  • Floating images
  • Class selectors
  • Margins

Section 4

Coding Links: Images & Page Jumps

  • Anchor tags & relative URLs
  • Wrapping links around images
  • External links (using the target attribute)
  • Links within a page

Styling Links

  • Styling the anchor tag
  • The :link, :visited, :active, and :hover pseudo-classes
  • LoVe/HAte: ordering link styles

Styling the Navigation

  • Semantically correct navigation
  • Overriding default list styles
  • CSS navigation styles
  • Using descendant selectors

Shared CSS & Centering Content

  • Moving embedded styles into an external CSS file
  • Sharing styles across a site
  • The text-align property
  • Centering divs

Section 5

Setting the Viewport Meta Tag

  • The viewport meta tag
  • device-width
  • initial-scale
  • maximum-scale

HTML & CSS Wireframe

  • Stacking sections
  • Creating a placeholder style
  • Linking to an external stylesheet
  • Using DevTools to unpack the box model

CSS Background Images

  • CSS background images
  • background-position
  • background-repeat
  • background-size

Fun with Fonts

  • How to use Google Fonts
  • Safe fallbacks in the font stack
  • Improving line-height and margin for legibility

Section 6

Hipstirred Layout: Fine Tuning with Box Model

  • Removing default page margin
  • Setting a max-width
  • Outer & inner wrappers
  • The difference between ID & class selectors

CSS Buttons & Floats

  • Styling semantically correct navigation
  • Floats for layout
  • Float insert position
  • Simple CSS buttons
  • CSS border-radius
  • Reusing class selectors

Hipstirred: Hi-Res Images

  • Retina or HiDPI graphics (@2x images)
  • Setting HTML and CSS size to half the image’s native size
  • Hardware pixels vs. reference pixels

Uploading to a Live Website via FTP

  • What is FTP?
  • Using an FTP client & going live

Bonus Material

Form Basics

  • The form tag
  • The input & label elements
  • name & ID attributes
  • The button element

Submitting Form Data to a Server-Side Script

  • Reviewing the PHP script
  • Adding a hidden field to point to a landing page
  • Setting the form action
  • Uploading & testing the form

Spambot Resistant Email Link

  • The mailto protocol for email links
  • Why you should avoid mailto
  • Using JavaScript to encrypt an email link

Designing Your Own Styles

  • Coding CSS
  • Tips & ideas

Reference Material

Listing on Search Engines

The Box Model Explained: Padding, Margins, etc.

Links to Reference Websites, Online Tools, & More