To help learn this and see where your knowledge is at, play this Kahoot: https://kahoot.it/challenge/03134716?challenge-id=9cb2a986-5d28-4e20-be39-7df9e016bd5e_1649711322902 Copyright In order to use content that someone else created you need to have them give you copyright. This can be done directly (like if someone emails you to say you can use the content or, more formally through a… Continue reading Copyright, Credits and Attribution
Author: Christopher Stein
Week 10: 4/4 + 4/6
This is the last week of class before the Eleventy Site projects are due. Monday 4/4 Eleventy Site Project Rubric We will go over the Eleventy Site rubric at the start of class. Example Portfolio Project Here is the example portfolio project I showed in class (thanks to Minglin): GitHub Repository: https://github.com/profstein/example-11ty-portfolio Netlify Deploy: https://clever-jalebi-3cce87.netlify.app/… Continue reading Week 10: 4/4 + 4/6
Template and Collections Walkthrough
This series of videos goes through what templates are, how they work and shows how to work with Collections created with tags in Front Matter. Part 1: Templates, Collections and Loops This part goes through what templates are, why and when to use them. It also covers Collections and how they’re created and the basics… Continue reading Template and Collections Walkthrough
Convert Responsive Site to 11ty
This isa series of videos that walk through the process of moving your site from the HTML/CSS Responsive site to an 11ty site. Part 1 Set Up Creating the Eleventy Repository and setting up GitPod as the editor. Part 2: Create Markdown Files Create a Markdown file for each of the HTML files in your… Continue reading Convert Responsive Site to 11ty
Week 9: 3/28 + 3/30
Monday 3/28 Design + UI + Accessibility Today we are going to look at a page with some issues related to design, UI and Accessibility (A11y is another way you might see it). Visit This Pen: https://codepen.io/profstein/pen/YzYQKvJ Try to edit it to make it better Get in Pairs (I will randomly assign) We will talk… Continue reading Week 9: 3/28 + 3/30
UI Tips
Here we’re going to collect some tips to help you when creating and modifying your site UI. UI stands for User Interface and are the elements people use on the site. Dividers are not always needed [tweet] Increase whitespace (when appropriate) [tweet] Containers are overrated [tweet]
Color
This is a quick resource. It will be filled in more later Color Contrast Checkers Lea Verou’s Contrast Ratio WebAIM’s Contrast Checker Deque University’s Color Contrast Analyzer Adobe’s Leonardo Corey Ginnivan’s Who Can Use For more information read Christopher Schmidtt’s Color Theory and Contrast Ratios Other Tools Accessible Palette https://accessiblepalette.com/ Pantone Connect https://connect.pantone.com/ Deep Dive If you want to really… Continue reading Color
Typographic Resources
Some Resources on Typography. Posts on our Class Site
Eleventy Configuration
The content on this page is created by you in group sessions. The questions are provided by Prof Stein and the answers by students. What do Configuration (config) files do? What is their role in the Build Process? Configuration files use Javascript to root directory of a project to configure Eleventy to a person’s own… Continue reading Eleventy Configuration
Eleventy Content Pages
The content on this page is created by you in group sessions. The questions are provided by Prof Stein and the answers by students. Where are Content pages saved in the 11ty folder structure? The content pages are saved in the Markdown. What is Front Matter and What kind of information is stored there? The… Continue reading Eleventy Content Pages
Templates
The content on this page is created by you in group sessions. The questions are provided by Prof Stein and the answers by students. What are Templates? A template is a reusable format for web content. How are Templates used in Eleventy? It use to avoid writing the same formatting over and over. What Language… Continue reading Templates
Static Site Generators
The content on this page is created by you in group sessions. The questions are provided by Prof Stein and the answers by students. What is a Static Site Generator (SSG)? What does it do? A tool that generates a full static HTML website based on raw data and set of templates What are some… Continue reading Static Site Generators
Week 8: 3/21 + 3/23
Monday 3/21 Today we are going to talk about the Responsive Site feedback. Answer questions and give you time to work on moving your responsive sites over to Eleventy. On Wednesday we will do more work on your Eleventy knowledge, some pair work and more as we progress into learning Eleventy. We will also start… Continue reading Week 8: 3/21 + 3/23
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 and GitHub). They have a generous free pricing tier that is great for the kind of… Continue reading Deploy to Netlify
Week 7: 3/14 + 3/16
This week we are wrapping up the Responsive Site and starting our Eleventy Site. Monday 3/14 Today we are going to start to talk about our Eleventy Site projects. This class we will start on what Eleventy is and use a basic starter template. In future classes we will cover the project requirements, due date… Continue reading Week 7: 3/14 + 3/16
Responsive Navigation
There are a large number of ways to do responsive navigation. This post contains three examples from CodePen and then links to some sites that offer navigation examples that you can copy and paste.
Week 6: 3/7 + 3/9
This week we will focus on working on your Responsive Site projects. Monday 3/7 Activity 1: Checkin and Poll We will do a quick general checkin and have a chance to see how you’re feeling about your projects. General Poll: https://app.sli.do/event/whKFvY1QyuDdEowYKZirCJ Responsive Site Poll https://app.sli.do/event/rUWi8mqokMjdE4PoVRgcVM Activity 2: Git Workflow I will go over some of… Continue reading Week 6: 3/7 + 3/9
Publish with GitHub Pages
Actually putting your site on the web where anyone can see it is called publishing your site. This post describes how to publish a site using GitHub Pages. Pages are a free feature of public GitHub repositories and a great way to host a basic site. Free web hosting through GitHub! 1. Click on the Settings… Continue reading Publish with GitHub Pages
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… Continue reading Responsive Images and Video
Submitting the Responsive Site
Here is what you will need to do to submit your responsive site Publish the site with GitHub Pages View your published site in your browser. Copy the URL. It should be something like https://your-user-name.github.io/your-project-name Go to Blackboard for our course Click on Assignments > Responsive Site Paste in your URL in the text area… Continue reading Submitting the Responsive Site
