Converting HTML site to 11ty site
The link below is to a video recording walkthrough of moving an HTML site to an Eleventy site.
Related Resources
HTML to 11ty Miro (I show this in the video)
11ty Page Breakdown Miro (how …
Resource
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 …
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:
- Be clear about who
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 …
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 …
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 …
Miro Boards
Throughout the course we use Miro to provide visual explanations of the topics we’re covering. Below are links to the boards, grouped by topic
Web Design Process and Principles
Site Visualizations
Examples of site visualizations for
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.
- Article
Deploy to Netlify
This post covers how to get your site in the web using Netlify’s servers.
TERMINOLOGY
Some words you might not know
- Netlify: Netlify is a hosting platform specializing in hosting projects build with workflows like ours (static site generator
Eleventy Portfolio Ready for Deployment
Follow this to make sure your Eleventy Portfolio Site Project is set up correctly so you are using the right repository and can deploy to Netlify.
Remember that this project is taking what you did in the first Responsive Portfolio …
