Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Your project is to build a dynamic web application that queries at least two APIs and presents useful and/or interesting information to the user. You will be using Node.js and Express, which will involve serving a static web page, creating JSON endpoints, and generating dynamic content through both server-side and client-side code.
Server-Side Setup:
Initialise a Node.js project using Express.
Serve a static web page that will be the front end of your application.
Static Web Page:
Create an index.html
file within a public directory.
This page should include placeholders where dynamic content will be displayed.
Creating JSON Endpoints:
Implement routes in your Express server that respond to GET requests.
These routes will fetch data from external APIs and return it in JSON format.
Dynamic Content:
Write client-side JavaScript that makes requests to your server-side endpoints.
Dynamically update the static web page with the data received from these requests.
Client-Server Interaction:
Ensure that the server acts as an intermediary for API requests, handling data fetching and processing.
The client-side script should handle the presentation of data, updating the user interface based on server responses.
API mash-up application structure example
Implement error handling in both server-side and client-side code to manage failed API requests or unavailable data.
Implement tests
Enhance the user interface with CSS and interactive elements for a better user experience.
Introduce additional client-side interactivity, such as user inputs to filter or customise the data displayed.
Ensure your application's design is responsive and accessible.
Document the user journey and your application's functionality in a README file.
Securely store any API keys or sensitive information required by your server.
Host your code in a Git repository with clear documentation.
Deploy your application to a cloud platform, ensuring it's publicly accessible.
Set up the basic structure of your web application and make a call to a single API.
After establishing the basic web app framework, you'll enhance the application by integrating more complex functionalities, including multiple API calls and/or incorporating OpenAI's API.
Open AI API - https://platform.openai.com/
JokeAPI - https://jokeapi.dev/
The Dog API - https://thedogapi.com/
The Cat API - https://thecatapi.com/
Unsplash it - https://unsplash.it/
Corporate Buzzword API - https://corporatebs-generator.sameerkumar.website/
REST Countries API - https://restcountries.com/
UK Police API - https://data.police.uk/docs/
Postcode Lookup - https://postcodes.io/
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/
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/
Random UK Postcode Explorer: Develop an application that jumps to a random UK postcode and collates various information about that location. Use the Postcodes.io API to generate a random postcode and then fetch data such as weather from the OpenWeatherMap API, local crime statistics from the UK Police API, and perhaps even demographic information if available. This app could serve as an interesting way to explore different parts of the UK, offering insights into the climate, safety, and other aspects of various locales.
Entertainment and Social Media Buzz Tracker: Use The Movie DB API and Twitter API to track social media buzz around movies. Develop a platform where users can see real-time tweets about movies, gauge popularity, and view movie details like ratings, casts, and synopses. This could serve as a guide for movie enthusiasts to discover trending movies.
AI-Assisted Weather and News App: Combine OpenWeatherMap API and NewsAPI. Optionally integrate OpenAI's API to summarize news articles or generate insights based on the current weather data, like suggesting indoor activities on rainy days or outdoor events when it's sunny.
AI-Powered Social Media and Movie Insights: Use the Twitter API and The Movie DB. Optionally enhance with OpenAI's API to analyze tweets for sentiment about movies, offering insights into which movies are most loved or creating thematic summaries of social media discussions.
Intelligent Mapping and Transport Planner: Merge Google Maps API with TfL API and optionally enhance with OpenAI's capabilities. The AI could predict traffic patterns, suggest optimal routes, or offer travel recommendations based on historical and real-time data.
AI-Enhanced Recipe and Shopping Assistant: Combine Recipe Puppy with a supermarket API. Optionally use OpenAI's API to suggest recipes based on user preferences or trends and generate optimized shopping lists considering dietary needs and ingredient availability.
Community Safety App with AI Analysis: Mashup the UK Police API with Postcodes.io, and optionally enhance with OpenAI's API for crime data analysis. The AI could identify safety trends, provide tailored alerts, or offer insights into community safety based on crime statistics and location data.
Introduce learners to the concept of an ‘elevator pitch’
Introduce best practice to learners when pitching themselves
Introduce learners to common interview questions
Introduce best practice when answering common interview questions
You should be focusing on meeting these learning outcomes over the three-week period. You will be tested on your learning during weekly quizzes.
Reinforce your learning by building something fun.
Q&A
Express workshop review
Server-side API mash-up project
Live code session: Dev tooling
Writing cover letters and job applications
Project planning and development
Saturday 16th March
Q&A
Non technical mock interview preparation
Project updates
Live code session:
Project planning and development
Q&A
Project group code reviews
Project presentations
How would you effectively find out where (and why) an error is occurring in your JavaScript code?
What console
methods are there other than console.log
? Can these help us debug?
What does the debugger;
statement do?
How do we use the debugger in our browser?
How can we send and receive test network requests while working on an application?
How can we inspect any requests the browser is making on an HTML page?
How can we manually send test requests outside of our browser?
How can we find out why our page doesn't look right?
How can we see and edit what elements and styles are rendered to the page?
How can we easily test how responsive our page is?
How can we debug CSS grid and flexbox layouts?
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.
During this module you should be working on: Execute Program Modern Javascript Level 1
We expect you to complete Modern Javascript Level 1 by the end of Week 3
Complete the Git, CSS, Semantic HTML, Accessibility and HTML forms workshops ahead of Week 1
Complete github profiles
Project work
Complete projects ahead of Week 3 code reviews
Complete the Asynchronous JS, Promises & fetch, Real-world fetch and Promise practice workshops ahead of Week 4
Introduce the software developer labour market landscape
Introduce the Employer Engagement function
Introduce employability curriculum
Explore multi-modal strategies for finding employment
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
A user story is a description of one or more features of a piece of software.
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
Contact you to enquire about working with you
Visit your website at a publicly accessible domain name
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
User stories come with acceptance criteria - 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)
Information from the form doesn’t get submitted until the user clicks a button
Use the automatic trigger functionality of your GitHub project board.
Finally, feel free to get creative with the content of your website! Good luck!
This topic is focused on the fundamental building blocks of web pages—accessible, semantic HTML, and well-organised CSS.
To be completed ahead of Week 1
Dev machine setup
Intro to Git and GitHub
Safeguarding and Prevent
Workshops: Git, CSS, Semantic HTML, Accessibility, HTML forms
Knowledge Quiz
Q&A
Feedback session
Employability introduction
Review workshops
Introduction to GitHub profiles
Project introduction
Knowledge Quiz
Q&A
GitHub profile crit
HackMD
Project planning and development
Project updates
Introduction to mock interviews
Knowledge Quiz
Project planning and development
Live code session: project code review
Project code reviews
Project presentations
Knowledge Quiz
Saturday 27th January
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.
During this module you should be working on: Execute Program Modern Javascript Concurrency
We expect you to complete Modern Javascript Concurrency (all levels) by the end of Week 6
Complete LinkedIn profile
Complete Node & npm introduction workshop
Project work
Complete projects ahead of Week 6 code reviews
Complete the Intro to testing, Build a testing library, Unit testing, Integration testing and TDD workshops ahead of Week 7
Introduce the importance of building an online presence and ‘learning in public’
Discuss the benefits of maintaining an up-to-date LinkedIn profile
Learn how to manage asynchronous tasks and send HTTP requests using JavaScript.
To be completed ahead of Week 4
Q&A
JavaScript concurrency workshop review
LinkedIn and online presence
Mock interviews
Live code session: Introduction to commonJS modules
Knowledge Quiz
Q&A
LinkedIn profile crit
Node & npm workshop review
Discord chatbot project introduction
Project development
Live code session: Javascript object methods
Mock interviews
Project updates
Project planning and development
Knowledge Quiz
Q&A
Mock interviews
Project planning and development
Live code session: Introduction to testing
Live code session: Project code review
Project code reviews
Intro to testing, Build a testing library, Unit testing, Integration testing and TDD workshops
Knowledge Quiz
Saturday 17th February
This is a guide to what you should be continue working on after Week 12
Execute Program SQL and Typescript
How does JS handle asynchronous code?
What's the difference between "synchronous" and "asynchronous" code? Why might synchronous code be called "blocking"?
What are the event loop and the call stack?
How do callbacks and promises help us?
These resources are helpful extra reading that may clarify or enhance concepts you're learning in the main curriculum.
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.
We'd like you to spend some time before starting the full time course working on useful fundamentals.
Keep working on your project
Keep up with Execute Programme. This includes:
JavaScript Arrays
JavaScript Concurrency (unless you really hate it)
Modern JavaScript
Regular Expressions
SQL
If you are feeling adventurous, you could take a look at TypeScript, too.
Take a look ahead at the apprenticeship curriculum, and particularly the first workshop. If you want to get ahead of the game, you are welcome to give it a go before the start of term.
We'd like you to build a colour palette picker similar to apps like Coolors.
Built with HTML, CSS & JS
Code hosted on GitHub
Deployed to GitHub Pages
Auto-generate multiple colours
Allow users to change each colour
Export colour palette in different formats (e.g. JSON, CSS variables)
Generate related colours rather than random (e.g. ascending lightness, complementary hues etc)
Save palettes to localStorage
An overview of the fundamental ways you can dynamically change a page with JS.
Understand the importance of building and maintaining an up-to-date CV
Understand the the concept of an ‘elevator pitch’
Learn best practices when pitching yourself
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.
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
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
Learn how to make sure your code works correctly by creating automated tests.
To be completed ahead of Week 7
Q&A
Review testing workshops
Discord chatBot test integration mini-project
CV workshop
Discord chatBot group user testing
Project planning and development
Knowledge Quiz
Q&A
Elevator pitch workshop
Project planning and development
Live code session:
Mock interviews
Knowledge Quiz
Saturday 2nd March
Q&A
Live code session: Project code review
Group code reviews
Live code session: Introduction to Express
Project presentations
Knowledge Quiz
How do different testing methodologies try to improve the way we write tests?
What is Test-Driven Development (TDD)? Can it help us write better code?
What is Behavior-Driven Development (BDD)? How do we translate user requirements into automated tests?
What is test coverage? Can this tell us about the quality of our tests?
These resources are helpful extra reading that may clarify or enhance concepts you're learning in the main 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.
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.
During this module you should be working on: Execute Program Regular Expressions
We expect you to complete Modern Javascript Level 2 by the end of Week 12
You are going to create a chatbot that you will deploy in a Discord channel
How do you write markup so that your page is accessible to as many users as possible?
Who does semantic HTML benefit?
How does ARIA relate to HTML?
What's the difference between accessible and inclusive?
How should you write CSS to ensure it's easy to read, maintain and scale as a website grows?
Why are CSS naming conventions useful?
When might specificity become a problem?
How can composition help us build UIs?
How does CSS decide where to put elements on the page?
What is the box model?
How does the display
property affect layout?
How does the position
property affect layout?
How do you design and build a webpage that looks good on any device?
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?
How can we leverage Github projects to help us plan and track work?
These resources are helpful extra reading that may clarify or enhance concepts you're learning in the main curriculum.
An explanation of how flex-grow
, flex-shrink
and flex-basis
work for elements inside a flexbox container.
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.
During this module you should be working on: Execute Program Modern Javascript Level 2
We expect you to complete Modern Javascript Level 2 by the end of Week 9
Complete any outstanding testing workshops
Project planning and development
Project planning and development
Complete Elevator pitch
Complete the Express and Dev Tooling workshops
Saturday 6th April (Open AI Unschool)
Saturday 4th May (Dev Ops 1)
Saturday 18th May (Dev Ops 2)
Students on the foundation programme are expected to attend all unschool workshops
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's JS Arrays course
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.
If you'd like some extra practice we've put together an open-ended project that you can use to work on your HTML, CSS & JS fundamentals.