Categories
CSS

Using Font-Awesome with Pseudo Elements

Sometimes, you will inject Font Awesome icons into a document using pseudo elements rather than the empty <i> tags that are commonly used. Here’s example code using Facebook and Twitter. Note the font family: Font Awesome 5 Brands For the content value, put a backslash followed by the unicode value. You can find the unicode […]

Categories
WordPress WordPress Templates

Windows MAMP:  ob_end_flush Text

If some of your WordPress posts or pages have the following error messsage output to the screen ob_end_flush: failed to send buffer of zlib, etc, the following steps should fix it.

Categories
CSS HTML

Object-Fit

Please download the starter files from here. A useful but occasionally confusing css property is object-fit (and its related property object-position. It allows to “crop” images with CSS, which can be very useful in responsive design. I have created a series of Loom videos to explain how to use it. As always, please watch them […]

Categories
WordPress

WordPress Starter Themes 2021: Underscores

A WordPress starter theme is a great way to build your own themes. Starter themes are, as the name implies, meant to serve as the code foundation upon which you build your theme. With a good starter theme, you have a 1000-hour headstart. This is because on its own the starter theme will typically deliver […]

Categories
WordPress

WordPress Configuration Exercise 1922: Blogberg, YARPP, Relevanssi Alternate Full, Revised 2022

First, please download the starter files. Use the latest version. Make a new database and install the duplicatored site into it. As part of that duplicator process, make a new Admin Account, using your first and last name as both the user name and password. For the nickname, use your initials. Make sure that you […]

Categories
WordPress

WordPress/MAMP: Fixing Cropping Issue

Depending on what development environment you are using, you might encounter errors when cropping images in WordPress. Here is one possible fix for that. In the front panel of MAMP, check which version of PHP you are running. If you do not see the PHP version in the front panel, go to the MAMP Preferences […]

Categories
HTML

Emmet Basics Practice 2021

For each of the following conditions, make an emmet equation to produce the described markup. (If you haven’t done tables yet in class, here’s the basics.) 5. Make a list menu with with 12 links of single-word lorem ipsum, but “prewired” with spans and classes for Font Awesome and with the visually-hidden class. 6. Using instructions […]

Categories
CSS Graphics HTML

All About WebGraphics

I have created a Loom video series about web graphics. To go through the videos and practice the techniques shown in them, please download the starter files. Topics covered include: jpeg file size reducing jpeg file size via dimension & quality batch processing in photoshop, bridge, and xnconvert svg: the web’s vector file format png8, […]

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 HTML

Reasons to Learn About Advanced Selectors

Increasing Specificity If… Avoiding Monotonous Work Imagine you have a website with 100 pages, and you want to style the last LI in the main menu. Imagine visiting each page and adding a class to the last LI. Yuck. Modifying The Work of Others Imagine that you have a content managed site running WordPress or […]