I am currently on lesson 4 of Piccalilli’s Learn 11ty from Scratch. Here’s my impressions.
As mentioned in my earlier posts, I’m very new to static sites. This site uses 11ty’s official base theme and because I didn’t really know what I was doing (you can read this in one of my earlier blogs) I took forever to deploy the site. The portfolio portion of this blog uses plain ol HTML because I don’t know how yaml works. But not for long!
I’m only on lesson 4 and already I’ve learned so much! Oddly enough, the information being taught is applicable to all blog systems (especially Jekyll! My nemisis!). In fact the information is even helping me understand Tumblr’s new npf. Anyway, enough with the praise.
Who is this for? #
So far it seems, anyone who wants a site where they get to own the content. The separation of the look from the content means it’s easy to update a theme or port all your posts over from one SSG to another. Apart from Tatiana Mac’s post there wasn’t a good tutorial for those completely new to SSGs until this course.
This course is aimed at beginners who already have some knowledge of front end web development.
Eleventy is a Static Site Generator which is a JAMstack. JAM stands for JavaScript, API, Markdown so before the tutorial, you should know a bit about what’s essential in JAMstack:
- JSON
- HTML
- CSS and specifically SASS
- Markdown
- The command line
A stumbling block I ran into is .gitignore’s extension is .text. So when you create that file, save it as .gitignore. I didn’t know that and so left it with no extension.
An update: I “finished”* the course #
After lesson 18, things started to move very quickly. I was starting to get a hang of the whole create an HTML template, then it’s markdown companion and let its buddy JSON know what’s up. But I had a very hard time understanding GULP. Specifically what was going on. I think I just need to reread through it.
I thought I understood CSS but as it turns out, I only understood vanilla CSS.
This:
$gorko-size-scale: (
'300': $gorko-base-size * 0.75,
'400': $gorko-base-size,
'500': $gorko-base-size * 1.33,
'600': $gorko-base-size * 1.77,
'700': $gorko-base-size * 2.36,
'800': $gorko-base-size * 3.15,
'900': $gorko-base-size * 4.2,
'major': $gorko-base-size * 5.6
);
confused me. What does the dollar sign mean? Are these variables nested within variables?
Without an understanding of SASS I didn’t really know what I was doing. I didn’t completely understand the previous lessons either but I got an overall general idea and Andy Bell gave me enough knowledge and resources that I was confident I could fidget around with the files to understand how things worked.
But if the course was any more in depth it’d probably be 400 lessons instead of 31. That said I’m now learning SASS.
Another update #
I added a partial to my blog! I’m starting to understand liquid templates. Being able to add and edit new work is so easy now with templates. Man, partials and collections bring endless possibilities for 11ty.
I also migrated the blog to Netlify. It was very easy and required no additional fidgeting with the code.
In Conclusion #
You should take this course even if you know nothing about web development. Learning Andy Bell’s thought process alone makes the course worth it.
As mentioned a few times on this site, I design Tumblr themes. And I tend to design them directly in the native Theme editor with nary a planning.
This course showed me why I should plan. Bell did an amazing job emphasizing how modular the system we’re creating was. He’s so organized, it got me really thinking about how messed up my development process and how I have quite a lot to learn (this is a great thing!).
*it’s in quotations because the 6+ is absolutely true. There’s so much packed in here. I’m really taking the time to carefully read through the code and also go back through some of the lessons.