Home
Videos uploaded by user “Thomas Bradley”
Accessibility: ARIA landmark roles
 
03:10
Adding ARIA landmark roles to important elements on a website. Code: https://github.com/algonquindesign/html-css/tree/gh-pages/accessibility
Views: 15381 Thomas Bradley
Jekyll: installation
 
04:22
Installing Jekyll on a Mac through the Terminal. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/jekyll/
Views: 38793 Thomas Bradley
Basic typography: rem vs. em vs. px
 
03:59
Using all the different font sizing units and measurements and how they affect your design. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/basic-typography/
Views: 13376 Thomas Bradley
Javascript + jQuery effects: waypoints
 
07:34
Using waypoints on our website: Javascript and jQuery will detect a specific scroll location and trigger a function. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/javascript-jquery-effects/
Views: 54527 Thomas Bradley
Jekyll: post categories
 
01:47
Using categories with posts to help organize content on your website. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/jekyll/
Views: 10999 Thomas Bradley
Javascript + jQuery effects: scrolling animations
 
03:33
Triggering animations when the user scrolls their browser. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/javascript-jquery-effects/
Views: 103621 Thomas Bradley
Jekyll: adding CSS
 
01:32
Adding CSS to a Jekyll website. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/jekyll/
Views: 11895 Thomas Bradley
Jekyll: setting up a Jekyll project
 
03:01
DO NOT put the `markdown: redcarpet` line—it's for older versions of Jekyll and isn’t compatible with the default newer versions. Adding a _config.yml file to a folder in order to turn it into a Jekyll project. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/jekyll/
Views: 24926 Thomas Bradley
Jekyll: creating navigation
 
02:17
How to create navigation in a Jekyll project and properly link the pages together. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/jekyll/
Views: 15331 Thomas Bradley
YAML: syntax basics
 
04:51
The basics of the YAML structured content syntax. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/yaml/
Views: 64669 Thomas Bradley
Jekyll: site baseurl
 
02:22
Using the site.baseurl property and it's purpose when setting up links. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/jekyll/
Views: 13657 Thomas Bradley
Writing a readme: adding a license
 
02:10
Adding a license to your project by using the GitHub interface or putting the text directly in your repository. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/writing-a-readme/
Views: 3249 Thomas Bradley
YAML: Markdown front matter
 
02:16
Embedding YAML structured data at the top of Markdown documents. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/yaml/
Views: 10354 Thomas Bradley
Jekyll: layouts
 
03:54
Sharing common elements, like header and footer, on every page of a site using a layout. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/jekyll/
Views: 18380 Thomas Bradley
Jekyll: include parameters
 
02:23
Customizing includes using parameters—variables that get passed into an include. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/jekyll/
Views: 11297 Thomas Bradley
Jekyll: looping over posts
 
04:47
Looping over all the posts in Jekyll and outputting an HTML list. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/jekyll/
Views: 11205 Thomas Bradley
GitHub: tasks, labels & milestones
 
02:41
Basic project management with GitHub using task lists, labels and milestones. Code & tutorials: https://learn-the-web.algonquindesign.ca/topics/project-management-with-github/
Views: 2995 Thomas Bradley
Media queries: print styles
 
03:53
Using media queries to style how a website will print. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/media-queries/
Views: 8293 Thomas Bradley
Jekyll: data files
 
03:56
Using Jekyll data files instead of hacking posts for ordered content on the page. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/jekyll/
Views: 6472 Thomas Bradley
Video & audio: JavaScript hover to play video
 
03:32
Using Javascript to play and pause a video when the mouse hovers. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/video-audio/
Views: 15183 Thomas Bradley
Jekyll: many CSS files
 
03:29
Getting Jekyll to combine many CSS files into a single file to serve to end users. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/jekyll/
Views: 6463 Thomas Bradley
Jekyll: includes
 
02:54
Using includes in Jekyll to share pieces of code between multiple pages and locations. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/jekyll/
Views: 11502 Thomas Bradley
Jekyll: creating a collection
 
05:44
Using the Jekyll collection feature to make a grouping of documents on the website. Code & tutorials: https://learn-the-web.algonquindesign.ca/topics/jekyll/
Views: 1875 Thomas Bradley
Metadata: mapping Schema.org to JSON-LD
 
11:00
A look at how to understand the information on Schema.org and map it to a JSON-LD metadata set. Code & tutorials: https://learn-the-web.algonquindesign.ca/topics/metadata-enhanced-semantics/
Views: 8167 Thomas Bradley
Advanced SVG: writing SVG code
 
05:05
Writing SVG code by hand in a code editor. Code: https://github.com/algonquindesign/html-css/tree/gh-pages/advanced-svg
Views: 9507 Thomas Bradley
Advanced SVG: icon sprite sheet
 
04:58
Create an icon sprite sheet in a separate SVG file and refer to individual icons within it. Code & tutorials: https://learn-the-web.algonquindesign.ca/topics/advanced-svg/
Views: 7203 Thomas Bradley
Jekyll: page loops and images
 
02:37
Using images from YAML front-matter and outputting them from a loop. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/jekyll/
Views: 5901 Thomas Bradley
Advanced SVG: transform-origin with pixels
 
01:40
Making the transform-origin CSS property more accurate a browser compatible by using pixels. Code & tutorials: https://learn-the-web.algonquindesign.ca/topics/advanced-svg/
Views: 2802 Thomas Bradley
Javascript + jQuery DOM: event delegation
 
07:30
Attaching events to HTML elements that may not exist yet on the page by delegating the event with the parent element. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/dom/
Views: 6006 Thomas Bradley
Jekyll: pretty URLs
 
02:28
Setting up Jekyll to generate pretty, and SEO friendly, URLs. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/jekyll/
Views: 5760 Thomas Bradley
Jekyll: nested layouts
 
04:21
Creating nested layouts inside Jekyll; layouts that are inserted into layouts. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/jekyll/
Views: 8416 Thomas Bradley
HTML semantics: sections & articles
 
07:00
Organizing and grouping content together with article and section elements. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/html-semantics/
Views: 15132 Thomas Bradley
Jekyll: installation (older versions of Mac OS X)
 
04:25
Installing Jekyll on a Mac through the Terminal. Specifically on older versions of Mac OS X, pre El Capitan, 10.11. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/jekyll/
Views: 13968 Thomas Bradley
Jekyll: looping over pages
 
03:03
Looping over all the pages and specific pages to create a list. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/jekyll/
Views: 5759 Thomas Bradley
Accessibility: labeling links
 
02:46
Adding extra labels to links to enhance their accessibility with aria-label. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/accessibility/
Views: 5966 Thomas Bradley
Modular typography: vertical rhythm
 
04:20
Creating a vertical rhythm in the typography system with consistent margins and line-heights that conform to a baseline grid. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/modular-typography/
Views: 6193 Thomas Bradley
Advanced SVG: text & web fonts
 
02:40
Using live, accessible text inside an embedded SVG and applying web fonts. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/advanced-svg/
Views: 4953 Thomas Bradley
Accessibility: focus styles
 
02:22
Styling the keyboard focus rectangle of links in the browser. Code: https://github.com/algonquindesign/html-css/tree/gh-pages/accessibility
Views: 3960 Thomas Bradley
Media queries: introduction
 
04:02
A quick introduction to media queries and how to use them. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/media-queries/
Views: 3502 Thomas Bradley
Advanced SVG: icon symbols
 
03:39
Looking at using SVG’s `use` element when making SVG icon systems. Code: https://github.com/algonquindesign/html-css/tree/gh-pages/advanced-svg
Views: 3258 Thomas Bradley
Respsonsive & retina images: image source sets
 
09:35
Using the img tag's srcset attribute to define a series of different images and paths that will allow the browser to pick the best available to display. Code & tutorials: https://learn-the-web.algonquindesign.ca/topics/responsive-retina-images/
Views: 3783 Thomas Bradley
Domains & DNS: how the web works
 
05:28
A quick overview of what happens when you type a URL into your browser and how a webpage is loaded. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/domains/
Views: 3339 Thomas Bradley
Animations & effects: target
 
03:02
Using internal links with IDs and CSS :target pseudo class to style elements. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/css-animations-effects/
Views: 2876 Thomas Bradley
Accessibility: skip links
 
05:58
Adding navigation skip links to jump to, or over, navigation as well as jump from the bottom of the page to the top. Code & tutorials: https://learn-the-web.algonquindesign.ca/topics/accessibility/
Views: 7812 Thomas Bradley
Animations & effects: parallax
 
10:45
Creating parallax scrolling effects on a website using only CSS. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/css-animations-effects/
Views: 92122 Thomas Bradley
Jekyll: page sub-folders
 
02:24
Linking to sub-folders and creating sub-topic pages. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/jekyll/
Views: 6119 Thomas Bradley
Jekyll: generating page navigation
 
04:08
Generating a secondary page navigation in Jekyll with page and post loops & nested layouts. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/jekyll/
Views: 5419 Thomas Bradley
Jekyll: starting and stopping
 
03:41
Starting and stopping Jekyll from Terminal and using the GitHub app to open Terminal in the right location. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/jekyll/
Views: 18263 Thomas Bradley
YAML: text blocks
 
02:20
Large text blocks in the YAML syntax. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/yaml/
Views: 12254 Thomas Bradley
Advanced SVG: animations
 
03:29
Using CSS animations on SVG elements. Code: https://github.com/algonquindesign/html-css/tree/gh-pages/advanced-svg
Views: 15578 Thomas Bradley