Setting Up Brackets
This three-part video will show you how to set up Brackets, a free open-source code editor by Adobe.
Category Archives: HTML
Illustrated Poem Demo (Images & Positioning)
To follow along with the demo in playlist video series below, you will want to download a starter image file:
Click to open image in new tab; then right-click it to save to your computer.
This playlist is not complete yet but will be updated soon. It currently takes you through the first 8 steps of the demo project.
JS – Project1 – Mobile JS Menu (+ more)
This demo series will show you how you can make your navigation mobile friendly and accessible using jQuery whether javascript is enabled on the client-side or not.
JS Mobile Menu Demo Series
This series is approximately 45 minutes long. You should expect it to take at least twice that time to do complete the work.
1 – Menu setup (18min)
2 – jQuery setup and custom script (17min)
3 – Styling the menu for proper behavior (13min)
JS : Single Page Parallax Resume
What is in this tutorial?
- Mobile-first design principles
- Learn how ‘vh’ viewport height works
- Learn how to vertically and horizontally center elements on page
- Writing jQuery script for collapsible navigation menu
- Applying parallax smooth scrolling jQuery script for single page navigation
- Applying Lightbox 2 jQuery effects to gallery
Please watch all videos below to complete the tutorial.
JS : Make a Scrolling Effect Webpage
What this tutorial covers
This demo contains a 9-video demo series that will teach you how to make a single web page with a jQuery page-scrolling easing effect. The software demonstration is done in Dreamweaver, but you could also follow along with any decent script editing program.
Level :: Beginner
Continue reading JS : Make a Scrolling Effect Webpage
CSS – Making a Responsive Layout with Media Queries
This page contains a demonstration series outlining a method for designing a basic responsive grid layout with HTML and CSS. To first learn more about responsive design, you can watch the “Responsive Web Design: an Introduction” slideshow presentation. Continue reading CSS – Making a Responsive Layout with Media Queries
Responsive Web Design
An Introduction to Responsive Web Design
You can also open this presentation in a new, larger window.
CSS – Basic Styling with CSS
This is a video series playlist that walks you through how to style a webpage using CSS3 with HTML5. There are a total of 12 videos equalling almost three hours of instruction. Continue reading CSS – Basic Styling with CSS
HTML – Start Coding with HTML
This tutorial will walk you through getting started with HTML coding. It covers basic principles of how to create different semantic tags to organize the structure of your page content. Continue reading HTML – Start Coding with HTML
Creating a Simple Template-Based HTML + CSS Site
An Approach To Making a Multi-Page Site
Getting Started
This set of tutorials will help beginners develop a basic workflow for building efficient, template-based sites using a code editor. Proprietary Dreamweaver template files are not covered here. Continue reading Creating a Simple Template-Based HTML + CSS Site
HTML – HTML and CSS Principles
To view this lecture, please download the HTML and CSS Principles PDF (2.9MB).
CODE EDITOR – Using Komodo Edit
This is by far the instructor’s FAVORITE free editor on the market today! It is intuitive and easy to use, although it has features that are surprisingly rich for a free code editing tool.
Komodo Edit Download link: http://komodoide.com/download/#edit
While students can use other editors, this is the instructor pick! Continue reading CODE EDITOR – Using Komodo Edit
CSS – Styling Lists
What This Tutorial Covers
The following 4-part series explains how to style lists for navigation. It covers the following topis:
- switching from block-level (vertical) to inline (horizontal) lists
- how margins and padding behave with text and inline lists
- centering text in in-line lists vertically and horizontally
- making horizontal lists using floats
- using background images in both inline and floated lists
- clearing floated items Continue reading CSS – Styling Lists
HTML – Linking Directories and Pathways
Note, to watch in a larger format, click the title link above or here for the expandable version.
PHOTOSHOP – Making Image Navigation For the Web
The first demo video shows you how you can make navigational buttons in Photoshop using multiple layers in a single space. The second demo shows you how to create the same output files as in the first demo, but the second video uses “slices”.
BY THE WAY . . .. Even though in the video a talk about making “javascript rollovers,” these techniques are the same for making CSS hover buttons that use absolutely no javascript. So don’t let that throw you off! Continue reading PHOTOSHOP – Making Image Navigation For the Web
CSS – Examining Ways to Display Images
This demonstration uses a mock-up site that allow you to see via video demos below how images are commonly displayed using CSS and HTML. It also shows you how you can examine other websites to see how things have been constructed.
- Video Demo of Live Site “John Doe” Part 1
- Video Demo of Live Site “John Doe” Part 2
- Video Demo of Live Site “John Doe” Part 3
- Check out the live site to follow along.
WEB – Image Preparation Lesson
To view the presentation, please download the PDF version of Web Image Preparation.