Home
Videos uploaded by user “Christopher Stein”
Responsive Google Map
 
03:10
Shows how to add a responsive Google Map to your site. In the video I copy code from this Github Gist I made: https://gist.github.com/profstein/50e3c121f6adcb85c17f
Views: 9536 Christopher Stein
How CSS Floating Works
 
10:54
This is for a class I teach so if you're not in the class some may be out of context but hopefully still helpful. If you don't understand the BOX MODEL then you should watch http://www.youtube.com/watch?v=AWHAT2Iksk0 first. Ignore the first 20 seconds or so if you are not in my class. Once you understand that then come back to this video. This video is part 2 of a 3 parter. The whole series is designed to help you learn how the 960 grid system works but the first two, including this one, are applicable to all web developement. How the Box Model works http://www.youtube.com/watch?v=AWHAT2Iksk0 How CSS Floating Works this video How the 960 Grid System Works http://www.youtube.com/watch?v=QbShYaK4sf8
Views: 116228 Christopher Stein
960 Grid System
 
10:12
This is for a class I teach so if you're not in the class some may be out of context but hopefully still helpful. The video shows how the 960 Grid System works and has some tips on implementing it. This video is part 3 of a 3 parter. The whole series is designed to help you learn how the 960 grid system works but the first two, are applicable to all web development. How the Box Model works http://www.youtube.com/watch?v=AWHAT2Iksk0 How CSS Floating Works http://www.youtube.com/watch?v=IiJzbXzOdHQ How the 960 Grid System Works this video
Views: 31153 Christopher Stein
How to use 7zip to zip (compress and uncompress) files
 
04:15
7zip is a free, open source software that allows you to compress and decompress files in a number of different formats including zip, 7z, gzip, tar, wim and it can unpackage many more formats. This is a great alternative to WinZip that seems to be installed on all Windows machines and is not a free and open source project.
Views: 23274 Christopher Stein
Create GitHub Repository with GitHub Desktop Mac
 
05:10
This shows how to take a folder of files you already have and turn it into a Git Repository and GitHub Repository using the GitHub Desktop for Mac Application.
Views: 8844 Christopher Stein
CSS Fundamentals Part 1
 
15:32
This is the first part in a multipart series on the basics of CSS. In this video we look at what CSS is and the syntax for how it's written.
Views: 4139 Christopher Stein
Simple Grid System Part 1
 
06:27
This is the first part of a three part series in how to create a simple grid system for web design. This part covers briefly what grids are and why you want to use them. You can also visit this page for more information: http://webdesign.blogs.peopleio.net/layout/grids/simple-grid-system/
Views: 3369 Christopher Stein
960gs Grid System Hands On Tutorial
 
12:58
This is a hands on tutorial on how to use the 960.gs grid system found at http://960.gs. I made this for a class I teach so the files are only accessible to those students. But I felt it might be useful to other people so I've made it public.
Views: 13550 Christopher Stein
Create GitHub Repository from Existing Files using Brackets Git
 
14:31
This shows how to create a local Git repository and GitHub repository from some files you already have on your computer (that are not in a Git repository). It uses the Brackets editor with Brackets Git Extension. You should have Brackets and the Brackets Git extension installed before watching.
Views: 6549 Christopher Stein
HTML Fundamentals Part 1
 
11:10
This is part 1 of what will be a multipart series on the fundamentals of writing high quality HTML. In this video HTML itself is introduced. We don't get to writing any HTML but it's important to make sure that you have an understanding of the concepts before we do. As I finish the other parts in the series I will link to them below. Part 1: this video Part 2: http://youtu.be/L1uZERilK44
Views: 4449 Christopher Stein
Form: CSS
 
14:55
This is part 2 of a three part series on creating and styling basic HTML forms. The three are (1) Form: HTML (2) Form: CSS (3) Form: Extra
Views: 2927 Christopher Stein
HTML Fundamentals Part 2: How to Write HTML
 
17:07
This is the second video in a multipart series on writing HTML. This one focuses on the big ideas behind writing HTML. It doesn't get into all of the major elements, that's for the next video. This one makes sure you know how markup works and the basic document structure for a web page. Part 1: http://www.youtube.com/watch?v=YZTJ7DAbU7g Part 2: this video Apologies for the breath sounds on the mic. It was a bit too close to my mouth. If I ever get the time (right!) I'll rerecord the audio. It gets better as it goes along.
Views: 2509 Christopher Stein
Simple Grid System, Part 2
 
13:11
This is the second part of a three part series in how to create a simple grid system for web design. This part covers some web design concepts that are necessary to properly understand what is going on in the third part where the grid system is created. You can also visit this page for more information: http://webdesign.blogs.peopleio.net/layout/grids/simple-grid-system/
Views: 1537 Christopher Stein
Using Dreamweaver CS5 to FTP files to a Server
 
07:21
This video shows how to use Adobe Dreamweaver CS5 to FTP files from a local folder to a web server. It also shows quickly how to create a Dreamweaver Site and walks through the process of uploading a file to the server. Some of the specifics are related to a class I teach but most of the concepts are generally applicable.
Views: 6575 Christopher Stein
HTML Fundamentals Part 3: Putting Content on the page
 
43:39
This is the third part in a multipart series on HTML Fundamentals. This part shows how to mark up content on the page. Probably what most new web developers are most interested in. I must say that at over 40 minutes, this part is by far the longest. That's because I try to show how to write and explain the semantics behind many of the most common HTML elements you will use to add content to the page. Part 1: http://www.youtube.com/watch?v=YZTJ7DAbU7g Part 2: http://www.youtube.com/watch?v=L1uZERilK44 Part 3: this video
Views: 2425 Christopher Stein
Google Calendar Embedding
 
05:52
This video shows how to embed a Google Calendar into a web page.
Views: 396 Christopher Stein
960.gs Grid System Overview
 
19:30
This tutorial was created for a class I teach but is generally useful for anyone using the 960 grid system, http://960.gs.
Views: 2113 Christopher Stein
CSS Fundamentals Part 2
 
10:51
This is the second video in a series on the basics of CSS. In this video we look at the basics of styling a web page.
Views: 2486 Christopher Stein
FTP Windows Explorer
 
04:01
This shows how to use Windows Explorer to FTP files to a web server.
Views: 1386 Christopher Stein
YouTube Flash API Part 1
 
11:35
Part One in a three part series on using the YouTube API in Flash. These videos show how to get a list of videos from YouTube and put them in a DataGrid in Flash. They don't show how to actually play the videos. That will be in a separate screencast (not uploaded yet). Playing the videos will use the special player that YouTube has created for the purpose. This API just gets information about videos on YouTube. Created for a class I teach so it may be a bit out of context and you may be missing example files if you are not in the class. Part Two is here: http://www.youtube.com/watch?v=pywkt8aBVgo Part Three is here: http://www.youtube.com/watch?v=o2Z_kZ1x_I4
Views: 730 Christopher Stein
Brackets And Extensions Install
 
06:53
Goes through installing Brackets on a Mac and then installing and deleting extensions.
Views: 1085 Christopher Stein
PSD 2 HTML: 8 Simple Foundational HTML Rules, Part 1 Writing HTML
 
54:50
I have just noticed some audio/vidoe sync issues. Please bear with them for now. If I can't fix it then I will have to try to reupload the video. This is the first part in a series of videos showing a hands on example of converting a grid-based Photoshop design (based on 960.gs) to HTML and CSS. Part Two is here: http://www.youtube.com/watch?v=UD3AxgZE3PY This was created for a class I teach. If you're not in that class you will miss some of the context around this. This video starts with an explanation of the 8 Simple Foundational Rules and then goes through a step-by-step process of writing the HTML to match what was designed in Photoshop. Because it's done step-by-step in real time it is rather long, about an hour. If you're following along it will probably take you two or more times that so leave yourself enough time to watch and complete this video.
Views: 1093 Christopher Stein
PSD 2 HTML: 8 Simple Foundational HTML Rules, Part 2 Grid Classes
 
18:27
Watch Part 1 first http://www.youtube.com/watch?v=MzBA-3JsF9w This is the second part in a series of videos showing a hands on example of converting a grid-based Photoshop design (based on 960.gs) to HTML and CSS. This was created for a class. If you are not in the class it will be missing some context from the class (but should still be understandable. This video starts with the major work of converting the design to HTML already done. In the video the 960.gs classes are added to lay out the existing HTML content in a grid.
Views: 1050 Christopher Stein
Font Squirrel Web Fonts
 
16:59
This is a quick and dirty video to show how to use a web font from downloading it from a site like dafont.com and then running it through the Font Squirrel Generator and putting it on your page.
Views: 2573 Christopher Stein
Understanding the Box Model
 
07:23
This is for a class I teach so if you're not in the class some may be out of context but hopefully still helpful. The video shows how the Box Model works. It's an essential part of understanding how to do layout on the web using CSS. This video is part 1 of a 3 parter. The whole series is designed to help you learn how the 960 grid system works but the first two, including this one, are applicable to all web development. How the Box Model works this video How CSS Floating Works http://www.youtube.com/watch?v=IiJzbXzOdHQ How the 960 Grid System Works http://www.youtube.com/watch?v=QbShYaK4sf8
Views: 18813 Christopher Stein
Custom CSS Grids Tutorial
 
29:23
This screencast shows how to use the Variable Grid system to create a grid with the widths and number of columns of your choosing. There are a number of tools out there that help with this but the cool thing about this one is that it writes a CSS file for you that uses the exact same classes as the 960.gs grid system. That way you can use everything your learned about the .container and .grid_x and .alpha and .omega classes with the 960 grid system but using your own grid dimensions.
Views: 6760 Christopher Stein
Typographic Hierarchy Part 3: Style the Text
 
37:37
Apologies, the audio is bad for about a minute starting at 28:56. I will try to correct that and update the video. In this third video in a series we finally get to styling the text with CSS. This is the heart of creating the typographic hierarchy but the prior step of creating the HTML had to come first. During this video there is also a tutorial on using Google Fonts. Part 1: https://youtu.be/dO1QBSI8n6s Part 2: https://youtu.be/a66xS_Dzjis Part 3: this video Part 4: https://youtu.be/YK_8ucOXiSM Starting HTML file and CSS reset: https://gist.github.com/profstein/0bb4a76e9e722b77f66ca0a7353a55f9 Final version (end of Part 4): http://codepen.io/profstein/pen/wzaNoJ
Views: 164 Christopher Stein
Flickr Search part 1 Setup
 
21:41
This is part 1 in a series that shows how to perform a search using the Flickr API for Flash ActionScript, show the results as a grid if thumbnails and then show a larger version of the picture when clicked. In this part I show you how to prepare the flash movie before writing the code. In the videos I refer to a file named Stein_Flickr_Utils.as, you can now get that on GitHub: https://github.com/chris0stein/ActionScript_Flickr This movie was created for a class I teach so if you are not in the class it may be a bit out of context. Other Parts Part 1: this video Part 2: http://www.youtube.com/watch?v=f31X9AuPXxo&feature=related Part 3: http://www.youtube.com/watch?v=Y3DQhbXl1eU Part 4: http://www.youtube.com/watch?v=2S8FtHNhEbM Part 5: http://youtu.be/PVcRzljzsZI
Views: 687 Christopher Stein
GoogleMapsEmbed
 
10:45
Views: 943 Christopher Stein
mmp100 Listamatic
 
03:10
Views: 113 Christopher Stein
Flickr Search part 5 Paging Results
 
09:45
This is part 5 in a series that shows how to perform a search using Flickr API for Flash ActionScript and show the results of the search as a grid of thumbnails and then show a larger version of the image when clicked. In this part I show how to add paging to your results so that you can see more than just the first page of results. This movie was created for a class I teach so if you are not in the class then it may be a bit out of context. Other Parts Part1: http://www.youtube.com/watch?v=QTT1-z_VNuw&feature=related Part2: http://www.youtube.com/watch?v=f31X9AuPXxo&feature=related Part3: http://www.youtube.com/watch?v=Y3DQhbXl1eU Part4: http://www.youtube.com/watch?v=2S8FtHNhEbM Part 5: this video
Views: 278 Christopher Stein
Flickr Search 2  Search Code
 
44:07
This is part 1 in a series that shows how to perform a search using the Flickr API for Flash ActionScript, show the results as a grid if thumbnails and then show a larger version of the picture when clicked. In this part I show you how to write the code to: 1.perform the search, 2. show the results in a grid of thumbnails. This movie was created for a class I teach so if you are not in the class it may be a bit out of context. Other Parts Part1: http://www.youtube.com/watch?v=QTT1-z_VNuw&feature=related Part2: this video Part3: http://www.youtube.com/watch?v=Y3DQhbXl1eU Part4: http://www.youtube.com/watch?v=2S8FtHNhEbM
Views: 771 Christopher Stein
Typographic Hierarchy Part 2: Getting the HTML Right
 
23:40
In this second video in the series we take an unmarked document and mark it up with HTML. The HTML structure of a page is extremely important to give you a foundation on which to create a typographic hierarchy. This video shows how to approach adding the HTML and CSS classes. It also covers using the Brackets text editor and Emmet extension to help make writing the markup faster. To follow along download the HTML file from this link: https://gist.github.com/profstein/0bb4a76e9e722b77f66ca0a7353a55f9 Part 1: https://youtu.be/dO1QBSI8n6s Part 2: this video Part 3: https://youtu.be/1At4l_B2ByM Part 4: https://youtu.be/YK_8ucOXiSM Starting HTML file and CSS reset: https://gist.github.com/profstein/0bb4a76e9e722b77f66ca0a7353a55f9 Final version (end of Part 4): http://codepen.io/profstein/pen/wzaNoJ
Views: 298 Christopher Stein
Google Custom Site Search Tutorial
 
09:20
This tutorial shows how to add Google Custom Search to your site. It handles just the basics in terms of adding the search box and showing the results. It doesn't cover more sophisticated customization of the search itself or the look and feel of the search.
Views: 15892 Christopher Stein
Typographic Hierarchy Part 4 Spacing and Grouping
 
26:07
In this fourth video in the series we add spacing to the text styling and CSS reset that were done previously. Also covered are the Gestalt design principles of enclosure an proximity and how those can be used to help make a page more scanable and readable. To see a final version that you can play around with visit the Codepen link below. Part 1: https://youtu.be/dO1QBSI8n6s Part 2: https://youtu.be/YSoR8T3hJPY Part 3: https://youtu.be/1At4l_B2ByM Part 4: this video Starting HTML file and CSS reset: https://gist.github.com/profstein/0bb4a76e9e722b77f66ca0a7353a55f9 Final version (end of Part 4): http://codepen.io/profstein/pen/wzaNoJ
Views: 125 Christopher Stein
ActionScript Functions
 
21:20
This tutorial describes 4 different ways to use functions in ActionScript. Note there is a small errror, my example code draws a rectangle but I name the functions like I'm drawing a circle. So...Everything works but the names of the functions don't make sense.
Views: 142 Christopher Stein
ImageReplacement (part 1): What, Why, How
 
07:01
This is the first part in a three parter on CSS Image Replacement. It covers what image replacement is, why you might use it and why you might not use it.
Views: 475 Christopher Stein
ImageReplacement (part 3): Step-by-Step adding more titles
 
06:25
This is the third part in a three parter on CSS Image Replacement. It shows how to add multiple image replaced titles. It uses the Phark Revisited method listed on the mezzo blue site by Dave Shea: http://mezzoblue.com/tests/revised-image-replacement/
Views: 216 Christopher Stein
WordPress Static Home Page With Custom Template
 
11:07
This shows how to create a static homepage with a custom page template in WordPress. It is in the middle of a theme development course so the theme is not visually complete and I use some classes in the HTML shown specific to the theme (the theme is based on Zurb's Foundation Framework http://foundation.zurb.com/). But you should get the general idea even if you're not in my course
Views: 1816 Christopher Stein
PSD to HTML Part 1 C
 
11:35
This is part of a larger series that will go through converting a Photoshop document (PSD) to an HTML /CSS file. View Part 1 A and Part 1 B before watching this movie
Views: 377 Christopher Stein
PSD to HTML Part 1 B
 
15:00
This is part of a larger series that will go through converting a Photoshop document (PSD) to an HTML /CSS file. View Part 1 A before watching this movie
Views: 255 Christopher Stein
Image Replacement (part 2): Step-by-Step
 
14:23
This is the second part in a three parter on CSS Image Replacement. It shows how to do CSS Image Replacement using the Phark Revisited method listed on the mezzo blue site by Dave Shea: http://mezzoblue.com/tests/revised-image-replacement/
Views: 339 Christopher Stein
Google Maps - Google Local Search Mashup
 
30:16
This video shows how to combine a Google Local Search with Google maps to do things like look for restaurants around a specific address. It was created for a class I teach so if you're not in the class it may seem a bit out of context. Assumes you know the basics of Google Search and Google Maps with ActionScript.
Views: 312 Christopher Stein
Screencast-LayoutGrid2_Clickable.mov
 
09:44
This is the third part to the four part series on dynamically adding movieclips to the stage and laying them out in a grid. This part shows how to make the MovieClips you've added clickable. It does it both through an event listener in the document class and through an external class for the MovieClip. The series is Screencast-LayoutGrid1_Intro.mov Screencast-LayoutGrid1_Code.mov Screencast-LayoutGrid2_Clickable.mov Screencast-LayoutGrid3_Scrollpane.mov
Views: 93 Christopher Stein
mmp420 4 18 12 v2
 
02:00:52
Views: 87 Christopher Stein
YouTube Flash API Part 3
 
05:23
Part One in a three part series on using the YouTube API in Flash. These videos show how to get a list of videos from YouTube and put them in a DataGrid in Flash. They don't show how to actually play the videos. That will be in a separate screencast (not uploaded yet). Playing the videos will use the special player that YouTube has created for the purpose. This API just gets information about videos on YouTube. Created for a class I teach so it may be a bit out of context and you may be missing example files if you are not in the class. Part One is here: Part Two is here: http://www.youtube.com/watch?v=pywkt8aBVgo this video is part 3
Views: 363 Christopher Stein

Ebano instrumental music download
World war ii japan documentary video
Karaoke video downloads western
Rock choir youtube rather be video
Top ten candlemass songs