There is no project during Introduction Week. See Week 1 for the project relating to the server topic.

Single-page app

Client rendering

• Make fetch requests to our own server for JSON data

• Render elements in the DOM based on the server data

• Submit data to our own server, then update the DOM based on the response

Error handling

• Respond with useful error information to the client

• Throw errors when our server hits a problem

• Catch errors and log them correctly

• Handle errors that occur in async code

• Show the user useful messages based on server errors

Design (UI/UX)

• Account for all possible states of a network request

• Design and create an accessible loading spinner

Testing

• Mock fetch calls in our tests to avoid hitting our real API

• Test dynamic client-side interactions to ensure they behave as we expect

• Test all of our error handling

See week 1 for the learnings relating to the server topic.

Day 1

Day 2

Day 3

Day 4

Day 5

1. 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.

2. 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.

3. 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.

• An overview of the fundamental ways you can dynamically change a page with JS.

ES Modules

How can we modularise our client-side JavaScript?

Questions to consider

• What are the different ways we can import/export code? What does "dynamic import" do?

• Why might using hundreds of small modules in the browser cause performance problems?

Useful resources

Browser rendering

What is the "critical rendering path" in browsers?

Questions to consider

• How does the browser render an HTML page containing links to CSS and JavaScript files?

• What does "render blocking" mean?

• What do the async and defer keywords do?

Useful resources

Browser caching

How can we avoid unnecessary network requests?

Questions to consider

• What is HTTP caching?

• How can our server tell browsers to cache our responses?

Useful resources

Image performance

How we can efficiently serve image assets?

Questions to consider

• How can we optimise image file size?

• How can we render different images at different viewport sizes?

Useful resources

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

• As a user, I want to: add my own resources

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

• A single-page app (only one HTML file)

• Accessible signup/login forms

• Token-based authentication (storing token in localStorage)

• Form for adding new resources (only for logged in users)

• Works well across Chrome, Firefox and Safari/Edge browsers

Stretch criteria

• Buttons to delete existing resources (for logged in users)

• Form for updating existing resources (for logged in users)

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 user story 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

• 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

Repository naming convention

Please name your repo following this template: PRO01_Name1_Name2_Name3_Name4

Acceptance Criteria

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

Stretch Goal

Use the automatic trigger functionality of your GitHub project board.

Finally, feel free to get creative with the content of your website! Good luck!

Project

• Quickstart for Projects

Async

• Async JavaScript Youtube tutorial

• JavaScript Promises Youtube tutorial

• Async Await vs Promises Youtube tutorial

• Introducing asynchronous JS

• Codecademy JavaScript Async Course (Free. 3 hours)

CSS

• Units - Every Layout

• The lengths of CSS

• How To Write Mobile-first CSS

• Flex children examples An explanation of how flex-grow, flex-shrink and flex-basis work for elements inside a flexbox container.

• CSS Guidelines

• BEM Methodology

• Composition - Every Layout

• Boxes - Every Layout

• CSS Layout - MDN

Accessibility

• What a Year of Learning and Teaching Accessibility Taught Me

• Why, How, and When to Use Semantic HTML and ARIA

GIT

• Intearctive tool to learn Git branching

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

• CSS Layout workshop

• Semantic HTML workshop

• Accessibility workshop

• HTML Forms workshop

To be completed on Induction day

• Git workflow workshop. Repo name: Work01_Git_YourName

• GitHub Projects workshop. Repo name: Work02_GitHubProjects_YourName

To be completed on Week01

• Asynchronous JS workshop. Repo name: Work03_Async_YourName

• Promises & fetch workshop. Repo name: Work04_FetchAndPromises_YourName

• Real-world fetch workshop. Repo name: Work05_Fetch_YourName

• Promise practice workshop. Repo name: Work06_Promises_YourName

• Pokemon promises vs async/await. Repo name: Work07_PromisesVSAsync_YourName

Execute Program

• Execute Program Javascript Concurrency

Topics

• Safeguarding and Prevent

• Safeguarding Quiz

• Dev machine setup

• Project planning and development (GitHub Projects)

• User Manuals

• Progress Logs

• Introduction to GitHub profiles. GitHub Profile Generator https://rahuldkjain.github.io/gh-profile-readme-generator/

• Project introduction

• Live code session: project code review

• HackMD

• Project presentations

• Introduce the software developer labour market landscape

• Introduce the Employer Engagement function

• Introduce employability curriculum

• Explore multi-modal strategies for finding employment

Building an online presence

• Introduce the importance of building an online presence and ‘learning in public’

• Discuss the benefits of maintaining an up-to-date LinkedIn profile

Introduction to CVs and the Elevator pitch

• 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

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

JavaScript

• Write code that executes asynchronously

• Use callbacks to access values that aren't available synchronously

• Use promises to access values that aren't available synchronously

• Use the fetch method to make HTTP requests and receive responses

• Configure the options argument of the fetch method to make GET and POST requests

• Use the map array method to create a new array containing new values

• Use the filter array method to create a new array with certain values removed

Node.js

• Set up a Node.js environment for web development

• Use environment variables for managing secrets and sensitive keys in Node.js

• Use npm to manage project dependencies and scripts in a Node.js environment.

• Understand server-side development using Node.js.

• Modularise code by creating reusable modules in Node.js, improving code organization and maintainability.

APIs

• Integrate external APIs into a web application.

• Learn to make server-side requests to APIs and handle responses effectively.

• Understand the principles of client-server interaction and how to manage data exchange between them.

Testing

• Check that passing a given input into our tests returns the expected output

• Write tests to mimic the behaviour of a user performing different actions

• Design functions for common testing patterns, like checking for matches, equality or inequality

• Organise tests using descriptive names and groupings to clarify their purpose and outcomes

• Implement custom messages in test assertions to provide specific feedback for pass/fail outcomes

• Write modular, single-responsibility functions that are easy to test in isolation

Accessibility

• Structure a site using semantic HTML to aid accessibility

• Ensure a web page is readable for screen readers

• Ensure our UI has sufficient colour contrast so that everyone can perceive it comfortably

• Use various tools to check that our website meets accessibility criteria

Design

• Use CSS media queries to ensure our content is always presented effectively on screens of different sizes

• Demonstrate a mobile-first approach to building a website

• Use CSS variables to apply repeated colours to HTML elements

• Use CSS Flexbox to style children in a single-direction layout (ie a row or a column)

• Use CSS Grid to style children in two-direction layout

Workflow

• Ensure our Git commit history tells a coherent story

HTML Forms

• Use the appropriate input types in HTML forms for gathering different types of information

• Ensure that forms are accessible and include appropriate labeling for screen readers

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

• . Repo name: Work13_IntegrationTesting_YourName

• . Repo name: Work14_TDD_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

• Elevator pitch workshop

Asynchronous JavaScript

How does JS handle asynchronous code?

Questions to consider

1. What's the difference between "synchronous" and "asynchronous" code? Why might synchronous code be called "blocking"?

2. What are the event loop and the call stack?

3. How do callbacks and promises help us?

Testing methodologies

How do different testing methodologies try to improve the way we write tests?

Questions to consider

1. What is Test-Driven Development (TDD)? Can it help us write better code?

2. What is Behavior-Driven Development (BDD)? How do we translate user requirements into automated tests?

3. What is test coverage? Can this tell us about the quality of our tests?

• What is a web server? General background info on how servers work

• npm for absolute beginners Kevin Powell's video (Just ignore Astro recomendation at the very end)

• HTTP topic intro

• How DNS Works A comic explaining what happens when you type a URL into your browser.

• HTTP Overview - MDN 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.

• First-class Functions How functions and callbacks work in JavaScript. Based on a workshop from this week's curriculum.

• What the heck is the event loop anyway? (video)

• TDD changed my life

• Behavior Driven Development and Functional Testing

• Test Coverage

• Make Your Test Fail Good testing practices so you can be confident your tests are working.

• The advantages of the template element A comparison of creating DOM elements manually versus using the <template> element. Useful technique if you're dynamically rendering lots of stuff with JS.

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

1. TypeScript Implementation::

   • The entire backend project must be written in TypeScript.

   • Utilize TypeScript's static typing for all modules, functions, and API interfaces.

   • Configure the TypeScript compiler (tsconfig.json) for the project's specific needs.

2. Server-Side Setup:

   • Initialize a Node.js project using Express.

   • Implement a RESTful API for quiz-related operations and external API interactions.

3. 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).

4. 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.

5. 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.

6. 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.

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.

• Implement caching mechanisms for external API calls to improve performance.

• Create comprehensive API documentation using tools like Swagger.

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

1. Open AI API - https://platform.openai.com/

2. JokeAPI - https://jokeapi.dev/

3. The Dog API - https://thedogapi.com/

4. The Cat API - https://thecatapi.com/

5. Unsplash it - https://unsplash.it/

6. REST Countries API - https://restcountries.com/

7. UK Police API - https://data.police.uk/docs/

8. Postcode Lookup - https://postcodes.io/

More Challenging APIs

1. Twitter API - https://developer.twitter.com/en/docs/twitter-api

2. Google Maps API - https://developers.google.com/maps

3. Spotify API - https://developer.spotify.com/documentation/web-api/

4. Giphy API - https://developers.giphy.com/docs/api/

5. GitHub API - https://docs.github.com/en/rest

6. The Movie DB API - https://developers.themoviedb.org/3/getting-started/introduction

7. The Guardian API - https://open-platform.theguardian.com/documentation/

8. News API - https://newsapi.org/docs/endpoints

9. TfL API - https://api.tfl.gov.uk/

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:

  • 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.

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.

• Document your API structure and endpoints thoroughly for future development.

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

1. You are going to create a chatbot that you will deploy in a Discord channel

Discord Preparations

Core user stories:

1. 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.

2. Secure Configuration: 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.

3. 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.

4. 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.

5. 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.

6. 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.

7. 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.

8. 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.

9. 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.

Stretch user stories:

1. 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.

2. Dialogue Boxes and Interactive Responses:

   Hint: Implement Discord's message components like buttons and select menus using MessageActionRow and MessageButton or MessageSelectMenu classes from Discord.js. Handle interactions with client.on(Events.InteractionCreate, callback).

3. Creating Private Chats (Channels):

   Hint: Use guild.channels.create() to create new private channels and manage access using permission overwrites in Discord.js.

4. 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.

5. 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.

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

• 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

Repository naming convention

Please name your repo following this template: PRO02_Name1_Name2_Name3_Name4

TypeScript and Express

• Develop a server using Express and TypeScript for backend applications (K9, S1, S11, S12)

• Identify the server's role within a full stack application (K1, K2, K3)

• Understand the benefits of using TypeScript over JavaScript, such as improved code quality, enhanced developer productivity, and better tooling support (K7, S1)

• Learn the basic syntax and features of TypeScript (S1, S16)

RESTFUL Api's

• Grasp the concept and purpose of RESTful APIs (K11, S12)

• Construct and implement RESTful APIs effectively (S1, S11, S12, S16)

• Determine appropriate scenarios for applying RESTful APIs (K7, S9, B2)

• Design endpoint structures for data creation, modification, and deletion (K11, S8, S12)

• Utilize Postman to test RESTful APIs independently of frontend components, ensuring proper functionality, error handling, and adherence to API specifications (S5, S6, S7)

• Gain experience in documenting the application's architecture, API endpoints, and user guides for future reference and maintenance (S15, B4, B7, B8)

• Practice creating JSON endpoints and using these endpoints to fetch and display data dynamically.

• Dynamically update web page content without needing to reload the page.

Additional

• Utilize node:fs for filesystem operations (S1, S16)

• Gain experience in using developer tooling, including IDEs, linters, and formatters, to enhance productivity (B3, B9)

React

• Learn how to integrate TypeScript with a React (S1, S11, S16)

• Understand the concepts of components, props, and state in React (K7, S8, S12)

• Implement routing in a single-page application using React Router (S1, S11, S16)

• Manage global state and side-effects in React applications (S1, S11, S16)

• Create reusable UI components and manage their lifecycle (S1, S2, S8)

• Handle asynchronous operations and manage data fetching in React (S1, S11, S16)

• Follow best practices in React development (S1, B3, B9)

Node

• Set environment variables and understand their use case (S10, K11, B3)

Software Architecture

• Draw a diagram representing the flow of our application (S8, K11, B7)

• Follow a consistent pattern for naming our folders, files and variables (S1, K11, B3)

Testing

• Learn how to write and run unit tests for backend functionality using the Node testing suite and Postman (S4, S13, S6, S13)

• Gain experience in using the Cypress testing library with React (S4, S13, B9)

• Understand how and when to use component and end to end tests (K12, S5, S6, S13)

• Understand how to write maintainable and readable test cases (S1, S4, B3)

Deployment

• Gain experience in deploying a full-stack web application to a cloud platform (S10, S14, B3)

• Understand the differences between development, staging, and production environments (K1, K3, K8)

• Configure the necessary environment variables and settings for deployment (S10, S14, B3)

• Understand the process of building and optimizing the application for production (S10, S14, B3)

• Learn how to set up and configure a production environment on a cloud platform (S10, S14, B3)

• Gain experience in using a continuous integration and deployment (CI/CD) pipeline (S10, S14, B3)

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

• Good node tutorial demonstrating using json object as a mock database

• A brief guide to the different ways you can deal with data in your server

• Documentation on using Postman to make a collection of tests for api endpoints

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.

Workshops

• . Repo name: Work17_Cypress

Execute Program

• Finalize incomplete courses

Topics

• React fundamentals (components, props, state)

• TypeScript integration with React

• React Hooks (useState, useEffect, custom hooks)

• React Router for single-page application navigation

• Asynchronous operations and data fetching in React

• State management in React applications

• Creating reusable UI components

• Accessibility practices in React

• Environment variable management

• Software architecture and application flow

• Best practices in React development

• User interface design and prototyping (e.g., using Figma)

• Local storage for data persistence

• Custom hooks for repetitive logic

Project

• Build a front-end interface for the quiz application

• Implement user stories for quiz functionality

• Integrate with the backend API developed in the previous week

• Focus on user experience and interface design

• Apply React and TypeScript best practices

• Ensure accessibility compliance

• Implement proper error handling and data validation

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 .

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

• Provide an engaging, intuitive user interface.

• Allow users to take quizzes based on category, difficulty and count.

• Allow users to add and delete questions from the 'database'.

• Follow React principles and best practices.

• Follow good accessibility practices.

• Hidden environment variables (i.e. not on GitHub).

Stretch criteria

• User local storage to allow for records to persist after browser refresh.

• Make custom hooks to encapsulate repetitive logic i.e. fetch data or adding to local storage.

Repository naming convention

Please name your repo following this template: PRO03_FRONT_Name1_Name2_Name3_Name4

React

• 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

Cypress

• Guide to Component Testing in Cypress

  A good start in understanding component testing

• Cypress Functions Cheat Sheet

  Your one stop shop for example with cypress React

• Commonly Used Cypress Commands

  More generic cheat sheet for Cypress

Testing

• Testing with Cypress

  Official Cypress docs. You'll find some great tutorials to get start there

• Testing with Postman

  A short video on how to make collections and writing test in Postman

DevOps

• Deploy to an EC2 instance

  A step by step guide to deploying an express server using the AWS console and SSH

• Create a security certificate for HTTPS

  Steps to setup HTTPS connections in your Express server

• National Cyber Security Center

  The 8 Principles of Secure Development & Deployment set out by the National Cyber Security Center

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.

Workshops

• Persisting data with SQLite and Node

Execute Program

• Finalize incomplete courses

• SQL

Topics

• Unit testing backend functionality with Node's built-in testing suite

• API testing with Postman

• End-to-end testing with Cypress for React applications

• Component testing in React

• Writing maintainable and readable test cases

• Configuring environment variables for different deployment stages

• Setting up and configuring cloud platforms (AWS EC2)

• Managing CORS policies in deployed applications

Stretches

• Implementing Continuous Integration and Deployment (CI/CD) pipelines

• Securing applications with HTTPS

Project

• Develop a comprehensive testing strategy covering unit, integration, and end-to-end tests

• Implement tests using Cypress, Postman, and Node's testing library

• Deploy both the backend and frontend

• Configure environment variables for different deployment stages

• Document the setup, deployment process, and usage instructions

Additional Skills

• Managing test data and state

• Implementing reverse proxies

• Configuring CORS policies

• Using GitHub Actions for CI/CD

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?

• 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?

Acceptance Criteria

• Comprehensive Test coverage including unit, integration and end-to-end tests covering critical application logic and user flows.

• Successful deployment of backend and frontend.

• Documentation clearly outlines setup, deployment, and usage instructions, including API endpoints and environmental requirements.

Stretch criteria

• GitHub Actions CI setup to run your tests when you push.

• Configure HTTPS for secure communication between the frontend and backend, using a tool like Let's Encrypt to obtain and manage SSL/TLS certificates.

Your project this week is TBC

Intro

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 diagram to help visualise the relationships.

Questions to consider

1. What kinds of data relationships are there?

2. 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

• 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

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

• View previous orders and order history

• Complete checkout and payments to simulate purchasing products

Repository naming convention

Please name your repo following this template: PRO04_Name1_Name2_Name3_Name4

Acceptance criteria

• Store product data in a database

• Follow React principles and best practices

• Alow users to search/filter products

• Allow users to add products to a cart

Stretch

• Track item stock and remove items that sell out

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.

Workshops

Execute Program

• Finish previous courses

Topics

• User authentication and authorization in web applications

• Secure handling of user registration, login, and logout

• Session management (stateless vs stateful approaches)

• 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

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

• Secure the application against common web vulnerabilities

• Enhance React state management using Context API and useReducer

• Implement multi-page navigation using React Router

Additional Skills

• Implementing role-based access control (for admin functionalities)

• W3Schools have lots of clear simple example for different types of SQL queries

• Amazing summary of the history of databases, what they are, how they work and the different types

• Summary of one of the most common ways web apps get hacked

• An example of how you might structure a project using Express & SQlite

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

• 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)

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

• Implement CRUD operations for products and orders

• Ensure proper state management for the shopping cart functionality

Additional Skills

• Database relationship modeling (one-to-many, many-to-many)

• Using foreign keys in relational databases

• Optimizing database queries for performance

• Implementing search functionality in both frontend and backend

• Error handling and data validation in full-stack applications

These resources are helpful extra reading that may clarify or enhance concepts you’re learning in the main curriculum.

• 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

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)?

• How will you mitigate Cross-site Request Forgery (CSRF) attacks?

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

• See confirmation when an order is placed successfully

• View previous orders and order history

• Complete checkout and payments to simulate purchasing products

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

• Manage user accounts

Acceptance Criteria

• Users must log in to use site

• Each user has their own session with unique carts and order history

• Information stored about users in database is visible on site

• Using the site updates information about users on database

Stretch

• Site has admin functions

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?

• 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.

Acceptance Criteria

• Comprehensive Test coverage including unit, integration and end-to-end tests covering critical application logic and user flows.

• Successful deployment on an AWS.

• Documentation clearly outlines setup, deployment, and usage instructions, including API endpoints and environmental requirements.

Stretch

• GitHub Actions CI setup to automatically re-deploy when you push to main.

Week of November 4th

.NET

Route 01. Csharp Certification

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.

CSharp certification - 6 modules

The next course is not part of the certification, but it is a great short example of minimal API.

Create web apps and services with ASP.NET Core, minimal API, and .NET - 1hr 35min

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.

Option 2.1

Write your first code using C# (Get started with C#, Part 1)

Create and run simple C# console applications (Get started with C#, Part 2)

Add logic to C# console applications (Get started with C#, Part 3)

Option 2.2

CSharp certification - 3 first modules on FreeCodeCamp

Common

Build .NET applications with C# - 3hr 14min

Create a web API with ASP.NET Core controllers - 41min

Develop an ASP.NET Core web app that consumes an API - 2hr 18min

Create web apps and services with ASP.NET Core, minimal API, and .NET - 1hr 35min

PHP. 5-Day PHP Learning Plan

Setup Required

1. Install XAMPP: https://www.apachefriends.org/download.html

2. VSCode PHP Extension: PHP Intelephense

Day 1: PHP Basics

Main Resource: Laracasts - PHP for Beginners 2023

• Episodes 1-7

  • Variables and Basic PHP Syntax

  • PHP Configuration

  • Arrays and Functions

  • Page Links

Reference: W3Schools PHP

Practice Project: Build a Temperature Converter Tutorial: https://www.w3schools.com/php/php_form_complete.asp

• Convert Celsius to Fahrenheit and vice versa

• Form handling

• Basic calculations

• Simple styling

Day 2: Database & PDO

Main Resource: Laracasts Episodes 8-14

• Database Connections

• PDO Basics

• SQL Injection Prevention

• Basic Forms

Reference: PHP PDO Documentation

Practice Project: Build a Contact List Tutorial: https://www.tutorialrepublic.com/php-tutorial/php-mysql-crud-application.php

• Store names and phone numbers

• View all contacts

• Simple database operations

• Basic error handling

Day 3: Authentication

Main Resource: Laracasts Episodes 15-20

• Sessions

• Authentication

• Registration

• Form Validation

Reference: PHP Session Documentation

Practice Project: User Authentication System Tutorial: https://www.tutorialrepublic.com/php-tutorial/php-mysql-login-system.php

• Login form

• User registration

• Password hashing

• Session management

Day 4: Structure & Organization

Main Resource: Laracasts Episodes 21-25

• Refactoring

• Router Implementation

• Controllers

• API Basics

Reference: PHP Best Practices

Practice Project: Simple Note Taking App Tutorial: https://www.sourcecodester.com/php/15434/simple-notes-app-using-php-and-mysql-source-code.html

• CRUD operations

• User-specific notes

• Basic organization

• Simple API endpoint

Day 5: Final Project - Task Management System

Build a complete task management system combining all concepts learned.

Tutorial Guide: https://codeshack.io/crud-application-php-pdo-mysql/

Project Requirements:

1. User System

   • Login/Register

   • Password hashing

   • Session handling

2. Task Features

   • Add/Edit/Delete tasks

   • Mark as complete

   • Due dates

   • Priority levels

3. Database

   • Users table

   • Tasks table

   • Basic relationships

Daily Schedule

• 2 hours: Watch Laracasts

• 1 hour: Code along with episodes

• 2 hours: Work on daily project

Getting Unstuck

1. Check Laracasts comments

2. PHP Manual: https://www.php.net/manual/en/

3. Stack Overflow

4. PHP Discord: https://discord.gg/php

Next Steps

1. Laravel Framework: https://laravel.com/docs/

2. More complex projects

3. PHP Security practices

READING WEEK

These resources are helpful extra reading that may clarify or enhance concepts you're learning in the main curriculum.

• Learn nodejs.dev

  Official counterpart to the Node docs. Useful for getting realistic examples of features when the docs are overwhelming and confusing.

• Art of Node

  Popular (if slightly outdated) overview of what Node is and how it works.

• What is a web server?

  General background info on how servers work

Testing

• Learn how to write unit tests, integration tests, and end-to-end tests using testing frameworks like Cypress (K12, S4, S5, S13)

• Understand the importance of code organisation, modularity, and reusability (K7, S1, S11)

• Solidify typescript skills (K7, S1, S11, S12)

• Understand the differences between development, staging, and production environments (K1, K3, K8)

Deployment

• Understand the concept of infrastructure as code (K1, K5, K7)

• Configure the necessary environment variables and settings for deployment (S10, S14)

• Understand the basic syntax of provisioning resources with AWS CDK (S10, S14, S16)

• Have good working understanding of the permissions involved when deploying on AWS, (i.e security groups) (K8, B5)

• Gain experience in deploying a full-stack web application to a cloud platform (S10, S14, B3)

• Configure the necessary environment variables and settings for deployment (S10, S14, B3)

• Understand the process of building and optimising the application for production (S10, S14, B3)

• Gain experience in using a continuous integration and deployment (CI/CD) pipeline (S10, S14, B3)

.NET

• Learn how to create and run a project in .NET (K1, K3, K5, K7, S8, S17)

• Learn C# basics (K1, K3, K5, K7, S8, S17)

• Learn to test an ASP.NET project with Swagger (K12, S5, S13)

• Learn to link .NET project with database and react (K10, S3, S17)

Working with senior devs

• Gain confidence asking external .NET mentors for help and guidance (K4, B1, B4, B6, B7, B9)

• Write PR's and clear commits for review by outside mentors. This documentation should clearly show your thought process (K4, S14, S15, B1, B4, B7, B8)

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

• An example of the process of setting up a CDK project

.NET

PHP

• Tutorial for Dependency Injections Detailed tutorial of building a project and adding DI

• Official Microsoft Documentation Microsoft's explanation of dependency injections

• A Guide to NET Testing Basic intro to xUnit

• A Guide to ASP.NET Testing Testing with a ASP.NET project although the project and set up might be a bit different from yours

• Official Microsoft xUnit Guide The official xUnit documentation

layout: schedule schedule: monday: # - name: Build # start: 10:00 # end: 13:00 # type: project # - name: Thought of the Week # url: https://www.notion.so/foundersandcoders/Personal-Development-91fe75c7e2cc4f989954108729a2c834 # type: personal-development # start: 14:00 # end: 14:45 # - name: Build # start: 14:45 # end: 17:45 # type: project # - name: Check out # start: 17:45 # end: 18:00 tuesday: # - name: Build # start: 10:00 # end: 12:45 # type: project # - name: Role circles # start: 12:45 # end: 13:00 # url: https://foundersandcoders.notion.site/Role-circles-a2371aab24f34955a69904b87ffc1f05 # - name: Build # start: 14:00 # end: 16:00 # type: project # - name: Update READMEs # start: 16:00 # end: 16:15 # - name: Team code review # start: 16:15 # end: 17:45 # url: https://foundersandcoders.notion.site/Code-Reviews-5c3b987ed1204e46b4c738da538a758c wednesday: # - name: Web Science # start: 10:00 # end: 11:00 # type: presentation # - name: Build # start: 11:00 # end: 13:00 # type: project # - name: Build # start: 14:00 # end: 17:45 # type: project - name: Thought of the week. Healthy Working Relationships and Conflict Resolution type: thought url: https://docs.google.com/presentation/d/1phpxhz6laAZcph84D04u02QaBEeKJ_U_1VLqDNV3hjo/edit#slide=id.g25ece6437ef_0_0 start: 10:30 end: 10:45 thursday: # - name: Update READMEs # start: 10:00 # end: 10:15 # - name: Sprint Review # start: 10:15 # end: 11:45 # - start: 11:45 # end: 13:00 # name: Presentation prep # url: https://foundersandcoders.notion.site/In-House-Project-Presentation-e1936ce95a8041b9b8a93e5d4f638ff6 # - name: Project documentation # start: 15:30 # end: 16:00 friday:

- name: Progress Log Review

start: 10:00

end: 11:30

type: expert-feedback

- name: Consolidation day

start: 11:30

end: 18:00

---

.NET

Intro

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

1. What endpoints will you need for your app?

2. What sort of classes will you need to match your data and how will these be represented in OOP (object orientated programming)?

Useful resources

• Simple demo of react and .NET project

• Demo of a more complicated backend with a database

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

• View individual items details

• Save items or collections from other users

• Upload and add items

Stretch user stories

• Follow other users

• Make sure users can only edit their own collections and items

• Stop duplicate items being uploaded

• Suggest collections based on favourites

Repository naming convention

Please name your repo following this template: PRO05_Name1_Name2_Name3_Name4

Acceptance criteria

• Backend is in a mostly completed state and attached to a rough draft front end

• Database persists user data

• Users can create collections and add their own or others items to them

• Users can search and filter collections, users and items

• Users can log in/out and have that data persist

Stretch

• Begin testing (it'll be different in .NET)

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.

  • Understand the WordPress file and folder structure.

• Activities:

  1. Install a Local Server Environment:

     • Choose and Install Software:

       • Windows Users: Download and install XAMPP.

       • Mac Users: Download and install MAMP.

     • Configure the Server:

       • Start Apache and MySQL services from the control panel.

  2. Download and Install WordPress Locally:

     • Download WordPress:

       • Get the latest version from the official website.

     • 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:

         Copy

         define('DB_NAME', 'wordpress_db');
         define('DB_USER', 'root');
         define('DB_PASSWORD', '');

     • Run the Installation Script:

       • Navigate to http://localhost/wordpress/ and follow the installation prompts.

  3. Explore WordPress File Structure:

     • Directories to Explore:

       • wp-content: Holds themes, plugins, and uploads.

       • wp-includes: Core WordPress files.

       • wp-admin: Backend administration files.

     • Understanding Core Files:

       • Review index.php, wp-config.php, and .htaccess.

  4. Review PHP Basics (If Needed):

     • PHP Syntax and Structure:

       • Variables, arrays, loops, functions.

     • Resources:

       • PHP Manual

       • W3Schools PHP Tutorial

• Resources:

  • Installing WordPress Locally (WPBeginner)

  • WordPress File Structure Overview (Official Docs)

Tuesday: Introduction to WordPress Theme Development

• Objectives:

  • Understand how WordPress themes work.

  • Begin developing a custom theme from scratch.

• Activities:

  1. Study the WordPress Template Hierarchy:

     • Understand the Hierarchy:

       • Learn how WordPress determines which template file to use.

       • Review the Template Hierarchy diagram.

  2. Create a New Theme Directory:

     • Set Up Theme Folder:

       • Navigate to wp-content/themes/.

       • Create a new folder for your theme (e.g., my-custom-theme).

  3. Develop Basic Theme Files:

     • style.css:

       • Add theme information at the top:

         Copy

         /*
         Theme Name: My Custom Theme
         Theme URI: http://example.com/
         Author: Your Name
         Description: A custom theme for learning.
         Version: 1.0
         */

     • index.php:

       • Basic template file that WordPress uses by default.

       • Add a simple HTML structure:

         Copy

         <!DOCTYPE html>
         <html>
         <head>
           <title><?php bloginfo('name'); ?></title>
           <?php wp_head(); ?>
         </head>
         <body>
           <h1>Welcome to <?php bloginfo('name'); ?></h1>
           <?php wp_footer(); ?>
         </body>
         </html>

     • header.php and footer.php:

       • Separate the header and footer sections.

       • header.php:

         Copy

         <!DOCTYPE html>
         <html>
         <head>
           <title><?php bloginfo('name'); ?></title>
           <?php wp_head(); ?>
         </head>
         <body>

       • footer.php:

         Copy

           <?php wp_footer(); ?>
         </body>
         </html>

       • Include them in index.php using get_header() and get_footer() functions:

         Copy

         <?php get_header(); ?>
         <h1>Welcome to <?php bloginfo('name'); ?></h1>
         <?php get_footer(); ?>

  4. Activate the Theme:

     • Through WordPress Admin:

       • Go to Appearance > Themes.

       • Find and activate "My Custom Theme".

  5. Use Template Tags and The Loop:

     • Display Posts:

       • Implement The Loop in index.php:

         Copy

         <?php get_header(); ?>
         <?php
         if ( have_posts() ) :
           while ( have_posts() ) : the_post();
             the_title('<h2>', '</h2>');
             the_content();
           endwhile;
         else :
           echo '<p>No posts found.</p>';
         endif;
         ?>
         <?php get_footer(); ?>

• Resources:

  • Creating a Basic Theme (ThemeShaper Tutorial)

  • Understanding The Loop (Official Docs)

  • WordPress Template Hierarchy (Official Docs)

Wednesday: Advanced Theme Customization

• Objectives:

  • Add features to the custom theme.

  • Integrate TypeScript for front-end interactivity.

• Activities:

  1. Create Custom Page Templates:

     • Make a Custom Template:

       • Create page-custom.php in your theme folder.

       • At the top, add:

         Copy

         <?php
         /*
         Template Name: Custom Page
         */
         ?>

       • Modify the template as needed, for example:

         Copy

         <?php get_header(); ?>
         <div class="custom-page-content">
           <h2>Custom Page Template</h2>
           <?php
           if ( have_posts() ) :
             while ( have_posts() ) : the_post();
               the_content();
             endwhile;
           endif;
           ?>
         </div>
         <?php get_footer(); ?>

  2. Implement Custom Menus:

     • Register Menus in functions.php:

       Copy

       <?php
       function register_my_menus() {
         register_nav_menus(
           array(
             'header-menu' => __( 'Header Menu' ),
             'footer-menu' => __( 'Footer Menu' )
           )
         );
       }
       add_action( 'init', 'register_my_menus' );

     • Display Menus in Templates:

       Copy

       <?php
       wp_nav_menu( array( 'theme_location' => 'header-menu' ) );
       ?>

  3. Add Widget Areas (Sidebars):

     • Register Sidebar in functions.php:

       Copy

       function my_custom_sidebar() {
         register_sidebar(
           array (
             'name' => __( 'Custom Sidebar', 'your-theme-domain' ),
             'id' => 'custom-sidebar',
             'description' => __( 'Custom Sidebar for Theme', 'your-theme-domain' ),
             'before_widget' => '<div class="widget-content">',
             'after_widget' => '</div>',
             'before_title' => '<h3 class="widget-title">',
             'after_title' => '</h3>',
           )
         );
       }
       add_action( 'widgets_init', 'my_custom_sidebar' );

     • Display Sidebar in Templates:

       Copy

       <?php
       if ( is_active_sidebar( 'custom-sidebar' ) ) {
         dynamic_sidebar( 'custom-sidebar' );
       }
       ?>

  4. Set Up TypeScript Build Process:

     • Initialize NPM in Theme Folder:

       • Open a terminal in your theme directory and run npm init -y.

     • Install Dependencies:

       • Install Webpack and TypeScript:

         Copy

         npm install --save-dev webpack webpack-cli typescript ts-loader

     • Configure TypeScript:

       • Create tsconfig.json:

         Copy

         {
           "compilerOptions": {
             "target": "es5",
             "module": "commonjs",
             "outDir": "./dist",
             "strict": true
           },
           "include": ["src/**/*"]
         }

     • Set Up Webpack Config:

       • Create webpack.config.js:

         Copy

         const path = require("path");
         
         module.exports = {
           entry: "./src/index.ts",
           module: {
             rules: [
               {
                 test: /\.tsx?$/,
                 use: "ts-loader",
                 exclude: /node_modules/,
               },
             ],
           },
           resolve: {
             extensions: [".tsx", ".ts", ".js"],
           },
           output: {
             filename: "bundle.js",
             path: path.resolve(__dirname, "dist"),
           },
         };

     • Add Scripts to package.json:

       Copy

       "scripts": {
         "build": "webpack",
         "watch": "webpack --watch"
       }

  5. Add Interactive Elements Using TypeScript:

     • Create src/index.ts:

       • Example code:

         Copy

         document.addEventListener("DOMContentLoaded", () => {
           const element = document.getElementById("interactive-element");
           if (element) {
             element.addEventListener("click", () => {
               alert("TypeScript is working!");
             });
           }
         });

     • Build and Include Script:

       • Run npm run build.

       • Enqueue the script in functions.php:

         Copy

         function enqueue_my_scripts() {
           wp_enqueue_script( 'my-typescript', get_template_directory_uri() . '/dist/bundle.js', array(), '1.0', true );
         }
         add_action( 'wp_enqueue_scripts', 'enqueue_my_scripts' );

     • Add an Element to Test Interaction:

       • In your template file (e.g., index.php), add:

         Copy

         <button id="interactive-element">Click Me</button>

• Resources:

  • Custom Page Templates (Official Docs)

  • WordPress Menus and Widgets (WPBeginner)

  • Webpack and TypeScript Setup Guide (DigitalOcean)

  • Using TypeScript with WordPress

Thursday: Presentation Preparation and Delivery

• Objectives:

  • Prepare and deliver a 20-minute presentation showcasing the custom theme.

  • Continue normal development activities.

• Activities:

  1. Morning Development:

     • Enhance Theme Features:

       • Refine your theme based on previous work.

       • Add any additional features or styling improvements.

     • Debug and Test:

       • Ensure all features are working as expected.

       • Test across different browsers and devices.

  2. Presentation Preparation (1 hour):

     • Summarize Work Done:

       • Create an outline highlighting key features and customizations.

     • Prepare Presentation Materials:

       • Create slides if necessary.

       • Set up a live demo environment.

     • Rehearse:

       • Practice delivering the presentation within the time limit.

  3. Deliver the Presentation (20 minutes):

     • Presentation Content:

       • Introduce your custom theme and its purpose.

       • Demonstrate key features and customizations.

       • Discuss challenges faced and solutions implemented.

     • Engage with the Audience:

       • Encourage questions and feedback.

  4. Afternoon Development:

     • Implement Feedback:

       • Incorporate any useful suggestions received during the presentation.

     • Continue Development:

       • Proceed with the next planned activities.

• Resources:

  • Effective Presentation Tips

  • Demo Guidelines