• Stars
    star
    121
  • Rank 293,924 (Top 6 %)
  • Language
  • Created about 3 years ago
  • Updated 9 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

In this Eleventy course, we go from a completely empty directory to a full-blown marketing site for a design agency, and along the way, we dive really deep into Eleventy and front-end development best practices.

Learn Eleventy From Scratch

This course was originally authored by Andy Bell and published on Piccalilli.

⚠️This content is likely out of date

The content of this course was written in May 2020, so parts will be outdated. There’s no immediate plan to do a full update, but this course is now open source, so if you see an issue, please raise an issue.

Contributing

All content changes must first be raised as issues where they will be discussed. If you submit a PR without an issue, it will unfortunately, be closed immediately.

All content additions will also be subject to an editing process to make sure the language and flow aligns with the rest of the course.

All the content lives in src/docs.

Licence (MIT Licence)

Copyright 2020 Andy Bell

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Running the site locally

Open the site directory in your terminal, then run npm install. Once that is done, run npm start.

Content that needs attention

  • Lessons 18 through 21 need gulp removing and replacing with a simpler, NPM scripts setup

More Repositories

1

modern-css-reset

A bare-bones CSS reset for modern web development.
CSS
2,949
star
2

hylia

Hylia is a lightweight Eleventy starter kit to help you to create your own blog or personal website.
Nunjucks
906
star
3

boilerform

Boilerform is a little HTML and CSS boilerplate to take the pain away from working with forms.
CSS
713
star
4

vanilla-js-state-management

A state management system built with vanilla JavaScript with a little demo included
JavaScript
461
star
5

gorko

A tiny Sass token class generator.
SCSS
442
star
6

beedle

A tiny library inspired by Redux & Vuex to help you manage state in your JavaScript apps
JavaScript
386
star
7

goron

A simple design token utility class generator
JavaScript
129
star
8

mybrowser.fyi-project

Where the roadmap and issue tracker for https://mybrowser.fyi live
94
star
9

CUBE-with-tailwind

CSS
91
star
10

11ty-base

Eleventy base project
Nunjucks
87
star
11

npm-uninstall-facebook

CSS
85
star
12

hebra

Hebra is a skeletal Eleventy starter kit that gives you nothing but good ol’ HTML and an RSS feed. It serves as the ideal kick-off point for your projects.
HTML
55
star
13

personal-site-eleventy

My site on Eleventy, powered by WordPress and Notion
JavaScript
54
star
14

some-nice-basic-css

HTML
49
star
15

vanilla-js-state-management-boilerplate

The boilerplate to help you build the vanilla state management system
CSS
43
star
16

tatl

A tiny base component to guide you to a consistent Web Component authoring experience
JavaScript
33
star
17

typemate

A little JavaScript module that fixes your typesetting
JavaScript
31
star
18

stalfos

A skeletal collection of Sass helpers with a handy CSS utility class generator.
JavaScript
31
star
19

companies-that-work-with-ice

This is an open source list that you can contribute to
CSS
31
star
20

11ty-base-no-blog

SCSS
28
star
21

educationlinks.fyi

The Coronavirus Pandemic has resulted in school closures in many countries around the globe, so here is a collection of links to help you and your kids to access loads of resources from around the web.
CSS
28
star
22

personal-site-hylia

My personal site, running on Hylia!
HTML
25
star
23

minimal-react-base

This is a little starting point for if you want to sling some React on a HTML page with some CSS.
JavaScript
22
star
24

11ty-pattern-library

Nunjucks
18
star
25

soot-theme

A VS Code theme that's nice and greyscale
13
star
26

progressive-vue-toggle

A demo of how Vue's scoped slots can be handy for progressive enhancement
HTML
8
star
27

webcomponents.club

My little blog about learning web components
HTML
5
star
28

gorko-themes-demo

SCSS
4
star
29

hylia-preview

HTML
4
star
30

chizlvim

My Vim settings
Vim Script
4
star
31

thanksforthereply.com

A fun little web app to thank reply guys
JavaScript
3
star
32

post-helper

A little helper PWA that makes posting notes to my microblog easier
HTML
3
star
33

time.hankchizljaw.com

CSS
3
star
34

2018-goals

My goals for 2018 in a repo for accountability and for me to keep a log of what I've achieved
3
star
35

beedle-vue-demo

A little demo to show how you can use Beedle with Vue JS without a connector
Vue
2
star
36

vim-jsdoc

Vim Script
2
star
37

belkirk-jekyll-demo

HTML
2
star
38

magical-kicks

HTML
2
star
39

CT4009-php-and-mysql

A basic comment form that saves and retrieves data from a MySQL DB
PHP
1
star
40

2019-goals

Goals that I want to acheive in 2019
1
star
41

11ty-js-template-quick-example

JavaScript
1
star
42

weekly-todos

HTML
1
star
43

demos

A little repo to house demos for content on https://piccalil.li/
CSS
1
star
44

base-front-end-project

A useful front-end base project. A little SCSS framework is included along with a mini jQuery starting point. A HTML5 boilerplate is added for good measure too.
CSS
1
star
45

stalfos.io

The Stalfos documentation website
JavaScript
1
star
46

CT4009-sessions-and-cookies

PHP
1
star
47

gorko-custom-props-demo

A little demo to show Gorko using custom properties
SCSS
1
star