A library of learning resources from Nigel Peck, a teacher and mentor of web development and JavaScript software engineering.
"Master software engineering for the web with teaching and mentoring available Monday to Friday."
This is a collection of online courses and resources that are generally recommended or mentioned in sessions. Use your own judgement with what works for you and discuss it with Nigel.
Just starting out? Towards the end you’ll find three suggested projects that you can work with to gain some experience with what web development is all about. Create a website, make an API and write a command line script.
The MDN Web Docs site features comprehensive coverage of all front-end web technologies. With HTML, CSS, JavaScript and HTTP being the main contenders.
It’s from the folks who create the Firefox web browser. Many of the links here are from MDN.
Our very own “class notes” collection features summaries of important topics along with carefully chosen links to help you study.
They’re generally written in preparation for sessions with students and then shared here.
There’s not a great deal of them yet but there are enough to be useful and a lot more on the way.
Class Notes
library.peckn.net/class-notes
We’re really excited about this resource. It’s the main focus of our content development at the moment.
After starting as Markdown files on GitHub Pages it’s rapidly growing to become a substantial database. Or at least on its way to becoming that.
The idea is to have a collection of building blocks for software that you can learn and use beyond the basic constructs. It’s how programming works anyway, but mostly we pick them up as we go along.
The pattern library enables you to learn and use them directly rather than coming across them by chance or figuring them out due to need.
These are not rules. They’re ideas. To build on, work with, learn from, combine and to make your own.
Software Engineering Patterns
library.peckn.net/patterns
Just starting out? Or ready to refresh the basics? Working through these will give you a solid grounding in the essentials.
Getting Started with the Web
developer.mozilla.org
Structuring the Web with HTML
developer.mozilla.org
Introduction to HTML
developer.mozilla.org
Learn to Style HTML Using CSS
developer.mozilla.org
Learn JavaScript
developer.mozilla.org
This covers both the core language and the web browser environment (the front-end).
The Modern JavaScript Tutorial
javascript.info
This is the main JavaScript guide from MDN Web Docs. It covers the core language.
JavaScript Guide
developer.mozilla.org
There’s a lot of information here. We start with a full index of all web technology content from MDN. The next two are key selections from that. Finally there are guides for learning Node.js, TypeScript and GitHub.
[Complete Index of MDN Covering All Front-End] Web Technology for Developers
MDN: Web Technology for Developers
[Complete Index of MDN Front-End] Developer Guides
MDN: Developer Guides
[Complete Index of MDN Front-End] Tutorials for Web Developers
MDN: Tutorials for Web Developers
Node.js Walkthrough
Run JavaScript anywhere. Back-end starts here.
nodejs.org
TypeScript Documentation
Upgrade your JavaScript to leverage types.
typescriptlang.org
GitHub Skills
Learn all about this important platform.
skills.github.com
Ready to learn all the details? To gain some deeper understandings? Here’s a set of deep dives in to some of the essential areas of web development that it can help to know well.
Objects in JavaScript
developer.mozilla.org
Asynchronous JavaScript
developer.mozilla.org
Client Side Web APIs
developer.mozilla.org
HTML Forms
developer.mozilla.org
Page Load Time Optimisation
developer.mozilla.org
Browser Extensions
developer.mozilla.org
How Browsers Work
web.dev
Differences Between Node.js and the Browser
nodejs.org
The Event Loop
developer.mozilla.org
Cascade, Specificity, and Inheritance
developer.mozilla.org
”While working through this lesson may seem less relevant immediately and a little more academic than some other parts of the course, an understanding of these concepts will save you from a lot of pain later on! We encourage you to work through this section carefully and check that you understand the concepts before moving on.”
~ Well said, MDN! The same could be said of a lot of the learning that you can find from this page, although the specific quote is from the link below.
CSS Layout Guides
developer.mozilla.org
CSS Flexbox Layout Guide
css-tricks.com
CSS Grid Layout Guide
css-tricks.com
CSS Grid vs. Flexbox: Which to Use and When
levelup.gitconnected.com
Using CSS Animations
developer.mozilla.org
HTML Reference
developer.mozilla.org/en-US/docs/Web/HTML
CSS Reference
developer.mozilla.org/en-US/docs/Web/CSS
JavaScript Reference
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
Web APIs
developer.mozilla.org/en-US/docs/Web/API
Event Reference
developer.mozilla.org/en-US/docs/Web/Events
HTTP Reference
developer.mozilla.org/en-US/docs/Web/HTTP
Node.js Documentation
nodejs.org/docs/latest/api/
freeCodeCamp
freecodecamp.org
MDN Curriculum
developer.mozilla.org/en-US/curriculum
Frontend Masters
frontendmasters.com/trial
The Odin Project
theodinproject.com
Hyperskill (Partner with JetBrains)
hyperskill.org/courses
Codecademy: Learn JavaScript
codecademy.com/learn/introduction-to-javascript
JS Challenger
jschallenger.com
Edabit
edabit.com/challenges
CodingJS
the-winter.github.io/codingjs
Code Wars
codewars.com
LeetCode
leetcode.com
Codility
codility.com
CSS Challenges
wikiversity.org
WebStorm: The JavaScript and TypeScript IDE, by JetBrains
jetbrains.com
Node.js — Run JavaScript Everywhere
nodejs.org
Developer Tools
developer.mozilla.org
Postman
postman.com
TypeScript
typescriptlang.org
Markdown
markdownguide.org/basic-syntax
Homebrew — The Missing Package Manager for macOS (or Linux)
brew.sh
Node Version Manager - Manage Multiple Active Node.js Versions
github.com
Git Bash/Git for Windows
git-scm.com
Get Started with WebStorm
jetbrains.com/webstorm/learn
Getting Started with Git
docs.github.com
Using Git
docs.github.com
Pro Git
git-scm.com/book/en/v2
Introduction to PowerShell
learn.microsoft.com
This can be great practice for working with web technologies. Jekyll is a simple and powerful system that’s easy to learn. GitHub Pages is a free and well designed system for easily using it. Improve many important skills. Not least Git itself.
Creating a GitHub Pages Site
docs.github.com
Setting up a GitHub Pages Site with Jekyll
docs.github.com
Adding a Theme to your GitHub Pages Site Using Jekyll
docs.github.com
About GitHub Pages and Jekyll
docs.github.com
Extras: Embed HTML in Markdown • Embed Markdown in Jekyll HTML • View Build Logs
Docs: Jekyll • GitHub Pages
Interested in learning to create APIs? Strapi is a great system for getting in to that. You can do everything with their admin interface (no coding) or customise everything with code to get more advanced.
This library site itself integrates Strapi with GitHub Pages to manage the Markdown for the content for the class notes and pattern collections.
It’s easy to get started. You can have an API going in less than an hour and build from there. Use it to create a back-end API for your front-end to use.
Strapi Quick Start Guide
docs.strapi.io
Strapi Admin Panel User Guide
docs.strapi.io
Strapi Developer Docs
docs.strapi.io
Integrate it with a Node.js command line script to generate HTML or Markdown for your site, practice with fetch to query the API, or whatever else you can think of.
Did you know that you can use Node.js to run JavaScript from the command line or terminal on your computer?
You wouldn’t have access to any browser APIs, but Node.js comes with its whole own set of APIs for working with the operating system.
Like file access, network access, running other programs, launching software. There’s all kinds of useful stuff that you can do.
Add any library from Node’s massive and open package library - npm - and use it from the command line to do quick tasks. Write complex scripts or even create full applications.
Introduction to Node.js
nodejs.org
How To Build Command Line Applications with Node.js
digitalocean.com
Mastering API Requests: Using Fetch with Strapi’s Content API.
strapi.io
Extras: Introduction to npm • Node.js Documentation
W3C: World Wide Web Consortium
w3.org
WHATWG
whatwg.org
TC39: ECMAScript
ecma-international.org/technical-committees/tc39
TypeScript
github.com/microsoft/TypeScript
List of Internet Organizations
https://en.m.wikipedia.org/wiki/List_of_Internet_organizations