web development

table of contents

• for things i've used
• getting started
  • site hosting services
  • coding help
    • general
    • javascript
    • PHP
  • code editors
  • accessibility references
• extending the basics
  • quick tools
  • libraries
  • templating languages
  • develop & deploy
• miscellaneous
• even more resources

¶for things i've used

refer to the "credits" page.

¶getting started

¶site hosting services

view the full list: /resources/webdev/site-hosts

¶coding help

¶general

• w3schools

  learn all the frontend languages (HTML, CSS and javascript) in addition to server-side programming (PHP, SQL, and more).

• w3docs

• MDN web docs

  a more in-depth reference for frontend development, with additional documentation on web accessibility.

• freeCodeCamp

• ronreiter/interactive-tutorials

  a collection of sites for learning up to 13 different programming languages.

¶javascript

• the modern javascript tutorial

• javascripttutorial.net

• you might not need jQuery 👑

  this is a good supplemental reference if you're a staunch vanilla javascript purist 👍

¶PHP

• PHP the right way 👑

• clean code PHP

• phptutorial.net

• the official PHP manual

¶code editors

view the full list: /resources/webdev/code-editors.

¶accessibility references

a free internet is an accessible internet - ideally, a website's design should accommodate a wide range of visitors, included disabled people and assistive technology users.

• the ultimate *** website 👑

  i actually found this site from frills' accessibility master post!

• for checking the accessibility of my website, i personally use the following tools in tandem:

  • WAVE

  • axe browser extensions by deque

¶extending the basics

¶quick tools

• CSS generators

• CSS portal

¶libraries

view the full list: /resources/webdev/libraries.

¶templating languages

• pug

  pug uses whitespace and indentation instead of tags for rendering HTML. it has a few other features, such as includes, template inheritance, and markdown rendering.

  it is possible to skip npm install entirely and compile pug within vscode using the compile hero extension. a command line interface is also available.

  pug is also available for PHP as phug.

• twig

  a template engine for PHP, with syntax akin to nunjucks for javascript and django for python. also supports converting markdown to html and vice versa.

• sass

  a CSS preprocessor - super useful for polyfilling nested styles and vendor prefixes for older browsers. sass variables are also much more flexible than regular CSS variables.

  sass can be precompiled with compile hero or live sass compiler for vscode.

¶develop & deploy

• deploy-to-neocities github action

• prepos

  a standalone compiler program that supports many templating languages and language extensions, such as sass, tailwind CSS, pug, and markdown. it can also compress javascript, CSS, and image files. comes with a built-in web server, too!

¶miscellaneous

• a guide for blocking AI/ML scraper bots 👑

• HTML validator

• RSS/atom feed validator

• IndieWebify.Me

  also features a microformats validator.

¶even more resources

• tiny tools

  a massive list of free tools for any interactive project.

• awesome design tools on github

• makerpad

  tutorials and apps for building web projects that scale with minimal coding knowledge.

• 32-bit cafe 👑

  a community of personal web enthusiasts - they also run a discord server! 18+ only, SFW.

• DEV community