FUNDAMENTALS OF WEB DEVELOPMENT TRAINING COURSE

Instructor:

David J. Hark
P. O. Box 201 Shepherdstown, WV 25443-0201
Home/Office: 304-876-2607
Cell: 304-283-2130
dhark@fred.net

Web Development Level 1

Setup & Introduction

Noble Desktop
Web Development Level 1
Building Websites with HTML & CSS
ISBN: 978-1-941333-54-9

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

WYSIWYG

Text-based

Setup & Introduction

Downloading the Class Files

Website Fundamentals

  • What are HTML & CSS?
  • The structure of an HTML tag
  • Graphic file formats (JPEG, PNG, GIF, & SVG)
  • 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
  • The strong & em tags
  • The doctype
  • 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
  • The 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
  • CSS opacity

Div Tags, ID Selectors, & Basic Page Formatting

  • Dividing up content with the div tag
  • Assigning IDs to divs
  • Setting width & max-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
  • Hexadecimal shorthand

HTML5 Semantic Elements & Validating HTML

  • The outline algorithm
  • The header, nav, aside, & footer elements
  • Understanding articles & sections
  • The main element
  • The figure & figcaption elements
  • Checking for errors: validating your code

Section 3

Revolution Travel: Page 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 with main element in Internet Explorer
  • Setting a default font for the page
  • Margin & padding spacing

Floats & Images

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

Coding Links: Images & Page Jumps

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

Section 4

Styling Links

  • Styling the anchor tag
  • The :link, :visited, :hover, :focus, & :active pseudo-classes
  • Ordering link styles

Styling the Navigation

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

Specificity, Shared CSS, & Centering Content

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

Setting the Viewport Meta Tag

  • Disabling mobile browser text size adjustment
  • The viewport meta tag
  • device-width
  • initial-scale
  • maximum-scale

Section 5

Starting a New Site & CSS Background Images

  • Setting a default font
  • Removing default page margin
  • Linking to an external style sheet
  • 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 & margin for text legibility

Hipstirred Layout: Fine-Tuning with the Box Model

  • Removing the extra space below an image
  • 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
  • Vertical alignment & line-height
  • Simple CSS buttons
  • CSS border-radius
  • Reusing class selectors

Section 6

Hipstirred: Hi-Res Images

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

Uploading to a Live Website via FTP

  • Web hosts & domain names
  • Things you’ll need to upload a website
  • Using an FTP client & going live

Creating Columns (Floats & Clearing)

  • Creating a 2-column layout with floats
  • Using the clear property
  • Adding a border between the columns
  • Setting the overflow property to hidden

Introduction to Media Queries

  • Finding an appropriate breakpoint
  • Using a media query to change the layout at a specific screen size
  • Max-width media queries
  • Disabling mobile browser text size adjustment
  • The viewport meta tag
  • Adjusting text size across screens

Bonus Material

Form Basics

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

Submitting Form Data to a Server-Side PHP Script

  • Reviewing the PHP code
  • 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 obfuscate an email link

Challenge: Designing Your Own Styles

  • Coding CSS
  • Tips & ideas

Challenge: Building a Site from Scratch

  • Code a small website using provided designs & assets

Reference Material

  • Listing on Search Engines
  • The Box Model Explained: Padding, Margins, etc.
  • Links to Reference Websites, Online Tools, & More