Contents
Overview
The Eleventy Site Project is taking the HTML/CSS/JS from your Responsive Site project and creating a site that is created with the Eleventy Static Site Generator and is hosted on Netlify.
Due Date
Tuesday, April 18
The class on the week of Tuesday, April 18 will cover topics related to Eleventy but not necessarily be devoted to the Eleventy Site project.
Submitting the Eleventy Site
This page has more information on how to submit the midterm and schedule your presentation time. View Submitting the Eleventy Site post.
Eleventy Site Scoring Rubric
SCORING RUBRIC
| Scored Areas | % of Overall Score |
| Organization – eleventy config files (.eleventy.js, package.json) – content in Markdown files – template (at least base.njk layout template) – passthrough folders (css – js – images) Most of this should be in place from using the GitHub Classroom template when using the and there are Miro Boards on the proper 11ty structure. Related Videos Starting Eleventy Personal Site Repository [ 19:43] | 20% |
| Deploy The site is deployed through Netlify – The files are stored in a GitHub Repository – Netlify is connected to the repository and publishing the site Related Videos Screencast of Deploy to Netlify Change Public Directory and Trigger Deployment Manually [8:49] Netlify Setup walkthrough and Change Site Name [4:02] | 10% |
| Content The content of the site is there as described in your Project Brief. Please note any major changes when submitting file in Blackboard. | 15% |
| Page Content You have created Markdown files for your site pages. These have the proper front matter and Markdown/HTML content. Related Videos Adding Stub Pages to get ready to transfer page Content [11:32] Converting HTML/CSS site to 11ty (on 3/21) [34:01] Converting Responsive HTML/CSS to Eleventy (on 3/16) [53:48] | 15% |
| Templates You have at least one base template that is used to display your page content. Repeated site elements like header/nav/footer should be in templates. Related Videos More about Templates and how base.njk works with content [6:14] | 15% |
| Responsive Your site is still responsive (based on responsive site) using – Flexible Images – Fluid Grid – Media Queries as appropriate. | 10% |
| Passthrough – Your CSS files are properly passed through and included. – Your image files are properly passed through and included. – Your JavaScript files are properly passed through and included. It’s OK if you don’t have JavaScript Files. Related Videos Converting Responsive HTML/CSS to Eleventy (on 3/16 – look for Move Passthrough Files Chapter marker at 10:23) [53:48] | 5% |
| CSS Your CSS – doesn’t have syntax errors – has meaningful class names | 10% |
| Extra Credit You can receive extra credit for using Collections and Templates. Related Videos Using Collections in 11ty Overview [14:43] Collections: Hands-on example of making/showing collections using template code [28:17] Eleventy Collections (miro) | Up to 10% |
