For this exercise, please download the starter files. This will include an html file and a folder of images. And please download the screenshots. Finally, here is a Loom video describing the task. There is already lots of HTML in the page. Feel free to add to, or subtract, from that HTML. Font Awesome is […]
Category: JavaScript
For this exercise, please download the starter files. The starter files include an html file and a folder of images. Here are the screenshots. And here is a Loom video describing the task. There is already lots of HTML in the page. Feel free to add to, or subtract, from that HTML. Font Awesome is […]
In this exercise, you will learn how to create a sliding-down menu for small screens. In it, you will learn about: First, please download the starter files. Set them up as a new project in your editor (likely Visual Studio Code). Now, please watch this Loom video series. Please start with the video that has […]
Categories
CSS Blend Modes Tester
In the following exercise, you will explore the following areas. css blend modes css variables (also known as custom properties) grid auto-fill and minmax() advanced form styling animation transitions js change event js event targets more visual studio efficiencies In the project, you will make a CSS Blend Modes Tester: a tool that will allow […]
Categories
The ClassList Property and Methods
To learn about all the methods and properties of any HTML element, consult the Mozilla Developer Network page on Elements. Click on any element to find information on its available properties and methods. For example, if I want to learn how to modify classes attached to an element, I can look through this document and […]
Categories
Installing ESLint Globally
In VS Code or Atom, press cmd/ctrl shift p to summon the command palette. There type install extensions. Search for ESLint (the one by Dirk Daeumer).
Basic Gulp-Based SASS Build Process In order to use SASS in your WordPress development environment, download this zip archive. When you unpack the archive, you will have a folder called gulp-dev-for-wp. Inside that folder are two files: package.json and gulpfile.js. This build process assumes that either: you have installed npm and gulp-cli on your own […]
Where We Ended Up Our gulpfile.js file looked like this at the end of the previous exercise: It’s working, but it’s looking for only a single scss file. In this part of the exercise, we’ll get gulp to look at any number of files. Add Some More SASS Files First, create the following additional folders […]
Categories
Running SASS in a Gulp.js Build Process
The instructions for the installation below are Macintosh-specific. PC instructions will be roughly similar, but there will be significant differences that will require some googling. If you are on your own computer, install node.js and the gulp command line-utility. Each of the command line steps can be copied and pasted into the Terminal window and […]
Categories