Categories
CSS HTML JavaScript

HTML/CSS/JS Exercise: Full Page with Form Slide-In

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 […]

Categories
CSS HTML JavaScript

Creating A Basic Sliding Menu with JavaScript

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 Graphics HTML JavaScript

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
JavaScript

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
JavaScript

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).

Categories
CSS JavaScript WordPress

Download: SASS WP Gulp Build Process

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 […]

Categories
CSS JavaScript

Running SASS in a Gulp.js Build Process: Globs and the Watch Task

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
CSS JavaScript

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
CSS HTML JavaScript Uncategorized WordPress

Basic SASS Setup 2019

Categories
JavaScript

JavaScript: Adding EventListeners that Target Multiple Items

Make a new html file, a new css file, and a new javascript file: index.html, styles.css, myscript.js. In the html file, connect the stylesheet, and connect the javascript file.] Now, inside the document, add the following Emmet equation and then press TAB: This will produce 10 buttons: In your stylesheet, make ten classes, color1 to […]