I’m making a “cheaters” tutorial for front-end web development based on using non-AI code generators for everything. For example, instead of centering a div yourself you just use a code generator that will do it later. It was inspired by the SSG for Newbies request post. I realized that I decided to use 11ty to make my work easier, but the comments on the post were all saying SSGs are for more advanced users. IMHO an SSG can be easy if you have good logic and step-following skills. So I want to make a tutorial to learn the least amount of code necessary to use Nunjucks.
Maybe this is a project that goes counter to everything we stand for or something along those lines, but I realized that some people who use AI to generate stuff are just looking for a path of least resistance, and don’t know that there are already a bunch of smaller tools that they can use to build a site. Also some newer devs want to just jump in and experiment or just start posting art or writing or whatever, but they want something more custom than Wordpress.
Anywho does anyone have good tools for generating responsive layouts, accessible code, getting widgets, or tutorials that already address things you might have been confused about while learning? Or really any suggestions/ideas. And yes, I did look at the forum masterlist, but sending others is appreciated!
Here’s the current list, which you can edit freely: Etherpad
Forgot to mention that any contributions I use, you can get credit for!
I really like Sarah’s CSS Grid Generator. You visually choose what kind of grid areas you want and it will give you the corresponding HTML and CSS you can copy to your project.
the various layout generators on the masterlist are a good start! there’s also various wysiwyg type hosts, like strawpage or hotglue, but those are on there already…
these might be too specific for what yu’re doing, it sounds more broad, but just in case, i like these -
i think generally the biggest problem people who’re still learning have is not really knowing how to find the resources/help they need! either due to a general lack of computer skills (ex. not knowing how to use search engines to find answers to questions) or due to not knowing specific terminology (ex. a lot of people want a wysiwyg editor but don’t know the term “wysiwyg”, or want to make boxes farther apart but don’t know what “margins” are in a css context)
so i think having a glossary accompanying whatever tutorials you’re making would be good! also difficulty level ratings for things, like how a lot of other craft tutorials like knitting etc often note if something is good for beginners, particularly difficult, has prerequisite skills, etc. there’s a really wide range of skill/knowledge levels when it comes to making a website so it’s hard to boil down precisely, but i think giving a general indicator is still valuable probably!
thank youuu I will def be taking the glossary and difficulty ratings into account! This guide is def made for people who wanna Speedrun a skill, so I’ll put some prerequisite positive attitudes there too lol. One of my only concerns with this project is minimizing git/terminal use, but it’s gonna be very much “follow these steps exactly and do XYZ if you get an error”
@brennan not to be annoying but can I use ur website code as a way to help ppl learn how to use 11ty? I’m going for a “Steal like an artist” type thing where you can trace a few people’s steps to find out what code does what and then go do your own thing (Ex. how will I make a floating sidebar or scrolling marquee)
Edit: I also have Petrapixels and one other person in mind, since you all have different boundaries around your public code. I figure it’s a chance for people to learn the etteque around studying other’s work
Not annoying at all, I encourage people to use all of my work freely.
To get into the weeds of it: my code is under AGPL and my writing is under CC-BY-SA, these both mean you can use my work however you like (including for commerical profit) so long as you credit me and your work is licensed under the same terms.
But, really, if someone steals my work and doesn’t name me I don’t give a fuck.