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 Fourteen
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)
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 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
3:50: How to create about.html and contact.html
11:25: 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
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
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-f21.docx and covers:
0:00: Coding a single background image
11:20: Coding a background pattern
From Week Ten
This video on responsive design covers:
For Monday 11/1
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-f21.docx handout to help you move your code
22:35: Removing redundancy from your code
For Wednesday 11/3
29:00: Coding the phone screen
31:30: Uploading and viewing the changes in Firefox Dev Edition
35:20: Concluding remarks
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 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
The video 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 discusses how to position elements on your page using class/id and floats. Specifically, it covers:
0:00: Intro to positioning parts of your page and what you should have open while watching the video, as well as the assignment requirement that your portfolio items appear side-by-side
2:15: Overview of sketch depicting elements side-by-side
4:40: Intro to class and id attributes
6:40: Defining the class attribute, which can be used multiple times
7:15: Defining the id attribute, which can only be used once
8:00: Coding class/id attributes in HTML and the importance of naming
9:35: Coding class/id attributes in CSS and how HTML and CSS are connected
10:20: How the class/id attributes look in actual HTML and CSS code and why I am using class instead of id
12:00: Intro to positioning using floats and widths
This video walks you through positioning your works samples on your portfolio.html page using class/id, float, and clear. Specifically, it covers:
0:00: Intro message about ignoring overflow: auto; in the video
1:05: Intro to positioning elements and what documents you need to have open while watching the video
3:35: Removing the height and width functions from the img in portfolio.html
5:35: Adding classes to the section tags in portfolio.html
8:05: adding text-align: center to the html selector in main.css
9:05: Adding section.left and section.right selectors and associated code to main.css, and explaining the code
11:45: Explaining how browsers interpret and present floated elements and the clear attribute
17:35: Adding the code necessary to ensure the images fit within the boxes by styling the figure and img
23:30: Making additional adjustments to the code
From Week Seven
From Week Six
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 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
From Week 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