BASIC WEB CRASH COURSE

Overview

What you’ll learn

• Overview of front-end web technologies including HTML, CSS, JavaScript
• How to use a text editor, FTP client, and Google Chrome web developer tools
• Collecting user data through the Forms tool in Google Drive
• Embedding media content, including images and YouTube videos
• Registering a domain name and deploying to a web server
• Quickly publishing a site with Weebly and Wordpress.com
• Sandbox time with 1-on-1 support from our instructional team

Prerequisites

• The ability to type text on a computer (e.g. write an email, edit a Word document)
• Access to a computer with macOS/Windows/Linux (must have permission to install programs)
• We’ll be installing Google Chrome, Sublime Text, and Filezilla
• Google Account (ie Gmail account)
• Experience using a variety of websites

Course material

• Sample Code
• Sample Website (inspired by this)
• Tutorial
• Slide Deck

Schedule

1pm

• Course overview
  • See Outcomes
  • Hackertyper.com
  • Chrome Dev Tools
• Live demo - your first HTML page
  • Mozilla Thimble
  • HTML Element References
    • Mozilla Dev Network - HTML Element Reference
    • w3schools
• Intro - slides
  • Early history of HTML, History of HTML5, Getting Started with HTML (everything from THE source)

1:50pm

• We’ll use Sublime Text to build a web page from scratch with .html files
• Create directory (aka folder) with your name, lowercase and no spaces, eg “nicksuch”
• Create and save test.html in your directory
• <iframe width="560" height="315" src="http://www.youtube.com/embed/18-xvIjH8T4" style="border-width:0;" allowfullscreen></iframe>

YouTube embed - sample video, click Share->Embed Video

• add “http:” to src to make this work locally

• Twitter embed - sample tweet, click More->Embed Tweet
  • add “http:” to script src to make this work locally
• Special Characters - %20 & - official W3C Reference
• CSS practice - W3Schools, Mozilla Dev Network, CSS Tricks
  • Hex Color codes: ColourLovers, Adobe Kuler, Color Scheme Designer
  • Web Safe Fonts, Google Fonts
  • 4 different ways to use CSS
  • CSS Selectors

2:30pm

• Break

2:40pm

The Plan

• Why should we make a website?
• Create business website
• Register domain
• Upload to host
• Promote

3:00pm

• 4 pages
  1. Home - index.html Has image, links
  2. About - about.html Has embedded YouTube video
  3. Contact - contact.html Has embedded Google Form
  4. Products - products.html Has Table of products
• Make Home page look great, it will be our template
• COPY THIS CSS

3:30pm

• About Page - YouTube embed
• <iframe src="https://docs.google.com/forms/d/1qdS7S4NEp4Vud0wOtTuJq7jT7JxNvgV_lH3tBXTxzaE/viewform?embedded=true" width="760" height="500" style="border-width:0;" marginheight="0" marginwidth="0">Loading...</iframe>

Contact Page - Google Forms sample embed

3:50pm

• Break

4pm

• Products Page - PayPal link generator, sample page
• Going Live
  • Domain Registration - GoDaddy, NameCheap, Hover
  • Subdomains (example: http://jobs.bufferapp.com/)
  • Web Hosting Providers - FatCow, DreamHost, HostGator
• Sample FTP login with FileZilla

4:45pm

The “Easy Way”

• Weebly - beginner’s guide, sample Weebly site
• Wordpress.com - 19% of the Web uses this, Sample Wordpress.com site
• SquareSpace
• Content Management Systems - a comparison * Wordpress.org * See also: Drupal, Joomla
• Static Site Generators
  • We love Jekyll
  • Free hosting with GitHub Pages

5:00pm

• Break

5:10pm

Promotion

• Social Media
  • Do a Name Check
  • Get Twitter, Facebook, Instagram, YouTube, Google+
• Email Marketing
  • MailChimp
• SEO
• Google Analytics - sample view

Managing your business

• Use the Google suite: Gmail, Google Calendar, Google Docs
• Try Trello for TODO lists
• Communicate internally with Slack

Sandbox Time

• Rebuild a well-known page from scratch (try Twitter’s home page)
• Make it responsive with Bootstrap
• Add a theme with Themeforest
• Publish for free using Github Pages or Dropbox
• Discover the power of HTML 5, and start Smashing
• Make it look good with Design
• Make it move with Javascript and JQuery
• Collect email addresses quickly with LaunchRock (sample page)
• Is your HTML Valid? Find out with http://validator.w3.org/
• Migrating a site and preserving SEO rank (from UK alum Matt Cutts!)
• Centering an element is actually kind of hard. Try this and this.
• Take it up a level and see if you can get Meteor to work

6pm

• So long, and thanks for all the fish!

Outcomes

• Create Basic HTML and CSS files from scratch
• Use Chrome Developer Tools
• Upload files to a server using FTP
• Collect form data with Google Drive
• Collect payments with Paypal
• Build a complete online presence to promote your business
• (optional) Register your own Domain Name
• (optional) Buy your own web server space

Additional resources

More learning

• Codecademy - interactive Web Development tutorials
• From email newsletters and online forms to $25k in three months
• Markdown
• Awesome Inc U - Web Development Level 2 - Deep Dive
• Awesome Inc U - Udemy courses
• A Practical Guide to HTML and CSS

WYSIWYG web tools

• Wix
• Weebly
• Wordpress.com
• Squarespace

Embeddable forms

• Google Forms
• SurveyMonkey

Email Marketing

• Mailchimp

Payment

• Stripe
• Square
• PayPal
• Shopify

Notes

Vocabulary

• HTML - HyperText Markup Language
• CSS - Cascading Style Sheets
• Document
• Element
• Tag
• Attribute
• Value
• CMS - Content Management System
• HTTP - hypertext transfer protocol

FTP Access Credentials

Download and install FileZilla

• Host: projects.awesomeincu.com
• Port: 22
• Protocol: SFTP
• Logon Type: Normal
• User: (ask instructor)
• PW: (ask instructor)