An overview of the fundamental ways you can dynamically change a page with JS.
week01-project01-basics
spikes
CSS architecture
How should you write CSS to ensure it's easy to read, maintain and scale as a website grows?
Questions to consider
Why are CSS naming conventions useful?
When might specificity become a problem?
How can composition help us build UIs?
CSS layout
How does CSS decide where to put elements on the page?
Questions to consider
What is the box model?
How does the display property affect layout?
How does the position property affect layout?
Responsive design
How do you design and build a webpage that looks good on any device?
Questions to consider
What CSS units should we use for dimensions? What are absolute and relative units?
When should you use a media query? Are they only for screen size?
How can mobile-first CSS make responsive styling easier?
Github projects
Questions to consider
How can we leverage Github projects to help us plan and track work?
Accessibility
How do you write markup so that your page is accessible to as many users as possible?
Questions to consider
Who does semantic HTML benefit?
How does ARIA relate to HTML?
What's the difference between accessible and inclusive?
Homework
This is a guide to what you should be doing for homework each week. Please reach out to your CFs if you are unsure of what to prioritise between sessions.
Complete the Git, CSS, Semantic HTML, Accessibility and HTML forms workshops ahead of Week 1
Complete the Asynchronous JS, Promises & fetch, Real-world fetch and Promise practice workshops ahead of Week 2
Complete your user manual
Complete your Week01 progress log
Complete github profiles
Project work
Create a presentation on HackMD
project
Your project this week is to build a frontend for one of the APIs from REST API week. It should be a single-page app rendered with client-side JavaScript.
If your team don't have a finished API, or don't want to use it, you can use the Dogs API from the workshops. The readme contains documentation of all the endpoints.
User stories
Core
As a user, I want to: see all the resources
As a user, I want to: sign up for an account
As a user, I want to: log in to my account
Stretch
As a user, I want to: update my own resources
As a user, I want to: delete my own resources
Since this project is open-ended you'll need to write your own more specific user stories once you know what you want to build.
Acceptance Criteria
Stretch criteria
We'd like you to spend some time before starting the course working on useful fundamentals.
Digital Ocean's Command Line Primer is a great intro to using your terminal. It says it's for Linux but it's applicable for Macs, and Windows if you're using something like WSL or Git Bash.
Try to practice using your Terminal to navigate your computer as you're working on other tasks.
GitHub's Markdown introduction introduces using the Markdown language to quickly write simple HTML. Practice your Markdown by writing README.md files for your GitHub repositories. Try to include some headings, lists, images, and maybe even a table.
Execute Program is an interactive code learning platform. Their JS Arrays course is a great recap of things you might have already come across, and should also have some interesting new things.
You should be able to get started with a free account—we can get you paid access later when this runs out.
learning-outcomes
Accessibility
Design
Workflow
HTML Forms
project
Your challenge is to build an agency website for your team.
Your website should give potential clients:
An introduction to your agency
Information about each member of your team
A way to get in touch if they are interested in working with you
User Stories
A is a description of one or more features of a piece of software.
Core Stories
As a potential client, I want to:
See information about each member of your team so that I can know who you are
Browse your website on mobile, tablet, and desktop devices
Click to navigate to different sections of your webpage
Additionally, as a visually impaired user, I want to:
Navigate your website using keyboard controls
Hear my screen reader describe the content on your website
Repository naming convention
Please name your repo following this template: PRO01_Name1_Name2_Name3_Name4
Acceptance Criteria
User stories come with - a detailed scope of a user’s requirements.
Navigation menu
‘About us’ section
Contact form
A user cannot submit a form without filling out all of the mandatory fields (name, company name, email address)
Stretch Goal
Use the automatic trigger functionality of your .
Finally, feel free to get creative with the content of your website! Good luck!
Week of September 9th
This week is focused on the fundamental building blocks of web pages—accessible, semantic HTML, and well-organised CSS.
Workshops
To be completed AHEAD of Week01
To be completed on Induction day
. Repo name: Work01_Git_YourName
. Repo name: Work02_GitHubProjects_YourName
To be completed on Week01
. Repo name: Work03_Async_YourName
. Repo name: Work04_FetchAndPromises_YourName
. Repo name: Work05_Fetch_YourName
Execute Program
Topics
Safeguarding Quiz
Dev machine setup
Project planning and development (GitHub Projects)
As a user, I want to: add my own resources
Form for adding new resources (only for logged in users)
A comic explaining what happens when you type a URL into your browser.
Describes the HTTP protocol in a lot more detail. May be useful if you like learning exactly how stuff works under-the-hood, but may also be overwhelming.
How functions and callbacks work in JavaScript. Based on a workshop from this week's curriculum.
Good testing practices so you can be confident your tests are working.
A comparison of creating DOM elements manually versus using the <template> element. Useful technique if you're dynamically rendering lots of stuff with JS.
Week of September 16th
Learn how to manage asynchronous tasks and send HTTP requests using JavaScript.
Workshops
To be completed on Monday
. Repo name: Work08_Node_YourName
. Repo name: Work09_NodeAndExpress_YourName
To be completed on Friday
. Repo name: Work10_IntroTesting_YourName
. Repo name: Work11_TestLibrary_YourName
. Repo name: Work12_UnitTesting_YourName
Execute Program
Topics
Introduction to commonJS modules
Introduction to testing
Introduction to Express
Intro to testing, Build a testing library, Unit testing, Integration testing and TDD workshops
A framework agnostic tool that allows for quick setup of a React app with TS
Official React docs on typescript with interactive examples
A quick reference guide to basic React patterns
A more guided resource of this material
A powerful hook for passing state values in your application without prop drilling
Figma
Basic exercises for beginners
UI for Quizzer App
Your project this week is to build the front end to consume the RESTful API you designed and built last week. You should think and plan what features and look you want to your quiz app to have. You might considered making some wire frames or a prototype using a tool like Figma.
User Stories
As a quizzer, I want to:
Begin a quiz session with randomly generated questions.
Filter quiz questions by subject and difficulty.
Select a chosen number of questions.
See a summary of my results after completing a quiz.
Add, edit, and delete quiz questions and answers.
Stretch user stories
Like particular questions and filter by this category.
Acceptance Criteria
Stretch criteria
Repository naming convention
Please name your repo following this template: PRO03_FRONT_Name1_Name2_Name3_Name4
Testing and deployment
Testing
Deployment
Understand the process of building and optimizing the application for production (S10, S14, B3)
Server-side logic for quiz generation and processing
Error handling and validation in API development
CRUD operations implementation
API documentation techniques
Asynchronous programming in JavaScript
Introduce learners to the concept of an ‘elevator pitch’
Learners will develop an end-to-end dynamic e-commerce web application where users can browse and purchase products online.
The frontend of this project will be built using React. For the backend, it will use Node.js and Express to handle server-side functionality. User accounts and product data will be stored in a SQLite database.
Project
Your project for the next week will be to develop a Express backend connected to a SQLite database and linked to a React frontend. Your UI should provide methods so that users can search for and display information about items and add them to a shopping cart. It is up to you to determine the process and order you take to achieve this, but should plan this carefully and attempt to anticipate any hurdles you approach will encounter.
Spike
Before you start writing features you need to design the schema for your data. Think about what different things your app needs to store, how they relate to each other, and how you can avoid duplicating information. Record your schema in your README.md using Markdown tables. Consider embedding a to help visualise the relationships.
Questions to consider
What kinds of data relationships are there?
What’s a foreign key? How can they help us design schemas with relational data?
User stories
As a shopper, I want to:
See a homepage with content when I log in
Be able to navigate between different pages of the app
View a list of products when I visit the products page
Stretch user stories
View and edit items in my shopping cart
Complete the checkout process to "purchase" products in my cart
See confirmation when an order is placed successfully
Repository naming convention
Please name your repo following this template: PRO04_Name1_Name2_Name3_Name4
Acceptance criteria
Stretch
project
1. You are going to create a chatbot that you will deploy in a Discord channel
Project Setup with Libraries: As a back-end developer, I want to set up a new Node.js project in VS Code with the discord.js and openai libraries using require('discord.js') and require('openai') after installing them with npm, so I can start building my bot with all necessary functionalities.
Secure Configuration
Stretch user stories:
Messaging Users Directly:
Hint: Utilise the user.send() method in Discord.js to send direct messages to users. Retrieve the user object through events or commands that the bot receives.
Dialogue Boxes and Interactive Responses:
Hint: Implement Discord's message components like buttons and select menus using
2. You are going to integrate testing into your Discord chatBot project.
The following user stories are designed to guide you as you integrate testing into your Discord chatBot project. If there are some which are not appropriate to your project, you do not have to integrate these. You can create your own tests that are relevant to your project.
Possible user stories:
As a back-end developer, I want to...
verify Discord.js integration by creating a test function that creates a new Discord client
ensure that the OpenAI library is correctly integrated by creating a test function that attempts to use the OpenAI API to create a simple chat completion or query
test that my bot securely loads API keys from the .env file, confirming that no sensitive information is hard-coded
Repository naming convention
Please name your repo following this template: PRO02_Name1_Name2_Name3_Name4
resources
Typescript
Devtools
Express and RESTFUL APIs
A guide on setting up the tools for this weeks project. Good explanation on generating and modifying a TS config file
learning-outcomes
JavaScript
Node.js
APIs
Testing
The Amazin' Quizzer API Backend
Project Overview
Your project is to build the backend for a dynamic web application that combines a quiz generator with data from multiple external APIs. This backend will serve as the foundation for a future full-stack application, showcasing your skills in server-side development, API integration, and data manipulation.
Core Requirements
TypeScript Implementation::
The entire backend project must be written in TypeScript.
Utilize TypeScript's static typing for all modules, functions, and API interfaces.
Stretch Goals
Implement more complex quiz generation algorithms (e.g., adaptive difficulty).
Add a favourite count feature for questions and allow filtering by this criterion.
Develop more sophisticated results analysis.
Project Phases
Initial Spike Stage
Set up the basic structure of your Express server.
Implement a single endpoint that interacts with one external API.
Core Project Development
Develop the full set of RESTful endpoints for quiz operations.
Integrate multiple external APIs.
Implement the quiz generation and results calculation logic.
API Suggestions
Easier APIs
Open AI API - https://platform.openai.com/
JokeAPI - https://jokeapi.dev/
The Dog API - https://thedogapi.com/
The Cat API - https://thecatapi.com/
More Challenging APIs
Twitter API - https://developer.twitter.com/en/docs/twitter-api
Google Maps API - https://developers.google.com/maps
Spotify API - https://developer.spotify.com/documentation/web-api/
Submission Guidelines
Host your code in a Git repository with clear documentation.
Deploy your project on GitHub Pages. Feel free to deploy it elsewhere as well if you prefer and have the time.
Include a comprehensive README.md file detailing:
Additional Considerations
Design your API with future frontend integration in mind. The frontend part of this project will be added next week.
Implement proper error handling and validation for incoming requests and external API responses.
Securely store any API keys or sensitive information required by your server.
By completing this project, you will demonstrate your ability to create a robust backend application that combines original functionality with external data sources, showcasing your skills in API development, integration, and server-side logic implementation.
Repository naming convention
Please name your repo following this template: PRO03_BACK_Name1_Name2_Name3_Name4
resources
Cypress
A good start in understanding component testing
Your one stop shop for example with cypress React
More generic cheat sheet for Cypress
Testing
Official Cypress docs. You'll find some great tutorials to get start there
DevOps
A step by step guide to deploying an express server using the AWS console and SSH
Week of September 30th
This week focuses on building a front-end application using React and TypeScript to consume the RESTful API developed in the previous week. The emphasis is on creating an intuitive user interface for the quiz application while applying React best practices and TypeScript integration.
Summary of one of the most common ways web apps get hacked
An example of how you might structure a project using Express & SQlite
: As a back-end developer, I want to configure my bot securely by using
require('dotenv/config')
to load my API keys from a
.env
file, ensuring they are not hard-coded into my project, using a
.gitignore
file.
Bot Initialisation: As a back-end developer, I want to initialise my Discord bot and log in to Discord using the new Discord.Client() constructor and client.login method with my Discord token, to start listening for messages.
Message Handling: As a back-end developer, I want to handle incoming messages by setting up a message event listener using client.on('messageCreate', callback) to process messages received in Discord and respond to them with a “hello” message.
Optimisation: As a developer, I want the bot to optimise its performance by efficiently handling events, so that it does not consume excessive resources. This may involve writing efficient callback functions for client.on and client.once, ensuring they execute tasks quickly and without unnecessary resource consumption.
OpenAI Chat Integration and Response Generation: As a back-end developer, I want to integrate OpenAI into my bot and send chat prompts to the API to generate responses. This would involve using the openai.chat.completions.create() method with my OpenAI API key. I aim to pass conversation history and other necessary parameters to this method to receive context-aware chat completions. This will enable the bot to generate dynamic, intelligent responses based on ongoing conversations, enhancing user interaction and experience.
Response Management: As a back-end developer, I want to manage the OpenAI response returned by openai.chat.completions.create() using either fetch or async/await and sending the response back to the Discord channel.
Command Processing: As a back-end developer, I want to process commands directed at my bot by using string matching or a command prefix to distinguish between general messages and commands meant for the bot.
Error Handling: As a back-end developer, I want to implement error handling in my bot interactions using either .catch or try...catch within my fetch or **** async functions to manage exceptions and provide error messages if something goes wrong.
MessageActionRow
and
MessageButton
or
MessageSelectMenu
classes from Discord.js. Handle interactions with
client.on(Events.InteractionCreate, callback)
.
Creating Private Chats (Channels):
Hint: Use guild.channels.create() to create new private channels and manage access using permission overwrites in Discord.js.
Automated Moderation Features:
Hint: Monitor messages for specific keywords or patterns using client.on(Events.MessageCreate, callback). Implement moderation actions like message.delete() for removing inappropriate content and guildMember.timeout() for muting users.
Multimedia Responses (Images, GIFs, Audio Clips):
Hint: Send multimedia content using message.channel.send() with the files option. For audio, explore Discord.js voice modules for handling voice channels and streaming.
ensure that my bot initialises and logs into Discord successfully
simulate receiving a message and verify that my bot responds with a "hello" message, testing the message event listener's functionality
simulate commands directed at my bot to check if it accurately processes these commands from general messages
introduce faults or exceptions in bot interactions to verify that my bot's error handling mechanisms effectively manage and log errors
mock the process of sending responses back to the Discord channel, verifying that my bot formats and dispatches messages correctly
ensure my bot can send direct messages to users, testing the user.send() method's functionality
test my bot's ability to send multimedia responses under specified conditions, ensuring it can handle images, GIFs, and audio clips effectively
Configure the TypeScript compiler (tsconfig.json) for the project's specific needs.
Server-Side Setup:
Initialize a Node.js project using Express.
Implement a RESTful API for quiz-related operations and external API interactions.
JSON Endpoints:
Create endpoints that fetch data from at least two external APIs and return it in JSON format.
Implement endpoints for quiz-related operations (e.g., get questions, submit answers, retrieve results).
Quiz Functionality:
Develop server-side logic to:
Generate quizzes with randomly selected questions based on a chosen subject area.
Process quiz answers and calculate results, including areas of strength and weakness.
Data Management:
Use a JSON object in a separate file as a mock database to store quiz questions.
Implement CRUD operations for managing quiz questions in this mock database.
External API Integration:
Integrate at least two external APIs to enhance the quiz experience or provide additional information related to quiz topics.
Implement proper error handling for failed API requests or unavailable data.
Implement caching mechanisms for external API calls to improve performance.
Create comprehensive API documentation using tools like Swagger.
Unsplash it - https://unsplash.it/
REST Countries API - https://restcountries.com/
UK Police API - https://data.police.uk/docs/
Postcode Lookup - https://postcodes.io/
Giphy API - https://developers.giphy.com/docs/api/
GitHub API - https://docs.github.com/en/rest
The Movie DB API - https://developers.themoviedb.org/3/getting-started/introduction
The Guardian API - https://open-platform.theguardian.com/documentation/
News API - https://newsapi.org/docs/endpoints
TfL API - https://api.tfl.gov.uk/
Project setup instructions
API endpoints and their usage
External APIs used and their purpose in the project
Any stretch goals implemented
Ensure your server is deployable, even though a full deployment isn't required at this stage.
Document your API structure and endpoints thoroughly for future development.
Click on a product to view more details in a new page
Search for products by name or description and view product listings with images, descriptions and reviews
Add products to a shopping cart
View previous orders and order history
Complete checkout and payments to simulate purchasing products
This week focuses on building a dynamic e-commerce web application, integrating React for the frontend with a Node.js/Express backend and SQLite database. The emphasis is on creating a full-stack application with database integration and state management in React.
Workshops
Monday
Friday
Execute Program
Finalise previous courses
Topics
Database schema design and normalization
SQLite database management and querying
SQL syntax, focusing on SELECT and INSERT queries
Project
Develop an e-commerce web application with the following features:
Design and implement a SQLite database schema for products, orders, and users
Create a React frontend that communicates with an Express backend
These resources are helpful extra reading that may clarify or enhance concepts you’re learning in the main curriculum.
JSON Web Tokens Suck Despite the title this talk actually covers most aspects of web authentication in a very accessible way
A short guide to useReducer and useContext
How to work with cookies while you are developing
Node based examples of the what and how of CSRF protection
The 8 Principles of Secure Development & Deployment set out by the National Cyber Security Center
Week of October 21st
This week focuses on enhancing the e-commerce web application developed in the previous week by adding authentication, user-specific interactions, and improving overall security. The emphasis is on implementing secure user authentication and authorization while expanding React state management techniques.
User authentication and authorization in web applications
Secure handling of user registration, login, and logout
Session management (stateless vs stateful approaches)
Project
Continue developing the e-commerce application with the following new features:
Implement user authentication (registration, login, logout)
Create user-specific shopping carts and order history
Implement session persistence
Additional Skills
Implementing role-based access control (for admin functionalities)
project
Your task this week is to deploy and test the quiz app you have completed in the previous two weeks.
Description
Before you start you need to create a testing and deployment plan. We would like you plan a testing strategy that will have broad coverage of your project. The tools we would like you to use to achieve this can include Cypress, Postman and the Node built in testing library.
We would like you to deploy both the backend and frontend of your project. Before choosing a deployment platform, consider whether your application is static or dynamic, as this will influence your choice. Here are some options to consider:
AWS EC2 Instance
AWS Lambda (for serverless applications)
Heroku (easy deployment for various application types)
GitHub Pages
AWS S3 Bucket (suitable for static websites)
Vercel
Netlify
Firebase Hosting (suitable for static and dynamic sites)
...
Research these options and choose the ones that best fit your project's needs, considering factors like scalability, ease of use, and cost. Remember, the goal is to understand the deployment process and the considerations involved in choosing a hosting solution.
Questions to consider
What parts of the application logic are the most critical to cover with unit tests?
How will you mock external dependencies (like databases or APIs) during unit testing?
What are the key user journeys and flows within the application that must be covered by end-to-end tests?
Acceptance Criteria
Stretch criteria
project
Project
Your project this week is continue work on the e-commerce shop you started last week and to add authentication and user specific interactions.
Spike
Before you start writing features you need to create a security plan. There should be a section in your README.md that describes how you will secure your app and mitigate different potential attacks.
Questions to consider
Will you store session info in a token (stateless) or in your database (stateful)?
How will you check a user’s identity (authentication)?
How will you control what actions a user can take (authorization)?
Useful resources
User stories
As a shopper, I want to:
Log into my account using my email and password
Have my user session persist, so I don't have to log in every time
Log out of my session
These User Stories from last week should be updated to be linked to a shoppers account
Add products to a shopping cart
View and edit items in my shopping cart
Complete the checkout process to "purchase" products in my cart
Stretch user stories
As an admin, I want to:
Log into an admin section of the site
Add, edit and delete products
View and export reports on site analytics
Acceptance Criteria
Stretch
Learning Outcomes
Testing
Deployment
project
Project
Your task this week is to deploy and test the e-commerce app you have completed in the previous two weeks.
Spike
Before you start you need to create a testing and deployment plan. We would like you plan a testing strategy that will have broad coverage of your project. The tools we would like you to use to achieve this can include Cypress, Postman and the Node built in testing library.
We would also like you to deploy this project using an EC2 instance for you server and a S3 bucket to serve your static files.
Questions to consider
What parts of the application logic are the most critical to cover with unit tests?
How will you mock external dependencies (like databases or APIs) during unit testing?
What are the key user journeys and flows within the application that must be covered by end-to-end tests?
Acceptance Criteria
Stretch
Learning Outcomes
Testing
Resources
.NET
Security threats and mitigation strategies (e.g., CSRF attacks)
React Router for multi-page navigation
Advanced React state management using Context API and useReducer
Linking user accounts with shopping carts and order history
Database security and user data protection
Secure the application against common web vulnerabilities
Enhance React state management using Context API and useReducer
Implement multi-page navigation using React Router
How will you manage test data and state for end-to-end testing?
How will encrypted communication (HTTPS) be set up, and will you use a reverse proxy?
How will you manage configuration variables for different environments (development, staging, production)?
How will CORS policies be configured between the frontend on GitHub Pages and the backend on EC2?
Where will the code that represents your infrastructure live and how will it be organised?
How will you manage configuration variables for different environments (development, staging, production)?
What are the different AWS products you will need to configure to make your deployment successful.
Deployment
Implementing CRUD operations in a web application
React component design and state management
Building responsive and dynamic user interfaces with React
Integrating backend APIs with React frontend
Managing relational data in web applications
Security considerations in database design and querying (e.g., SQL injection prevention)
Implement CRUD operations for products and orders
Ensure proper state management for the shopping cart functionality
Implementing search functionality in both frontend and backend
Error handling and data validation in full-stack applications
This option focuses entirely on mastering C# before diving into broader .NET concepts. The goal is for you to gain a strong command of the language and become comfortable with its infrastructure. By Week 10, you'll be able to apply what you’ve learned to a hands-on project.
To start, please register on both FreeCodeCamp and Microsoft Learn. You’ll access the learning modules via FreeCodeCamp links, which will track your progress and give you the opportunity to sit for a Microsoft Certification exam upon completion.
The next course is not part of the certification, but it is a great short example of minimal API.
Route 02. Blended C# and Infrastructure Approach
In this route, you'll combine learning C# with workshops focused on infrastructure essentials. This approach balances language fundamentals with practical infrastructure skills to give you a well-rounded foundation.
You can complete the first three C# lessons independently or through FreeCodeCamp. If you choose the FreeCodeCamp route, you’ll have the option to continue with the remaining lessons later and eventually take the Microsoft Certification exam.
This week focuses on building a library management system using .NET for the backend and React for the frontend. The emphasis is on creating a robust backend API with ASP.NET Core and implementing user authentication and data persistence with PostgreSQL or SQLite.
Core Topics
ASP.NET Core Web API development
Database design and implementation with PostgreSQL/SQLite
Object-Oriented Programming in C#
Project Development Focus
Setting up ASP.NET Core backend
Implementing database schema for library items
Creating RESTful API endpoints
Learning Objectives
Building secure and scalable backend services with .NET
Implementing proper data models and relationships
Managing user authentication and authorization
PHP Path
This week introduces WordPress development using PHP, focusing on theme and plugin development, and understanding the WordPress ecosystem.
Core Topics
Local WordPress development environment setup
WordPress theme development fundamentals
PHP basics for WordPress
Project Development Focus
Setting up local development environment
Creating custom WordPress themes
Understanding WordPress file structure
Learning Objectives
Understanding WordPress architecture
Creating custom themes from scratch
Working with WordPress template system
Week of October 28th
This week focuses on testing, deployment, and optimization of the e-commerce web application developed over the past two weeks. The emphasis is on implementing comprehensive testing strategies, deploying the full-stack application to AWS, and setting up continuous integration and deployment pipelines.
Writing and organizing unit tests, integration tests, and end-to-end tests
Mocking external dependencies in tests
Understanding and configuring different deployment environments (development, staging, production)
Project
Develop a comprehensive testing strategy for the e-commerce application
Implement tests using Cypress, Postman, and Node's testing library
Create a deployment plan for AWS infrastructure
Stretch Goals
Set up a GitHub Actions CI/CD pipeline for automatic deployment on push to main
Implement staging environments in addition to development and production
Optimize application performance for production environment
Additional Skills
Code organization and modularization for testability
Advanced TypeScript usage in testing and deployment scripts
Understanding of cloud architecture and best practices
This week brings together all aspects of the software development lifecycle, from testing to deployment, providing a holistic view of bringing a web application to production. It emphasizes the importance of thorough testing, secure and scalable deployment practices, and the use of modern DevOps tools and techniques.
API endpoint creation and testing with Swagger
User authentication and authorization
Data relationships and schema design
Implementing user authentication
Developing collection management features
Testing endpoints with Swagger
Creating and testing API endpoints
Handling file uploads and storage
Template hierarchy and customization
Plugin development introduction
Database interactions in WordPress
Implementing template hierarchy
Working with WordPress hooks and filters
Database operations with WordPress
Implementing custom functionality through plugins
Managing WordPress database operations
Infrastructure as Code concepts and implementation with AWS CDK
AWS resource provisioning and configuration (EC2, S3, security groups)
Environment variable management across different deployment stages
Continuous Integration and Continuous Deployment (CI/CD) pipelines
Optimizing applications for production deployment
AWS permissions and security best practices
Deploy the backend to an AWS EC2 instance
Host static frontend files on an AWS S3 bucket
Set up and configure necessary AWS resources (e.g., security groups, IAM roles)
Implement Infrastructure as Code using AWS CDK
Configure environment variables for different deployment stages
Document the setup, deployment process, and usage instructions
Debugging deployment issues in cloud environments
Writing clear and comprehensive technical documentation
Learners with build a library in which to sort and share information (i.e. music, photos, recipes etc...). Potential users should be able to view, favourite and upload items as well as make collections and view ones created by other users.
The frontend of this project will be built using React. For the backend, it will use ASP.NET to handle server-side functionality. User accounts and item lists will be stored in a PostgreSQL or SQLite database.
Project
Your project for the next 3 weeks will be to develop a .NET backend connected to a database and linked to a React frontend. This week you should start by building the backend and testing it with Swagger (.NET equivalent to Postman). Tests should cover the creation users and endpoints related to user content.
Spike
Like the last project you will benefit by building a scheme for your database before you start. Hopefully with what you learned from last projects you are ready to think about how things will connect and consider what sorts of endpoints you will want. Finally, think about what you have done for stretch goals on previous projects and see if you can come up with a different sort of goal this time. For example if you've been stretching yourself by adding technical complexity try focusing on design or UX/UI instead.
Questions to consider
What endpoints will you need for your app?
What sort of classes will you need to match your data and how will these be represented in OOP (object orientated programming)?
Useful resources
User stories
As a user, I want to:
Login to an individual account
See my collections of items and favourites
Search and look at other users collections
Stretch user stories
Follow other users
Make sure users can only edit their own collections and items
Stop duplicate items being uploaded
Repository naming convention
Please name your repo following this template: PRO05_Name1_Name2_Name3_Name4
Acceptance criteria
Stretch
PHP
Project Overview: Building a Custom WordPress Site with Theme and Plugin Development
Over the next three weeks, you will develop a fully functional WordPress website from scratch. Starting with setting up your local development environment, you'll create a custom theme tailored to your design preferences, incorporating dynamic content using The Loop and interactive elements with TypeScript. You'll then plan and build a custom plugin to add significant functionality to your site, such as an event manager or testimonials feature, utilizing custom post types, taxonomies, and AJAX for dynamic updates.
In the final week, you'll focus on deploying your site to a live hosting environment, implementing security best practices, and optimizing performance. By integrating your custom plugin with your theme, you'll create a seamless user experience. This project will enhance your proficiency in WordPress development and PHP programming, providing you with valuable skills and a portfolio-worthy website.
Foundations of WordPress and PHP
Monday: Setting Up the Development Environment
Objectives:
Set up a local server environment for WordPress development.
Install and configure WordPress locally.
Tuesday: Introduction to WordPress Theme Development
Objectives:
Understand how WordPress themes work.
Begin developing a custom theme from scratch.
Wednesday: Advanced Theme Customization
Objectives:
Add features to the custom theme.
Integrate TypeScript for front-end interactivity.
Thursday: Presentation Preparation and Delivery
Objectives:
Prepare and deliver a 20-minute presentation showcasing the custom theme.
Continue normal development activities.
Friday: Working with WordPress Database
Objectives:
Learn to interact with the WordPress database using PHP.
Understand data sanitization and security best practices.
Code of Conduct
All members are required to agree with the following code of conduct. All members of the community are expected to enforce this code at every community event, class, gathering or exchange (such as Founders and Coders classes or our evening meetups, workshops and short courses), on our online forums (Slack and GitHub), and everywhere we interact under the Founders and Coders banner.
We expect cooperation from all participants in the community to help ensure a safe environment for everybody.
Need Help?
Please reach out to us! Our contact details are on or you can find your Course Facilitator (if you're a student of ours) or our admins on Slack. Don't stay silent!
If you wish to make a complaint in London, please first review the and submit a complaint with the .
Adapted from , based on the .
The Quick Version
Our community is dedicated to providing a harassment-free experience for everyone, regardless of gender, gender identity and expression, age, sexual orientation, disability, physical appearance, body size, race, ethnicity, religion (or lack thereof), or technology choices. We do not tolerate harassment of community members in any form. Sexual language, imagery or innuendo is not appropriate for any community event, including talks, workshops, parties, Slack, Twitter and other online media or channels. Participants violating these rules may be sanctioned or expelled from the event and any future events, as well as the from the community itself, at the discretion of .
The Long Version
Harassment includes offensive verbal or written comments related to gender, gender identity and expression, age, sexual orientation, disability, physical appearance, body size, race, ethnicity, religion, technology choices, sexual images in public spaces, deliberate intimidation, stalking, following, harassing photography or recording, sustained disruption of talks or other events, inappropriate physical contact, and unwelcome sexual attention.
Participants asked to stop any harassing behaviour are expected to comply immediately.
All those who interact with the community are also subject to the anti-harassment policy. It is the responsibility of all to ensure that a sexualised environment is not created.
If a participant engages in harassing behaviour, the organisers may take any action they deem appropriate, including warning the offender or expulsion from the event or community without further warning.
If you are being harassed, notice that someone else is being harassed, or have any other concerns, please .
Particularly in the case of physical events, organisers will be happy to help participants contact venue security or local law enforcement, provide escorts, or otherwise assist those experiencing harassment to feel safe for the duration of the event. We value your attendance and contributions to the community.
We expect participants to follow these rules in all community interactions, whether professional, social or a mix of both.
If someone has violated these rules, please review the and make a complaint using our .
Resources
These resources are helpful extra reading that may clarify or enhance concepts you're learning in the main curriculum.
.NET
A decent dive into language basics
for people who like videos, this is geared towards devs with your backgrounds
Link roundup version of the above resource, with more detail
Official documentation for ASP .NET
Getting started
For each application project, there are specific requirements to meet. There are also a number of good practices to uphold while building each website. We've put together this guide, to review before starting each project and to follow when working through your projects.
Publishing your website
All your code should be hosted on GitHub and your website should be live, deployed with GitHub Pages.
Deploy your site early on, you don't need to have completed it before you can publish it. To deploy a site, all you need is an index.html file, with a little content inside of it. For each of your projects, create this, push it to GitHub and then deploy the website.
Include the link to your live site on the GitHub repo, in the description on the right hand side. When you're linking between different sites, it's much better to link to a live site than its codebase on GitHub. For example, in your you might include links to all of the projects you've made as part of your application.
Commiting your code
Once you have a repository set up and you've deployed the site, you can make further changes to your codebase and websites. You do this by changing files, staging them, and then commiting those changes. You can learn more about these steps in our .
Commit regularly while you build your site, and write meaningful commit messages. In VS Code and in your terminal you can customise your commit messages. Your commit message should summarise the work you've just completed, then your commit history will tell a story of how you built your website.
Writing code
Building the projects is going to be challenging, and a lot of this material might be new to you. It's okay to struggle, it's just part of being a developer.
Using tutorials and resources to help you is absolutely the right thing to do when learning to code. However, relying heavily on the code written in a tutorial, or copying and pasting code from external sources, will limit your learning. When following a tutorial, try first to code along with the video, and then build the sit again from memory with less reference to the tutorial you've looked at.
When you're building a website, it's important that you understand what the code you write is doing. Interact with it, and change things to see what effect that has. Break down problems into smaller steps and tackle each step one at a time.
We're looking for interesting and engaging websites that fit our project requirements. Put your own spin on the project, be creative, and don't be afraid to go beyond the requirements.
.NET and Umbraco
.NET is a software development platform created by Microsoft that allows developers to create: desktop applications, web applications, mobile applications, and games. It provides a framework for building, deploying, and running applications on different platforms, including Windows, Linux, and macOS.
C# is the most widely used programming language for .NET development. C# is an object-oriented language that's designed for building robust and efficient applications. It's similar to other popular programming languages like Java and C++.
C#
C# is a high-level programming language designed to be simple, modern, and object-oriented, primarily used for building applications that run on the .NET platform.
.NET
.NET is a free, open-source, cross-platform framework that provides developers with a set of tools and libraries for building a wide range of applications, from Windows desktop applications to web applications, that can run on multiple operating systems and devices.
Umbraco
Umbraco is an open-source content management system (CMS) based on the .NET framework, designed to create and manage digital content for websites, mobile apps, and other digital media.
Project
Your project for the next three weeks is to get stuck in learning C#, .NET and Umbraco.
Learn C# and .NET through online tutorials
Install Umbraco
Learn Umbraco through exploring its features on the platform
For the website you build, you can choose anything to focus on that you feel will make good use of the features available in .NET and Umbraco. If you're stuck for ideas, build a microblogging site based on .
Web browsers are very powerful nowadays. They support lots of cool features that let your code do interesting things. For example webcam filters, text-to-speech and geolocation.
You're going to spend the day experimenting with some of these features to build a fun mini project (in pairs). The idea is to get some experience figuring things out reading MDN docs, and have fun building something silly.
We'll come back together at 16:00 to present what we've made to the group. You'll have 10 minutes to show off your project and talk about anything interesting you learnt.
Wes Bos' JavaScript 30 video series is a great introduction to some of these topics. They're pretty fast-paced and concise, and give you enough info to go and start experimenting to build your own thing. If you want access to the starter code you have to sign up on the site (it's free), but if you just want to watch the videos they're all on YouTube here.
We'd recommend these as a starting point:
Docker
Learn how to use Docker to build applications in containers, then deploy them to AWS.
This covers Docker basics, integrating a database, configuring tests, running in GitHub Actions.
Deploy to AWS
Follow the to deploy your example app.
Project
Create an app with 3 separate containers: a client (e.g. React), a backend API (e.g. Express), and a database (e.g. Postgres).
If you're feeling confident about Docker then feel free to pick interesting technologies. If you want to focus on the core learning then stick to stuff you already know (like React).
The client should send requests to the API (e.g. with fetch) and the API should send requests to the database.
Try to come up with something fun—there are no constraints on the app other than using the above 3 services.
Deploy this application to AWS ECS.
Help each other
You don't have mentors to ask for help, so try to help each other. Use your Discord channels to stay in touch and solve problems.
Founders and Coders coursebook
Handbook
Guidance for learners participating in our programmes.
Portfolio
Self-paced individual study through working on a portfolio of Web projects.
Software Foundation
Software development
Front- and back-end development with Git, JavaScript, and HTML/CSS
DevOps engineering
Using Amazon Web Services
AI Engineering
Using the Open AI API
Software Developer
Node.js, Express.js, SQL, authentication, React and Next.js.
For more information on our programmes, go to .
See also for our licence.
Svelte
Learn how to use Svelte to build dynamic client-side applications.
covers all the basics. I'd recommend completing parts 1-7 before starting on the project. If you're interested in putting some fun animations into your app then you could also look at parts 9 and 10.
Project
Today's project is similar to React Week's—build an interactive-game-like-thing with lots of dynamic client-side state. You don't have to fetch data from an external API if you don't need to—the focus is on using Svelte.
Help each other
You don't have mentors to ask for help, so try to help each other. Use your Discord channels to stay in touch and solve problems.
KSB's
Knowledge
K1: all stages of the software development lifecycle (what each stage contains, including the inputs and outputs)
K2: roles and responsibilities within the software development lifecycle (who is responsible for what)
K3: the roles and responsibilities of the project lifecycle within your organisation, and your role
K4: how best to communicate using different communication methods and how to adapt appropriately to different audiences
K5: the similarities and differences between different software development methodologies, such as agile and waterfall
K6: how teams work effectively to produce software and how to contribute appropriately
K7: software design approaches and patterns, to identify reusable off-the-shelf solutions to commonly occurring problems
K8: organisational policies and procedures relating to the tasks being undertaken, and when to follow them (e.g., the storage and treatment of GDPR sensitive data)
K9: principles of algorithms, logic and data structures relevant to software development (e.g., Arrays, Stacks, Queues, Linked Lists, Trees, Graphs, Hash Tables, Sorting Algorithms, Searching Algorithms, Critical sections and race conditions)
K10: principles and uses of relational and non-relational databases
K11: software designs and functional/technical specifications
K12: software testing frameworks and methodologies
Skills
S1: create logical and maintainable code
S2: develop effective user interfaces
S3: link code to data sets
Behaviours
B1: Works independently and takes responsibility (e.g., has a disciplined and responsible approach to risk, and stays motivated and committed when facing challenges)
B2: Applies logical thinking (e.g., uses clear and valid reasoning when making decisions related to undertaking work instructions)
B3: Maintains a productive, professional, and secure working environment
TypeScript
Learn how TypeScript can help you make less buggy apps.
Intro talk
S4: test code and analyse results to correct errors found using unit testing
S5: conduct a range of test types, such as Integration, System, User Acceptance, Non-Functional, Performance and Security testing
S6: identify and create test scenarios
S7: apply structured techniques to problem solving, can debug code and can understand the structure of programmes to identify and resolve issues
S8: create simple software designs to effectively communicate understanding of the program
S9: create analysis artefacts, such as use cases and/or user stories
S10: build, manage and deploy code into the relevant environment
S11: apply an appropriate software development approach according to the relevant paradigm (e.g., object-oriented, event-driven or procedural)
S12: follow software designs and functional/technical specifications
S13: follow testing frameworks and methodologies
S14: follow company, team or client approaches to continuous integration, version and source control
S15: communicate software solutions and ideas to technical and non-technical stakeholders
S16: apply algorithms, logic and data structures
S17: interpret and implement a given design whist remaining compliant with security and maintainability requirements
B4: Works collaboratively with a wide range of people in different roles, internally and externally to the team, with a positive attitude to inclusion & diversity
B5: Acts with integrity with respect to ethical, legal and regulatory ensuring the protection of personal data, safety and security
B6: Shows initiative and takes responsibility for solving problems within their own remit, being resourceful when faced with a problem to solve
B7: Communicates effectively in a variety of situations to both a technical and non-technical audience
B8: Shows curiosity to the business context in which the solution will be used, displaying an inquisitive approach to solving the problem (includes the curiosity to explore new opportunities and techniques; the tenacity to improve methods and maximise performance of the solution; and creativity in their approach to solutions)
B9: Committed to continued professional development
Then complete as much of Execute Program's TS course as it will allow.
Finally move on to the TS Handbook. This is quite long so just skim "The Basics" and "Everyday Types" at first. It's generally better to look up specific things when you need them rather than trying to front-load all the knowledge.
Project
You have two choices (depending on how much time you have):
Create a React app from scratch using TS
Refactor one of your previous React apps using TS
Either way please document anywhere you have to amend your code because TS caught a type error. It will be interesting to hear about how you had to program differently based on TS' feedback.
Both Create React App and Vite have built in support for TypeScript. Make sure you click through to their respective docs as there are some nuances/differences.
Note: neither require you to run the TS compiler yourself—you'll be using their normal start/dev/build commands.
Help each other
You don't have mentors to ask for help, so try to help each other. Use your Discord channels to stay in touch and solve problems.
The primary audience for this handbook is apprentices who are preparing to begin the Software Developer apprenticeship. The handbook provides guidance on the learning journey beginning with the apprentice interview process and ending with end-point assessment. It provides all the key information for you to complete the apprenticeship successfully.
This is a guide to what you should be doing for homework each week. Please reach out to your CFs if you are unsure of what to prioritise between sessions.
Complete LinkedIn profile
Complete the Express and Dev Tooling workshops
Set Up the Database:
Access phpMyAdmin via http://localhost/phpmyadmin/.
Create a new database (e.g., wordpress_db).
Configure WordPress:
Extract WordPress files into the htdocs (XAMPP) or MAMP directory.
Rename wp-config-sample.php to wp-config.php.
Edit wp-config.php with the database details:
Run the Installation Script:
Navigate to http://localhost/wordpress/ and follow the installation prompts.
These questions are designed to give you an idea of what concepts you might need to revisit from the first few weeks of the course.
This isn't a test and you can't fail, so don't worry about getting some answers wrong. It's purely for your own benefit, so try to answer each question honestly without looking them up first!
Git
HTML
CSS
Javascript
Array methods
Promises & fetch
HTTP
DOM
Testing
Debugging
Software Foundation Handbook
The primary audience for this handbook is anyone enrolled on the Software Foundation. Here you can find all the key information you need to complete the programme successfully.
View the
schedule
Day 1
Time
Activity
Learning outcomes
Before you start the course
The purpose of our is to make sure that everyone is familiar with the key concepts we will be using throughout your time here. A solid grounding in the fundamentals will help you immensely.
Please make sure you have finished the precourse material and installed the software on our before day 1 of your course.
We will be having an installation party shortly before you arrive. If you are using a Windows OS then attending this installation party is crucial. But if you are unable to attend, you can also do this by yourself. If you run into any difficulties, please get in touch.
Week of October 7th
This week concentrates on testing and deploying the full-stack quiz application developed over the past two weeks. The focus is on implementing comprehensive testing strategies and successfully deploying both the frontend and backend components of the application.
Know basic git commands like git add, git commit and git push
Resources:
Udacity's git & GitHub course is a brilliant set of videos. The course is quite long, so don't worry about completing the whole thing. We will go into more depth in week 1. For now, just complete lesson 1 (Navigating A Commit History section).
Markdown
Learning outcome:
Know markdown syntax well enough to create readmes
Resources:
No GitHub repo is complete without proper documentation. Follow this markdown tutorial to learn the syntax that you need to write a banging Readme!
Here is a 6 minute youtube video to introduce you to the concept of the semantic web. You will be expected to write semantically during week 1, so brush up with the following:
Read this article to stop using too many divs (divitis). Don't be fooled by the scroll bar - the article isn't particularly long, but there are many comments below.
Head to this article for more specific examples of useful semantic tags.
CSS
Learning outcomes:
Be able to apply positioning and layout techniques to solve common problems
Understanding basic CSS rules
Understand the differences between em and rem units and how to combine them effectively
Resources:
This section includes condensed articles/videos that will be beneficial when tackling CSS throughout the course;
Learn Layout is a helpful, lightweight, well-ordered guide that covers a lot of concepts in CSS to help you understand how to create a super basic layout. Additional links are provided in each section for more detailed explanations of concepts.
Relative & Absolute Positioning this great 7 minute video will cover the position property, after watching you’ll be able to apply positioning techniques with layout techniques from the Learn Layout video to accomplish many important tasks like centering.
is an essential guide to understanding how CSS rules are applied and how CSS works in general.
this is another essential guide to help you understand the differences between em and rem units and how to combine them effectively.
Playing around with creating tables and accessing the data on your local device will increase your confidence in week 6 - feel free to reach out if you'd like a practical project to work on with SQL!
Practical Project
Learning outcomes: Cement your knowledge of the concepts above through practical application.
Task:
Build a calculator. This is one of the "Advanced Front End Development Projects" on Free Code Camp. Having a look at their guidelines might help you to get started.
Rather than using Codepen or JS Fiddle, you should do this directly with your text editor, terminal and browser. Start by creating your repo on GitHub and stick to the command line for adding, committing and pushing your changes as you go.
Make sure to host your project on GitHub pages.
If anyone has already made a calculator and feels that they need a different challenge, please message one of us. Have fun, and don't hesitate to use your Slack channel!
Ubuntu and Linux Mint are probably the two most used desktop Linux distros out there. Mint is becoming increasingly popular and in a lot of ways, is more beginner-friendly than Ubuntu. It also uses up less memory resource (the most lightweight Mint edition is XFCE), and will be better suited to slower machines.
For Windows Users:
For the course you'll need to install a Linux operating system on your machine and dual boot - students in the past who have tried to use Windows always encounter big setbacks with installation problems and general incompatibility issues.
Be sure to back up your files before you start, in case anything goes wrong. You will still be able to use Windows alongside Linux and if everything goes right, you won't lose any data.
It's not as scary as it sounds! There are a lot of articles online to help you. Due to a lot of different OS configurations you may be best off searching google for your specific OS + distro (eg: "dual boot windows 10 and Ubuntu"). However here are some links that may be useful:
If you're having hardware or permissions issues when dual booting, you may be able to use . If you're going down this route, please make sure postgres is installed correctly too.
Chromebook Users:
Chromebooks and is pretty simple, too.
For Everyone:
Install and manage Node.js using .
Note: We will be covering Node.js during the course. If you are curious and would like some background reading, is a great resource.
We shall have a couple of FAC students and alumni available at the installation party to guide you through installing linux. Please come along if you have Windows OS.
Finally please do not hesistate to come to a meetup or contact us on slack if you are having trouble, we can help!
Install a text editor of your choice. We recommend:
- because of it's source control and liveShare features
Install Chrome
Install
Chrome extensions:
JSONView
Make sure to explore your editors plugin ecosystem for useful plugins:
- we recommend prettier and Rainbow Brackets
Download the - the interface is easier to manage the different workspaces you'll be part of
...but don't be overwhelmed, you don't need to install anything further