Skip to content

Eleventy Portfolio Project

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 16

The class on the week of Tuesday, April 9 will cover topics related to Eleventy but not necessarily be devoted to the Eleventy Site project. We will be starting the group project as well that week.

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.
Related Resources
Miro Boards on the proper 11ty structure.
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 Resources
Class on Deploy to Netlify [1:49:50]
Eleventy Portfolio Ready for Deployment post
Web Design Workflow Overview (miro)
View Organizations in Github Settings
Deploy to Netlify post
Link to sign in to Netlify
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 Resources
View from [1:08:07] on 4/2 class: Transferring Files and Website Adjustments Smart Chapter
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
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 Resource
On this post: View the code under Update to .eleventy.js setup file
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 Resources
Eleventy Collections (miro)
Up to 10%

Leave a Reply