This page has resources to help you with creating your projects. They are organized by category (some posts may appear in more than one category).
Final Project
Information and resources related to the final project.
-
Converting HTML site to 11ty site
The link below is to a video recording walkthrough of moving an HTML site to an Eleventy site. Walkthrough of HTML to 11ty Related Resources HTML to 11ty Miro (I show this in the video) 11ty Page Breakdown Miro (how a page is built in 11ty
-
Resizing Images
In order to have a symmetrical grid of images or image cards, you need every image to be the same aspect ratio (relationship between width and height). Resize Images in Photoshop The video below shows how to use photoshop to resize your images. View video in new tab with transcript and closed captions.
-
Basic Branching Workflow in Git
When you are working on a team project, you need a way to make sure that people’s changes don’t get all mixed up and overwrite each other. Two practices in your team with help with this: This post is about the second recommendation. Branching Cheatsheet Here are the basic commands: The Workflow Here is a…
-
Final Project First Steps
Here are the first steps to take as you get started on your final projects. Step 1: Start Final Project Information Document If you haven’t yet, you will want to view the video in the Final Project Management post. This can be done after class. Step 2: Confirm and Specify Project Topic You will need…
-
Final Project Management
This post explains the miro your group will use to manage your final project. Entering information in this is required of each group.
-
Final Project Brief
OVERVIEW The Final Project Brief is a document to describe the site that you will be creating for yourFinal Project. The overall goals are to describe what it is your doing both in text and with visual examples so that everyone is on the same page before you get into the full work of making…
-
Final Group Project Ideas
We will go over this post in class to help you think about what to do for your final project and to also get started with getting you into groups. Overall Topic Guide For this semester, you will be required to create a project that tells a story using the information from the Dollar Street…
Eleventy
Posts related to what Eleventy is, and how to work with it.
-
Converting HTML site to 11ty site
The link below is to a video recording walkthrough of moving an HTML site to an Eleventy site. Walkthrough of HTML to 11ty Related Resources HTML to 11ty Miro (I show this in the video) 11ty Page Breakdown Miro (how a page is built in 11ty
-
-
Collections in Eleventy
There are a few ways that you can generate lists of pages in 11ty. Eleventy has a concept called Collections that are a group of content. This post looks at how to show pages in a collection. That collection can be based on tags, custom front-matter variables, and a listing all of the files in…
CSS and Design
All posts related to design in general and also web design and CSS specifically.
-
Resizing Images
In order to have a symmetrical grid of images or image cards, you need every image to be the same aspect ratio (relationship between width and height). Resize Images in Photoshop The video below shows how to use photoshop to resize your images. View video in new tab with transcript and closed captions.
-
Style Tiles
Style tiles were created by Samantha Warren. Style Tiles The purpose of these is to start to show the visual design elements are not in a wireframe without having to create a full-blown mockup of the site. This allows you to have a discussion about the design with teammates, clients etc, in a quick way that…
-
One-Line Layouts
10 MODERN LAYOUTS IN 1 LINE OF CSS by Una Kravets In this article and related resources Una shows how to create modern layouts with just a small amount of CSS. The layouts mostly use CSS Grid and Flexbox. And here are the layouts on Codepen:
-
Typography Basics
This post presents the basics of typography through a set of rules to follow. Like all rules they are made to be broken, but you should learn them first before you start breaking them. If you follow these rules your web typography won’t suck. It will most likely be pretty good. The simplicity of the…
-
Typographic Hierarchy
Most of the web is text so much of what you have to design is text. A typographic hierarchy helps the user to quickly scan a page and find information. Also, done right, it will make the page more visually attractive. Typographic Hierarchy tells the reader two basic things: Altogether, this information greatly helps people to quickly scan the…
-
Gestalt Principles and Web Design
A big part of graphic design in general and the web design we do in this class is communicating a message to a particular group of people (audience). The Gestalt Principles were created to help explain how people make sense of what they see. They are particularly useful for web design where we’re using a…
-
Media Queries
Overview In order to have a fully responsive web page you need three things: We have already covered Fluid Layout. When you use FR units (grid-template-columns: 1fr 1fr; ) you are creating a fluid layout. This post outlines the third item, Media Queries. Media Queries are CSS rules that allow you to apply CSS styles…
-
Responsive Images and Video
Images are by default inline elements that are a certain size and will take up that space on your web site. For responsive web design we need our images to be able to shrink in size if the container they are in is smaller than the image. For example: The following needs to be in…
-
CSS Games
These are games that help you to learn CSS. CSS DINER: SELECTORS GAME Play Game: https://flukeout.github.io/ This is a web game that requires you to write CSS Selectors. It’s a fun way to test your knowledge of writing selectors for CSS. It also explains the selectors so it can be a good learning tool as well.…
-
CSS Grid
CSS Grid is relatively simple to get started but it is also deep with a lot to learn. This page has resources about CSS Grid for those just getting started to exploring more complex layouts. In class we looked at My Examples: https://profstein.github.io/css-grid-basic-examples/ Reference Guides And Cheatsheets These help show all of the grid properties, usually…
-
Grid Layout Basics
A grid is a layout that you define in CSS that allows you to organize content on your page in Rows and Columns. In order to have a grid layout you need to combine HTML and CSS. In the HTML you will need: Example Creating a CSS Grid Step 1: HTML Structure We will use…
