about weekly videos and tutorials

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 Week Thirteen

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

This video on navigation covers:

0:00: Introduction to navigation
2:00: Getting the nav.css template (see the Project 2  assignment 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
STOP at 28:00!! The new nav.css template makes styling the index.html different from the inner pages much easier.

From Week Twelve

This video describes the process of creating full screen images for your homepage on all screen sizes. It covers:

0:00: Introduction
2:37: Sizing images for phone, table, and computer screens (Note: you cannot simply resize an image; you must CROP them to the actual sizes on the assignment page.)
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

From Week Eleven

This video discusses styling links using CSS. It’s only 5 minutes, so no timestamps needed.

This video discusses embedding responsive video and audio, following the instructions in the Responsive Media Embedding Tutorial (.docx). It covers:

0:00: Introductory remarks and the tutorial we’re following
1:30: Creating the HTML5 skeleton so you can easily enter the media code, including the importance of comments
4:10: Styling and explaining the .media-responsive class in your css file
5:25: Styling and explaining the iframe
6:25: Creating the media-responsive class in the HTML
8:05: Copying YouTube embed code and pasting it within media-responsive class in the HTML
9:05: Copying Vimeo embed code and pasting it within media-responsive class in the HTML
10:40: Copying SoundCloud embed code and pasting it within media-responsive class in the HTML
11:40: Uploading the css file, seeing the media on the site, and adding margins between the media to add some white space
13:00: Testing to make sure the media is responsive on phone, tablet, and computer

div class=”media-responsive”>

This video covers how to add a single background image and add a background pattern that tiles throughout the whole page. The video follows the instructions on page 1 in bg-images-footer-f22.docx and covers:

0:00: Coding a single background image
11:20: Coding a background pattern

From Week Nine

This video on responsive design covers:

For Wednesday, 3/20
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-s24.docx handout to help you move your code
22:35: Removing redundancy from your code

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

From Week Eight

The video covers:

0:00: Intro to design elements as boxes
1:50: Intro to the Box Model: content, padding, border, margin
2:55: Padding
4:30: Border
5:30: Margins and multiple boxes next to each other
9:00: Applying widths to boxes (border-box)
12:05: Conceptualizing box width percentages
17:10: Looking at the widths in the code

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

From Weeks Six and 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. Please note that the GoogleFonts interface has changed slightly since this video was made, but the process of adding the code to your HTML and CSS is exactly the same. 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 Four

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 Weeks Two and Three

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

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 (or Atom) 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