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.
Continue reading JS : Single Page Parallax Resume
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
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
An Introduction to Responsive Web Design
You can also open this presentation in a new, larger window.
This tutorial will show you how you can write a customizable gallery function that scans gallery directories to create and populate four types of image banks: random <IMG> image, random css background image, lightbox thumbnail gallery, and carousel slideshow. No database necessary…. Continue reading PHP – Creating a Gallery Function
The following demonstrations will reiterate the pathways to your web serving directory on your file system, how to access the files through your web browser, and basics of understanding PHP error reporting. Continue reading XAMPP “localhost” and Intro to PHP Error Reporting
Installing XAMPP on your personal computer
XAMPP stands for “X (one of four OSs), Apache, MySQL, PHP, PERL” and is used to enable your personal computer with the web and database tools necessary to host its own dynamically driven websites for testing and development purposes. The following tutorial video demonstrations will show you the steps to set your computer up as a “localhost” server on Windows. Continue reading XAMPP – Turn your PC into a development server
Installing MAMP on your personal computer
MAMP stands for “Mac Apache, MySQL, PHP” and is used to enable your personal computer with the web and database tools necessary to host its own dynamically driven websites for testing and development purposes. The following tutorial video demonstrations will show you the steps to set your computer up as a “localhost” server. Continue reading MAMP – Turn your Mac into a development server
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
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
An Approach To Making a Multi-Page Site
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
Working With Photoshop Masks and Channels
Select and Mask, Quick Masks, Puppet Warping, and Creating a Shadow from an Alpha Channel
This 4-part demo (playlist) will show you how to refine complex edges in masks using CC 2017 tools. This is a daunting task without this method! It follows the lessons in Chapter 6 of the Adobe Photoshop Classroom in a Book 2017 edition. Continue reading Photoshop – Lesson 06: Masks and Channels
Photoshop Photo Adjustments / Basic Corrections
Photoshop image adjustments allow users to manipulate images in a variety of ways. The following 6-part video playlist will help you see how to make effective adjustments. Continue reading Photoshop – Lesson 02: Image Adjustments
The “Image Size” Box
The place where we deal with the different types of resolution are within the “Image Size” dialogue box. This video demo explains the difference between pixel dimensions and print resolution, and how they relate to one another.
Continue reading Photoshop – Lesson 02: Understanding Resolution