Skip to content

A website I made using 11ty in which I followed a tutorial and also designed a calculator as an extra page.

Notifications You must be signed in to change notification settings

danielharrington06/eleventy-from-scratch

Repository files navigation

11ty From Scratch

I spent a week with a web development company in London that specialises in branding and marketing, called Dusted, for Work Experience. During this time I followed this course to make a website with nodeJS and an SSG (static site generator) called 11ty (eleventy).

https://learneleventyfromscratch.com/

I really enjoyed the week, especially as I was pushed to work with parts of programming that I wouldn't typically be drawn to i.e. web design.

I learnt about lots of different technologies involved with building websites as well as about how a branding, marketing and web development company functions.

For the website, I first wrote out the structure with html and Front Matter. What shocked me about this (but also made a lot of sense once I had thought about it) was how fragmented websites are. As I hadn't given it much thought before, I had some idea that each web page was written out in its completeness, including the header, navigation bar, content and footer. Of course, this would be ridiculous and very inefficient.

After I got a hang of this, I included some javascript for the nav bar so that you could navigate between pages.

Then, I used a gulpfile to convert SCSS to CSS and style the website. Initially I did not enjoy this part as it felt quite abstract and unexplained to my more algorithmic mind. I later found out that I was also getting quite frustrated at how my web page wouldn't update as it should when I saved changes in the SCSS files. Once I had fixed the accidental typo in a javascript file and the problem was fixed, I seemed to understand how my changes were almost immediately taking effect (as opposed to restarting the nodeJS watcher every time).

On the last day, as I had completed the tutorial, I spent time making a calculator as an additional page on the app. This used more javascript than the rest of the project and also was more mathsy and process based (rather than design based) so I enjoyed this the most.

About

A website I made using 11ty in which I followed a tutorial and also designed a calculator as an extra page.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published