This page will contain all our weekly videos and other tutorials. It is organized by week, with the most recent week on the top.
From Weeks Fourteen and Fifteen
On Background images and Footers (bg-images-footer-f20.docx)
This video introduces floating three or more boxes (or other elements) in a rows. It covers:
0:00: Introduction
1:00: Thinking about widths of elements inside another box
2:00: Sizing the boxes in percentages
3:00: Calculating the width of the margins
4:55: The CSS and floating left
7:15: The HTML element skeleton
8:10: Writing the HTML5 code in Brackets, including using comments
11:15: Writing the CSS in Brackets
13:05: Making a second row
14:20: Ensuring that the rows and elements are responsive
14:50: Verifying that the figure width is exactly how I want it
15:15: Concluding remarks on margins between rows and if you have more than three elements in a row
From Week Thirteen
This video discusses Project 2, styling links, and creating your about.html and contact.html pages. It covers:
0:00: Introduction and a review of Project 2: Responsible, Accessible Professional Site assignment
4:20: How to style links (this is review)
9:30: How to create about.html and contact.html
17:00: How to create and embed your form using the free form creating site, Wufoo
This video describes the process of creating full screen images for your homepage on all screen sizes. It covers:
0:00: Introduction and minor Project 2 Assignment Updates
2:37: Sizing images for phone, table, and computer screens
7:33: The project templates and how to copy them
9:35: Detailed discussion of the index.html template
12:27: Detailed discussion of the imagehome.css template and styling the text
21:15: Styling the images
This video on navigation covers:
0:00: Introduction to navigation
2:00: Getting the nav.css template (see assignment page or code page) and discussing how reset styles work when you have multiple stylesheets styling one html page
4:57: Explaining the navigation code in index.html
7:43: Explaining the navigation code in nav.css
13:35: Adding navigation code to about.html, portfolio.html, and contact.html
18:33: Making edited to the nav.css and main.css to make sure the mobile nav bar doesn’t cover your name
28:35: Adjusting nav bar colors to make them unique for the index.html and inner html page computer views (this is rather advanced coding and is not required, but I wanted to show you how you can make sure page-specific changes)
From Week Twelve
This video discusses strategies for checking for errors and validating that your code is correct using online validation tools and the Web Developer Toolbar. It covers:
0:00: Installing the Web Developer Toolbar Extension in Firefox Developer Edition
1:35: Error Checking Steps
3:00: Validating HTML using the Web Developer Toolbar
6:00: Validating CSS using the Web Developer Toolbar
13:15: Additional Error Checking in the Code
16:30: Review of Using Responsive Design Mode and Talking About Mobile Features
Note that the last minute or two vanished when I was editing, so the video ends rather abruptly, but that was just final parting words.
From Week Eleven
This video on responsive design covers:
0:00: Review of the main.css stylesheet
4:35: Creating sketches for phone and tablet screens
12:50: Moving from sketches to code
16:20: Completing the preparing-for-phone-tablet-f20.docx handout to help you move your code
22:35: Removing redundancy from your code
29:00: Coding the phone screen
31:30: Uploading and viewing the changes in Firefox Dev Edition
35:20: Concluding remarks
From Week Nine
This video introduces the concept of the box model. It covers:
[detailed breakdown to be added]
This video covers styling boxes in CSS. It covers:
- 0:00: Intro and review of the box model
- 3:30: Adding the box-sizing code
- 6:50: Centering boxes
- 10:25: Styling margins
- 12:50: Styling padding
- 16:22: Styling borders
- 21:15: Styling the img tag
- 24:15: Styling the body tag
This video introduces the concept of positioning elements on your page using class/id and float. It covers:
[to be added]
This video walks you through adding class/ids and floats to your HTML and CSS page. It covers:
[to be added]
From Week Seven
The video covers:
0:00: Introduction to HTML5
2:45: Breaking down <section> and <header> tags
9:08: HTML Comments and adding notes in your code for yourself
10:58: Breaking down the <figure> tag
The video covers:
0:00: Introduction to CSS and Envisioning the relationship between .html and .css files
3:00: The stylesheet code that links .html and .css together
10:58: Creating the styles folder (or directory) in FileZilla
11:55: Adding the stylesheet code to your .html file in Brackets
14:05: Creating the main.css file in Brackets
15:01: Coding a basic CSS page with color and uploading the files to the correct directories
30:30: What to look for when your page isn’t displaying as you think it should
This video introduces you to Google Fonts and how to code Google Fonts into your HTML and CSS files. It covers:
0:00: Introduction to the Google Fonts web site
6:50: Selecting a Google Font and Coding it in to your site
This video introduces how to size and display fonts using CSS. It covers:
0:00: Introducing font-sizing
1:15: On the font-family property
3:12: On the text-align property
4:00: On the font-size property and intro to Ems
9:05: On the letter-spacing property
11:10: On the line-height property
12:25: Pointing to additional font-related properties in Duckett
This video introduces sizing using the EM size unit. The video covers:
0:00: Introduction to Ems
2:25: Calculating Ems in terms of Pixels
2:50: Getting started with Ems, what to keep in mind
4:20: Calculating various Em sizes
From Week Five
This video will introduce you to coding images in HTML, organizing your directory, and a bit of FTP review. The breakdown:
0:00: Review of the basic HTML skeleton for all pages
4:25: The basic code for images
7:20: Review of Code, save, upload, refresh, repeat, and Best Practices
8:15: Organizing the directory and creating the images folder
14:00: Breaking down the image code according to directory structure and more Best Practices
26:35: Coding the image again in Brackets and uploading it to the server
This video introduces the concept of Access First Design, how to create appropriate ALT and Title text for images, and accessible links. It covers:
0:00: Access First Design
4:40: Defining ALT and Title Text
9:15: First example of ALT and Title text
13:45: Second example of ALT and Title text
18:00: Creating accessible links
22:20: Final thoughts on accessibility and Human Centered Design
From Week Four
This video will introduce you to the concept of servers, how we transfer files to the server, and web design workflow. The video covers:
0:00: What happens when you go to a web page using a browser and how servers function
6:00: Differentiating between The Internet and The World Wide Web
8:10: The Web Design Workflow (including creating your web design folder)
17:10: Starting the list of Best Practices 18:12: Transferring files from our computer to the server using FileZilla
27:50: Code, Save, Upload, Refresh, Repeat
This video will introduce you to how to setup your FTP account, connect to and use FileZilla, and start using Brackets. The video covers:
0:00: Getting the FTP account set up in Reclaim Hosting
4:00: Logging in to FileZilla using your FTP login info
9:25: Getting started with Brackets and creating your index.html page
11:30: The standard HTML skeleton for an HTML page
15:50: Using FileZilla to upload files to the server
17:35: Refreshing Firefox Dev Edition to see the coded page (YAY!) and repeating the process