A fundamental of layout design is the organization of your design elements into gridded spaces (or sometimes breaking-out of those gridded spaces). In this exercise, find a piece of design that includes text, image, shape, etc. and draw boxes over it, outlining the gridded spaces. Feel free to use which tools you prefer. The example… Continue reading Making the Grid

This is a tutorial for using the “Live Sass Compiler” extension as an alternative to using node and “node-sass” as presented in Jonas’s tutorials. Install the Extension “Live Sass Compiler” Update your Settings JSON in VSCode Using the command palette in VSCode add the following key/value pairs to your JSON Use the sass filename “style.scss”… Continue reading Live Sass Compiler

Choose a primary color from your last week’s color palette exercise and build a complementary or triad color palette with light and dark versions using Paletton or another generator from those found on this site’s design and code page OR create your own shades based on a primary & secondary colors in CSS using CSS… Continue reading design 1 & 2 complementary color palette exercise

Have a look at the site designspiration.com and I would like you to find four pieces of design that are of interest to you, and place them in a blog post. CHOOSE IMAGES THAT INCLUDE SHAPE AND/OR TEXT. NO PHOTO or ILLUSTRATION ONLY SELECTIONS. You can use a number of different ways of searching: color,… Continue reading Designspiration

Must Do Stretch Goals Nov 21 Continued to work on the cards with the text wrap on shape. Working to place them into a column system so they will be responsive. Work on solution to keep the card aspect ratio constant.

Topics Problem Set Create a Google Slide presentation in which you include all of the above choices for your final project which you’ll be working on over the next few weeks. Here’s a sample presentation created by me during class for reference. For the blog Summarize your choices from above and link your presentation. Remember… Continue reading design 1 – project site proposal

Using two of your images (or completely new ones) from the designspiration exercise last week or photos from unsplash.com create a color palette based on that image. Choose a range of colors that are darker to lighter. So for example you may have two darker colors, one midrange color, and two lighter colors. You’re welcome… Continue reading Image based palette exercise

This is a quick tutorial on how to setup VSCode to format on save using the Prettier extension, including formatting HTML. Install the Prettier Extension Select ‘Settings’ from the gear icon in the lower left corner of VSCode In the search bar type ‘forma’ to look for format and choose Prettier as your default formatter… Continue reading Format on Save with Prettier

Exercise: Mood Board Create a digital document or physical document/collage of items that cohere to your taste. There a minimal number of goals: Use which tools you are comfortable with digital or analog. Old fashioned cutout collages are pretty great. But you need to present a digital image of the collage, which can be native… Continue reading design 1&2 Design inspiration

If you want to use an FTP client on your personal computer instead of the C-Panel’s file manager in your Reclaim Hosting account, this is the tutorial for you! FTP (File Transfer Protocol) is a method for connecting to your Reclaim Hosting Web Server using a tool that supports FTP connections. We’re going to use Cyberduck,… Continue reading Cyberduck Setup