arrow-left

All pages
gitbookPowered by GitBook
triangle-exclamation
Couldn't generate the PDF for 190 pages, generation stopped at 100.
Extend with 50 more pages.
1 of 100

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

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

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

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

We'd like you to spend some time before starting the course working on useful fundamentals.

  1. Command-line primerarrow-up-right

    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. Markdownarrow-up-right

    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.

Execute Program's JS Arrays coursearrow-up-right
CSS Layout workshoparrow-up-right
Semantic HTML workshoparrow-up-right
Accessibility workshoparrow-up-right
HTML Forms workshoparrow-up-right
(Stretch) Execute Program's Modern JS coursearrow-up-right

Databases

  • SQL | W3Schoolsarrow-up-right W3Schools have lots of clear simple example for different types of SQL queries

  • Databases: how they work, and a brief historyarrow-up-right Amazing summary of the history of databases, what they are, how they work and the different types

  • Database Relationshipsarrow-up-right

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

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

A beginner’s guide to many-to-many relationshipsarrow-up-right
SQL Injection | W3Schoolsarrow-up-right
Express SQLite examplearrow-up-right

developer

app

syllabus

schedule

hashtag
Day 1

Time
Activity
Learning outcomes

09:45

Check-in

hashtag
Day 2

Time
Activity
Learning outcomes

hashtag
Day 3

Time
Activity
Learning outcomes

hashtag
Day 4

Time
Activity

hashtag
Day 5

Time
Activity

learning-outcomes

hashtag
Single-page app

hashtag
Client rendering

  • hashtag
    Error handling

    hashtag
    Design (UI/UX)

    hashtag
    Testing

    introduction

    localStorage, token auth

    13:00

    Lunch

    14:00

    Student project session

    14:30

    live regions, status updates

    16:00

    Tech for Better

    17:00

    Speaker

    17:45

    Check out

    Role circles

    13:00

    Lunch

    16:30

    17:00

    Tech for Better

    17:45

    Check out

    Presentation prep

    13:00

    Lunch

    14:00

    Presentations

    15:15

    Cohort SGC

    16:00

    Team SGC

    16:45

    Update user manuals

    17:00

    Speaker

    17:45

    Check out

    10:00

    Intro presentationarrow-up-right

    10:30

    Intro to ES Modulesarrow-up-right

    Native JS modules

    11:00

    Client-side renderingarrow-up-right

    innerHTML, Template element

    13:00

    Lunch

    14:00

    Component architecturearrow-up-right

    Components, Stateful rendering

    16:00

    Projectarrow-up-right and spikesarrow-up-right intro

    16:15

    Technical spikesarrow-up-right

    17:15

    Spike presentation prep

    17:45

    Checkout

    09:45

    Check-in

    10:00

    Spike presentation prep

    10:10

    Spike presentations

    09:45

    Check-in

    10:00

    Pseudo-elements challengearrow-up-right

    CSS pseudo-elements

    11:00

    Project

    09:45

    Check-in

    10:00

    Project

    13:00

    Lunch

    14:00

    Project

    17:45

    Check out

    09:45

    Check-in

    10:00

    Team code review

    10:45

    Expert Feedback - Live code review

    11:15

    Respond to issues

    12:00

    Role circles

    11:00

    12:45

    12:15

    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 APIarrow-up-right from the workshops. The readme contains documentation of all the endpoints.

    hashtag
    User stories

    hashtag
    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

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

    hashtag
    Acceptance Criteria

    hashtag
    Stretch criteria

    spikes

    hashtag
    ES Modules

    How can we modularise our client-side JavaScript?

    hashtag
    Questions to consider

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

    Form for adding new resources (only for logged in users)
    • 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?

    hashtag
    Useful resources

    • Modules | JavaScript for impatient programmersarrow-up-right

    • ES modules: A cartoon deep-divearrow-up-right

    hashtag
    Browser rendering

    What is the "critical rendering path" in browsers?

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

    hashtag
    Useful resources

    • Understanding the Critical Rendering Patharrow-up-right

    • Efficiently load JavaScript with defer and asyncarrow-up-right

    hashtag
    Browser caching

    How can we avoid unnecessary network requests?

    hashtag
    Questions to consider

    • What is HTTP caching?

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

    hashtag
    Useful resources

    • HTTP Caching | Web Fundamentalsarrow-up-right

    • The HTTP cache: your first line of defensearrow-up-right

    hashtag
    Image performance

    How we can efficiently serve image assets?

    hashtag
    Questions to consider

    • How can we optimise image file size?

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

    hashtag
    Useful resources

    • Image Optimization | Web Fundamentalsarrow-up-right

    • Responsive Images: If you’re just changing resolutions, use srcsetarrow-up-right

    • Native lazy-loading for the webarrow-up-right

    Token authenticationarrow-up-right
    Accessible status messagesarrow-up-right
    Employment: Portfolio sitearrow-up-right

    learning-outcomes

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

    week01-project01-basics

    schedule

    resources

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

    • hashtag
      Learn nodejs.devarrow-up-right

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

    • hashtag

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

    • hashtag

      General background info on how servers work

    Art of Nodearrow-up-right
    What is a web server?arrow-up-right

    project

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

    Employability introduction

    • Introduce the software developer labour market landscape

    • Introduce the Employer Engagement function

    • Introduce employability curriculum

    • Explore multi-modal strategies for finding employment

    learning-outcomes

    hashtag
    Accessibility

    hashtag
    Design

    hashtag
    Workflow

    hashtag
    HTML Forms

  • week02-project02-chatbot

    week00-pre-course

    spikes

    • hashtag

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

    Introduction to the DOMarrow-up-right

    resources

    hashtag
    Project

    • Quickstart for Projectsarrow-up-right

    hashtag
    Async

    hashtag
    CSS

    hashtag
    Accessibility

    hashtag
    GIT

  • An explanation of how flex-grow, flex-shrink and flex-basis work for elements inside a flexbox container.
  • Async JavaScript Youtube tutorialarrow-up-right
    JavaScript Promises Youtube tutorialarrow-up-right
    Async Await vs Promises Youtube tutorialarrow-up-right
    Units - Every Layoutarrow-up-right
    The lengths of CSSarrow-up-right
    How To Write Mobile-first CSSarrow-up-right
    What a Year of Learning and Teaching Accessibility Taught Mearrow-up-right
    Why, How, and When to Use Semantic HTML and ARIAarrow-up-right
    Intearctive tool to learn Git branchingarrow-up-right
    Introducing asynchronous JSarrow-up-right
    Codecademy JavaScript Async Course (Free. 3 hours)arrow-up-right
    Flex children examplesarrow-up-right
    CSS Guidelinesarrow-up-right
    BEM Methodologyarrow-up-right
    Composition - Every Layoutarrow-up-right
    Boxes - Every Layoutarrow-up-right
    CSS Layout - MDNarrow-up-right

    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

    Week of September 9th

    This week is focused on the fundamental building blocks of web pages—accessible, semantic HTML, and well-organised CSS.

    hashtag
    Workshops

    hashtag
    To be completed AHEAD of Week01

    schedule

    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 LinkedIn profile

    • Complete the Express and Dev Tooling workshops

    • CSS Layout workshoparrow-up-right

    • Semantic HTML workshoparrow-up-right

    • Accessibility workshoparrow-up-right

    hashtag
    To be completed on Induction day

    • Git workflow workshoparrow-up-right. Repo name: Work01_Git_YourName

    • GitHub Projects workshoparrow-up-right. Repo name: Work02_GitHubProjects_YourName

    hashtag
    To be completed on Week01

    • Asynchronous JS workshoparrow-up-right. Repo name: Work03_Async_YourName

    • Promises & fetch workshoparrow-up-right. Repo name: Work04_FetchAndPromises_YourName

    • Real-world fetch workshoparrow-up-right. Repo name: Work05_Fetch_YourName

    • . Repo name: Work06_Promises_YourName

    • . Repo name: Work07_PromisesVSAsync_YourName

    hashtag
    Execute Program

    • Execute Program Javascript Concurrencyarrow-up-right

    hashtag
    Topics

    • Safeguarding and Preventarrow-up-right

    • Safeguarding Quiz

    • Dev machine setup

    • Project planning and development (GitHub Projects)

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

    • Project introduction

    • Live code session: project code review

    HTML Forms workshoparrow-up-right
    Promise practice workshoparrow-up-right
    Pokemon promises vs async/awaitarrow-up-right
    User Manualsarrow-up-right
    Progress Logsarrow-up-right
    GitHub Profile Generatorarrow-up-right
    HackMDarrow-up-right
    Project presentationsarrow-up-right

    spikes

    hashtag
    CSS architecture

    How should you write CSS to ensure it's easy to read, maintain and scale as a website grows?

    hashtag
    Questions to consider

    1. Why are CSS naming conventions useful?

    2. When might specificity become a problem?

    3. How can composition help us build UIs?

    hashtag
    CSS layout

    How does CSS decide where to put elements on the page?

    hashtag
    Questions to consider

    1. What is the box model?

    2. How does the display property affect layout?

    3. How does the position property affect layout?

    hashtag
    Responsive design

    How do you design and build a webpage that looks good on any device?

    hashtag
    Questions to consider

    1. What CSS units should we use for dimensions? What are absolute and relative units?

    2. When should you use a media query? Are they only for screen size?

    3. How can mobile-first CSS make responsive styling easier?

    hashtag
    Github projects

    hashtag
    Questions to consider

    1. How can we leverage Github projects to help us plan and track work?

    hashtag
    Accessibility

    How do you write markup so that your page is accessible to as many users as possible?

    hashtag
    Questions to consider

    1. Who does semantic HTML benefit?

    2. How does ARIA relate to HTML?

    3. What's the difference between accessible and inclusive?

    employability

    hashtag
    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

    hashtag
    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

    Week of September 16th

    Learn how to manage asynchronous tasks and send HTTP requests using JavaScript.

    hashtag
    Workshops

    hashtag
    To be completed on Monday

    • . Repo name: Work08_Node_YourName

    • . Repo name: Work09_NodeAndExpress_YourName

    hashtag
    To be completed on Friday

    • . Repo name: Work10_IntroTesting_YourName

    • . Repo name: Work11_TestLibrary_YourName

    • . Repo name: Work12_UnitTesting_YourName

    hashtag
    Execute Program

    hashtag
    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

    learning-outcomes

    hashtag
    JavaScript

    hashtag
    Node.js

    hashtag
    APIs

    hashtag
    Testing

    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

    hashtag
    User Stories

    A is a description of one or more features of a piece of software.

    hashtag
    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

    hashtag
    Repository naming convention

    Please name your repo following this template: PRO01_Name1_Name2_Name3_Name4

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

    hashtag
    Stretch Goal

    Use the automatic trigger functionality of your .


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

    project

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

    Discord Preparationsarrow-up-right

    hashtag
    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

    hashtag
    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

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

    hashtag
    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

    hashtag
    Repository naming convention

    Please name your repo following this template: PRO02_Name1_Name2_Name3_Name4

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

  • Integration testing workshoparrow-up-right. Repo name: Work13_IntegrationTesting_YourName
  • TDD workshoparrow-up-right. Repo name: Work14_TDD_YourName

  • Elevator pitch workshop

  • Project presentationsarrow-up-right

  • Node & npm introduction workshoparrow-up-right
    Node and Express HTTP Serverarrow-up-right
    Intro to testingarrow-up-right
    Build a testing libraryarrow-up-right
    Unit testing workshoparrow-up-right
    Execute Program Basic Typescriptarrow-up-right
    Contact you to enquire about working with you
  • Visit your website at a publicly accessible domain name

  • Information from the form doesn’t get submitted until the user clicks a button

  • user storyarrow-up-right
    acceptance criteriaarrow-up-right
    GitHub project boardarrow-up-right

    schedule

    spikes

    hashtag
    Asynchronous JavaScript

    How does JS handle asynchronous code?

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

    hashtag
    Testing methodologies

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

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

    week03-project03-server

    resources

    • What is a web server?arrow-up-right General background info on how servers work

    • npm for absolute beginnersarrow-up-right Kevin Powell's video (Just ignore Astro recomendation at the very end)

    • HTTP topic introarrow-up-right

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

    Learning Outcomes

    hashtag
    TypeScript and Express

    hashtag
    RESTFUL Api's

    hashtag
    Additional

    Week of September 23th

    Learn how to create a Discord chatbot using Node.js, integrate it with OpenAI's API, and implement testing for your bot.

    hashtag
    Workshops

    • Developer toolingarrow-up-right. Repo name: Work15_DeveloperTooling_YourName Check resources

    • . Repo name: Work16_React_YourName

    hashtag
    Execute Program

    • .

    hashtag
    Stretch

    hashtag
    Topics

    • Express server using Node

    • RESTful API development

    • External API integration and management

    • JSON data handling and mock database operations

  • How DNS Worksarrow-up-right
    HTTP Overview - MDNarrow-up-right
    First-class Functionsarrow-up-right
    What the heck is the event loop anyway? (video)arrow-up-right
    TDD changed my lifearrow-up-right
    Behavior Driven Development and Functional Testingarrow-up-right
    Test Coveragearrow-up-right
    Make Your Test Failarrow-up-right
    The advantages of the template elementarrow-up-right
  • 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’

  • Project presentationsarrow-up-right

  • Building client-side apps with Reactarrow-up-right
    Execute Program Everyday TypeScriptarrow-up-right
    Execute Program Advanced TypeScriptarrow-up-right

    week04-project03-frontend

    learning-outcomes

    hashtag
    React

    hashtag
    Node

    hashtag
    Software Architecture

    schedule

    The Amazin' Quizzer API Backend

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

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

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

    hashtag
    Project Phases

    hashtag
    Initial Spike Stage

    • Set up the basic structure of your Express server.

    • Implement a single endpoint that interacts with one external API.

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

    hashtag
    API Suggestions

    hashtag
    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/

    hashtag
    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/

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

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

    hashtag
    Repository naming convention

    Please name your repo following this template: PRO03_BACK_Name1_Name2_Name3_Name4

    resources

    hashtag
    Typescript

    • hashtag

    hashtag
    Devtools

    hashtag
    Express and RESTFUL APIs

    • hashtag

      A guide on setting up the tools for this weeks project. Good explanation on generating and modifying a TS config file

    resources

    hashtag
    React

    • hashtag

    • hashtag

    • hashtag

      A framework agnostic tool that allows for quick setup of a React app with TS

    • hashtag

      Official React docs on typescript with interactive examples

    • hashtag

      A quick reference guide to basic React patterns

    • hashtag

      A more guided resource of this material

    • hashtag
      A powerful hook for passing state values in your application without prop drilling

    hashtag
    Figma

    • hashtag

      Basic exercises for beginners

    Testing and deployment

    hashtag
    Testing

    hashtag
    Deployment

    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.

    hashtag
    Workshops

    • Cypress courses (x4)arrow-up-right. Repo name: Work17_Cypress

    hashtag
    Execute Program

    • Finalize incomplete courses

    hashtag
    Topics

    • React fundamentals (components, props, state)

    • TypeScript integration with React

    • React Hooks (useState, useEffect, custom hooks)

    hashtag
    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

    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.
    Understand the process of building and optimizing the application for production (S10, S14, B3)
  • Firefox Page Inspectorarrow-up-right
  • Simulate Mobile Devices with Device Mode in Chrome DevToolsarrow-up-right

  • A Guide To New And Experimental CSS DevTools In Firefoxarrow-up-right

  • hashtag
    Node fs and Expressarrow-up-right

    Good node tutorial demonstrating using json object as a mock database

  • hashtag
    How to parse data with Expressarrow-up-right

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

  • hashtag
    Testing your serverarrow-up-right

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

  • Official TS handbookarrow-up-right
    How to get the most out of the JavaScript consolearrow-up-right
    Get Started with Debugging JavaScript in Chrome DevToolsarrow-up-right
    Viewing And Changing The DOM in Chrome DevToolsarrow-up-right
    Setting up Typescript and Expressarrow-up-right
    hashtag
    Figma Youtube tutorial. 0:16arrow-up-right
  • hashtag
    Figma Youtube tutorial. 0:24arrow-up-right

  • hashtag
    Figma Youtube tutorial. 1:13arrow-up-right

  • React Mindsetarrow-up-right
    Youtube React Course (Net Ninja)arrow-up-right
    Creating a React app with Vitearrow-up-right
    React Docsarrow-up-right
    React/Typescript Cheat-sheetarrow-up-right
    Free Code Camp React/TS guidearrow-up-right
    useContext Hookarrow-up-right
    Figmaarrow-up-right
    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

  • Focus on user experience and interface design
  • Apply React and TypeScript best practices

  • Ensure accessibility compliance

  • Implement proper error handling and data validation

  • SQLarrow-up-right

    schedule

    schedule

    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.

    hashtag
    Workshops

    • Persisting data with SQLite and Nodearrow-up-right

    hashtag
    Execute Program

    • Finalize incomplete courses

    hashtag
    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

    hashtag
    Stretches

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

    • Securing applications with HTTPS

    hashtag
    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

    hashtag
    Additional Skills

    • Managing test data and state

    • Implementing reverse proxies

    • Configuring CORS policies

    • Using GitHub Actions for CI/CD

    project

    Your task this week is to deploy and test the quiz app you have completed in the previous two weeks.

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

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

    hashtag
    Acceptance Criteria

    hashtag
    Stretch criteria

    resources

    hashtag
    Cypress

    • hashtag

      A good start in understanding component testing

    • hashtag

      Your one stop shop for example with cypress React

    • hashtag

      More generic cheat sheet for Cypress

    hashtag
    Testing

    • hashtag

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

    hashtag
    DevOps

    • hashtag

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

    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 .

    hashtag
    User Stories

    As a quizzer, I want to:

    Week of October 14th

    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.

    hashtag
    Workshops

    hashtag

    project

    Your project this week is TBC

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

    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?

  • Monday SQL Challengearrow-up-right

    hashtag
    Friday Authentication web appsarrow-up-right

    hashtag
    Execute Program

    • Finalise previous courses

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

    hashtag
    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

    hashtag
    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

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

    hashtag
    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 diagramarrow-up-right to help visualise the relationships.

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

    hashtag
    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

    hashtag
    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

    hashtag
    Repository naming convention

    Please name your repo following this template: PRO04_Name1_Name2_Name3_Name4

    hashtag
    Acceptance criteria

    hashtag
    Stretch

    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

  • Configure environment variables for different deployment stages
  • Document the setup, deployment process, and usage instructions

  • SQLarrow-up-right
    hashtag
    Testing with Postmanarrow-up-right

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

    hashtag
    Create a security certificate for HTTPSarrow-up-right

    Steps to setup HTTPS connections in your Express server

  • hashtag
    National Cyber Security Centerarrow-up-right

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

  • Guide to Component Testing in Cypressarrow-up-right
    Cypress Functions Cheat Sheetarrow-up-right
    Commonly Used Cypress Commandsarrow-up-right
    Testing with Cypressarrow-up-right
    Deploy to an EC2 instancearrow-up-right
    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.

  • hashtag
    Stretch user stories

    • Like particular questions and filter by this category.

    hashtag
    Acceptance Criteria

    hashtag
    Stretch criteria

    hashtag
    Repository naming convention

    Please name your repo following this template: PRO03_FRONT_Name1_Name2_Name3_Name4

    Figmaarrow-up-right

    learning-outcomes

    hashtag
    Databases

    hashtag
    React

    schedule

    week06-project04-databases

    week05-project03-test-deploy

    week07-project04-authentication

    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.

    hashtag
    Workshops

    Learning Outcomes

    hashtag
    Authetication

  • hashtag
    React

    hashtag
    Execute Program
    • Finish previous courses

    hashtag
    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

    hashtag
    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

    hashtag
    Additional Skills

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

    Get Started with AWS CDKarrow-up-right

    week08-project04-test-deploy

    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.

    hashtag
    Workshops

    • .NETarrow-up-right

    hashtag
    Execute Program

    • Finish previous courses

    hashtag
    Topics

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

    hashtag
    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

    hashtag
    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

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

    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

  • week09-reading-week

    schedule

    Learning Outcomes

    hashtag
    Testing

    hashtag
    Deployment

    project

    hashtag
    Project

    Your task this week is to deploy and test the e-commerce app you have completed in the previous two weeks.

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

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

    hashtag
    Acceptance Criteria

    hashtag
    Stretch

    project

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

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

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

    hashtag
    Useful resources

    hashtag
    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

    hashtag
    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

    hashtag
    Acceptance Criteria

    hashtag
    Stretch

    Resources

    hashtag
    .NET

    .NET Tutorial - Hello World in 5 minutesarrow-up-right

    ASP.NET Core fundamentals overviewarrow-up-right

    Entity Framework Corearrow-up-right

    Use React with ASP.NET Corearrow-up-right

    hashtag
    PHP

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

  • How will you mitigate Cross-site Request Forgery (CSRF) attacks?
    See confirmation when an order is placed successfully
  • View previous orders and order history

  • Complete checkout and payments to simulate purchasing products

  • Manage user accounts
    Session-base vs token-based authenticationarrow-up-right
    Object-Oriented vs. Functional Programming With C# and F#arrow-up-right
    W3Schools PHP Tutorialarrow-up-right

    resources

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

    • hashtag
      JSON Web Tokens Suckarrow-up-right Despite the title this talk actually covers most aspects of web authentication in a very accessible way

    • hashtag
      A short guide to useReducer and useContext

    • hashtag
      How to work with cookies while you are developing

    • hashtag
      Node based examples of the what and how of CSRF protection

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

    overview

    hashtag
    Week of November 4th

    hashtag
    .NET

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

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

    hashtag
    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

    Option 2.2

    Common

    hashtag
    PHP. 5-Day PHP Learning Plan

    hashtag
    Setup Required

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

    2. VSCode PHP Extension: PHP Intelephense

    hashtag
    Day 1: PHP Basics

    Main Resource:

    • Episodes 1-7

      • Variables and Basic PHP Syntax

      • PHP Configuration

    Reference:

    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

    hashtag
    Day 2: Database & PDO

    Main Resource: Laracasts Episodes 8-14

    • Database Connections

    • PDO Basics

    • SQL Injection Prevention

    • Basic Forms

    Reference:

    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

    hashtag
    Day 3: Authentication

    Main Resource: Laracasts Episodes 15-20

    • Sessions

    • Authentication

    • Registration

    • Form Validation

    Reference:

    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

    hashtag
    Day 4: Structure & Organization

    Main Resource: Laracasts Episodes 21-25

    • Refactoring

    • Router Implementation

    • Controllers

    • API Basics

    Reference:

    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

    hashtag
    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

    hashtag
    Daily Schedule

    • 2 hours: Watch Laracasts

    • 1 hour: Code along with episodes

    • 2 hours: Work on daily project

    hashtag
    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

    hashtag
    Next Steps

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

    2. More complex projects

    3. PHP Security practices

    Learning Outcomes

    hashtag
    Testing

    hashtag
    Deployment

  • Reacts Powerful Duoarrow-up-right
    View, Edit, And Delete Cookies With Chrome DevToolsarrow-up-right
    CSRF Protection Guidearrow-up-right
    National Cyber Security Centerarrow-up-right
    Arrays and Functions
  • Page Links

  • Session handling
  • Task Features

    • Add/Edit/Delete tasks

    • Mark as complete

    • Due dates

    • Priority levels

  • Database

    • Users table

    • Tasks table

    • Basic relationships

  • CSharp certification - 6 modulesarrow-up-right
    Create web apps and services with ASP.NET Core, minimal API, and .NET - 1hr 35minarrow-up-right
    Write your first code using C# (Get started with C#, Part 1)arrow-up-right
    Create and run simple C# console applications (Get started with C#, Part 2)arrow-up-right
    Add logic to C# console applications (Get started with C#, Part 3)arrow-up-right
    CSharp certification - 3 first modules on FreeCodeCamparrow-up-right
    Build .NET applications with C# - 3hr 14minarrow-up-right
    Create a web API with ASP.NET Core controllers - 41minarrow-up-right
    Develop an ASP.NET Core web app that consumes an API - 2hr 18minarrow-up-right
    Create web apps and services with ASP.NET Core, minimal API, and .NET - 1hr 35minarrow-up-right
    Laracasts - PHP for Beginners 2023arrow-up-right
    W3Schools PHParrow-up-right
    PHP PDO Documentationarrow-up-right
    PHP Session Documentationarrow-up-right
    PHP Best Practicesarrow-up-right

    resources

    • hashtag
      Setting Up and Authorising AWS CLIarrow-up-right An example of the process of setting up a CDK project

    Project

    READING WEEK

    schedule

    Learning Outcomes

    hashtag
    .NET

    hashtag
    Working with senior devs

    week10-project05-DOTNET-intro

    schedule

    schedule

    overview

    hashtag
    Week of November 11th

    hashtag
    .NET Path

    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

    hashtag
    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

    Resources

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

    hashtag
    .NET

    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

  • hashtag
    C# | W3Schoolsarrow-up-right A decent dive into language basics
  • hashtag
    Intro to C# for Typescript developersarrow-up-right for people who like videos, this is geared towards devs with your backgrounds

  • hashtag
    A roundup of links that will be useful for people coming to .NET with typescript backgroundsarrow-up-right Link roundup version of the above resource, with more detail

  • hashtag
    Microsoft Documentationarrow-up-right Official documentation for ASP .NET

  • week11-project05-DOTNET-testing

    project

    hashtag
    .NET

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

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

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

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

    hashtag
    Useful resources

    hashtag
    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

    hashtag
    Stretch user stories

    • Follow other users

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

    • Stop duplicate items being uploaded

    hashtag
    Repository naming convention

    Please name your repo following this template: PRO05_Name1_Name2_Name3_Name4

    hashtag
    Acceptance criteria

    hashtag
    Stretch


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

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

    Week of November 18th

    .NET Path

    This week focuses on improving code quality and testability of the library management system through dependency injection and comprehensive testing strategies.

    hashtag
    Core Topics

    Testing and deployment

    hashtag
    .NET

    Dependency Injection principles in .NET
  • Unit testing with .NET testing frameworks

  • Test-driven development practices

  • Code organization and solution architecture

  • Mock databases for testing

  • Code refactoring techniques

  • hashtag
    Project Development Focus

    • Implementing dependency injection

    • Writing comprehensive API tests

    • Refactoring code for better maintainability

    • Creating mock objects for testing

    • Improving project structure

    • Implementing verification systems

    hashtag
    Learning Objectives

    • Understanding dependency injection concepts

    • Writing effective unit tests

    • Mocking dependencies for testing

    • Refactoring code for better testability

    • Implementing verification systems

    PHP Path

    This week focuses on advanced WordPress development, including custom plugin creation, theme integration, and implementing dynamic features using AJAX and APIs.

    hashtag
    Core Topics

    • Custom plugin development

    • WordPress hooks and filters

    • AJAX implementation in WordPress

    • External API integration

    • Shortcode creation and usage

    • Front-end integration techniques

    • Testing and documentation

    hashtag
    Project Development Focus

    • Planning plugin functionality

    • Creating custom post types and taxonomies

    • Building admin interfaces

    • Implementing AJAX features

    • Integrating with external APIs

    • Creating shortcodes

    • Writing documentation

    hashtag
    Learning Objectives

    • Building custom WordPress plugins

    • Working with WordPress APIs

    • Implementing dynamic features with AJAX

    • Creating responsive and accessible interfaces

    • Testing WordPress applications

    • Writing technical documentation

  • hashtag
    Testing

    week12-project05-DOTNET-deploy

    View individual items details
  • Save items or collections from other users

  • Upload and add items

  • Suggest collections based on favourites
    Understand the WordPress file and folder structure.
  • Activities:

    1. Install a Local Server Environment:

      • Choose and Install Software:

        • Windows Users: Download and install .

        • Mac Users: Download and install .

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

    3. Explore WordPress File Structure:

      • Directories to Explore:

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

    4. Review PHP Basics (If Needed):

      • PHP Syntax and Structure:

        • Variables, arrays, loops, functions.

  • Resources:

    • Installing WordPress Locally (WPBeginner)arrow-up-right

    • WordPress File Structure Overview (Official Docs)arrow-up-right

  • Activities:
    1. Study the WordPress Template Hierarchy:

      • Understand the Hierarchy:

        • Learn how WordPress determines which template file to use.

        • Review the .

    2. Create a New Theme Directory:

      • Set Up Theme Folder:

        • Navigate to wp-content/themes/.

    3. Develop Basic Theme Files:

      • style.css:

        • Add theme information at the top:

    4. Activate the Theme:

      • Through WordPress Admin:

        • Go to Appearance > Themes.

    5. Use Template Tags and The Loop:

      • Display Posts:

        • Implement The Loop in index.php:

  • Resources:

    • Creating a Basic Theme (ThemeShaper Tutorial)arrow-up-right

    • Understanding The Loop (Official Docs)arrow-up-right

  • Activities:
    1. Create Custom Page Templates:

      • Make a Custom Template:

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

        • At the top, add:

        • Modify the template as needed, for example:

    2. Implement Custom Menus:

      • Register Menus in functions.php:

      • Display Menus in Templates:

    3. Add Widget Areas (Sidebars):

      • Register Sidebar in functions.php:

      • Display Sidebar in Templates:

    4. Set Up TypeScript Build Process:

      • Initialize NPM in Theme Folder:

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

    5. Add Interactive Elements Using TypeScript:

      • Create src/index.ts:

        • Example code:

  • Resources:

    • Custom Page Templates (Official Docs)arrow-up-right

    • WordPress Menus and Widgets (WPBeginner)arrow-up-right

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

    3. Deliver the Presentation (20 minutes):

      • Presentation Content:

        • Introduce your custom theme and its purpose.

    4. Afternoon Development:

      • Implement Feedback:

        • Incorporate any useful suggestions received during the presentation.

  • Resources:

    • Effective Presentation Tipsarrow-up-right

    • Demo Guidelinesarrow-up-right

  • Activities:
    1. Using $wpdb for Database Queries:

      • Global $wpdb Object:

        • Access the database using $wpdb.

      • Retrieve Data:

      • Display Data in the Theme:

        • Create a custom template or modify an existing one to display the data.

    2. Create a Custom Table:

      • Register Activation Hook:

    3. Create a Form to Save Data:

      • Display Form Using Shortcode:

      • Handle Form Submission:

    4. Understand Data Sanitization and Security:

      • Sanitize Inputs:

        • Use sanitize_text_field(), sanitize_email(), etc.

  • Resources:

    • Using $wpdb (Official Docs)arrow-up-right

    • Database Security Best Practices (Official Docs)arrow-up-right

  • Simple demo of react and .NET projectarrow-up-right
    Demo of a more complicated backend with a databasearrow-up-right

    Resources

    • hashtag
      Tutorial for Dependency Injections arrow-up-rightDetailed tutorial of building a project and adding DI

    • hashtag
      Microsoft's explanation of dependency injections

    • hashtag
      Basic intro to xUnit

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

    • hashtag
      The official xUnit documentation

    Week of November 25th

    .NET Path

    This week focuses on deploying and testing the library management system, emphasizing comprehensive testing strategies and cloud deployment using AWS services.

    hashtag
    Core Topics

    • Testing strategies and methodologies

    • AWS deployment architecture

    • CI/CD with GitHub Actions

    • Infrastructure as Code

    • Environment configuration management

    • Cloud service integration

    hashtag
    Project Development Focus

    • Implementing unit tests

    • Creating integration tests

    • Setting up end-to-end testing with Cypress

    • Deploying to AWS EC2 and S3

    hashtag
    Learning Objectives

    • Understanding different testing approaches

    • Implementing comprehensive test coverage

    • Managing cloud infrastructure

    PHP Path

    This week focuses on WordPress deployment, security, and optimization, covering hosting solutions, migration processes, and performance tuning.

    hashtag
    Core Topics

    • WordPress hosting options

    • Site migration and deployment

    • Security implementation

    • Performance optimization

    hashtag
    Project Development Focus

    • Selecting appropriate hosting solutions

    • Migrating WordPress installations

    • Implementing SSL certificates

    hashtag
    Learning Objectives

    • Understanding WordPress deployment options

    • Implementing security best practices

    • Optimizing WordPress performance

    schedule


    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:

  • Configuring CloudFront distribution

  • Setting up CI/CD pipelines

  • Writing deployment documentation

  • Setting up automated deployments
  • Configuring AWS services

  • Writing technical documentation

  • DNS configuration

  • Project documentation

  • Setting up security measures
  • Optimizing site performance

  • Configuring DNS settings

  • Creating project documentation

  • Managing DNS and domains
  • Creating technical documentation

  • Presenting project outcomes

  • hashtag
    - name: Progress Log Review

    hashtag
    start: 10:00

    hashtag
    end: 11:30

    hashtag
    type: expert-feedback

    hashtag
    - name: Consolidation day

    hashtag
    start: 11:30

    hashtag
    end: 18:00

    hashtag
    ---

    Official Microsoft Documentationarrow-up-right
    A Guide to NET Testingarrow-up-right
    A Guide to ASP.NET Testingarrow-up-right
    Official Microsoft xUnit Guidearrow-up-right

    week13-TFB-design

    overview

    hashtag
    Week of December 2th

    hashtag
    This week is not updated to FAC30

    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.

  • wp-includes: Core WordPress files.

  • wp-admin: Backend administration files.

  • Understanding Core Files:

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

  • Resources:
    • PHP Manualarrow-up-right

    • W3Schools PHP Tutorialarrow-up-right

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

    index.php:

    • Basic template file that WordPress uses by default.

    • Add a simple HTML structure:

  • header.php and footer.php:

    • Separate the header and footer sections.

    • header.php:

    • footer.php:

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

  • Find and activate "My Custom Theme".

    Install Dependencies:

    • Install Webpack and TypeScript:

  • Configure TypeScript:

    • Create tsconfig.json:

  • Set Up Webpack Config:

    • Create webpack.config.js:

  • Add Scripts to package.json:

  • Build and Include Script:

    • Run npm run build.

    • Enqueue the script in functions.php:

  • Add an Element to Test Interaction:

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

  • Prepare Presentation Materials:
    • Create slides if necessary.

    • Set up a live demo environment.

  • Rehearse:

    • Practice delivering the presentation within the time limit.

  • Demonstrate key features and customizations.
  • Discuss challenges faced and solutions implemented.

  • Engage with the Audience:

    • Encourage questions and feedback.

  • Continue Development:
    • Proceed with the next planned activities.

    Display Submitted Data:
    • Create a shortcode or admin page to display the data from the custom table.

    Prevent SQL Injection:

    • Always prepare queries or use helper methods.

  • Use Nonces:

    • Protect against CSRF attacks by using nonces.

  • Escape Outputs:

    • Use esc_html(), esc_attr(), etc., when outputting data.

  • XAMPParrow-up-right
    MAMParrow-up-right
    official websitearrow-up-right
    Template Hierarchy diagramarrow-up-right
    WordPress Template Hierarchy (Official Docs)arrow-up-right
    Webpack and TypeScript Setup Guide (DigitalOcean)arrow-up-right
    Using TypeScript with WordPressarrow-up-right
    Nonces for Security (Official Docs)arrow-up-right

    project

    hashtag
    .NET

    Your task this week is to continue building the project from last week but to try and add some .NET tests and more broadly to use dependency injection.

    hashtag
    Spike

    Before you start think what are your dependencies. Which of these are tightly tied to other classes in a way that will slow development or make testing hard. If you want to replace this with dependency injection think what will the interface look like.

    hashtag
    Questions to consider

    • What do you want the structure of your project to look like and how should the solution file be configured to allow that?

    • Where do you want to use dependency injections in my code?

    • How will you test the functionality of the API?

    hashtag
    Acceptance Criteria

    hashtag
    Stretch criteria


    hashtag
    PHP

    hashtag
    Building the Custom Plugin and Theme Integration

    Monday: Planning the Plugin Functionality

    • Objectives:

      • Define the plugin's purpose, features, and data requirements.

      • Design the database schema if needed.


    Tuesday: Developing the Plugin Backend

    • Objectives:

      • Start coding the core functionality of the plugin.

      • Create custom post types and taxonomies.


    Wednesday: Enhancing the Plugin with AJAX and APIs

    • Objectives:

      • Implement dynamic features using AJAX.

      • Integrate external APIs if applicable.


    Thursday: Presentation Preparation and Delivery

    • Objectives:

      • Prepare and deliver a 20-minute presentation showcasing the plugin progress.

      • Continue normal development activities.


    Friday: Front-End Integration and Shortcodes

    • Objectives:

      • Connect the plugin with the theme.

      • Provide user-facing features using shortcodes and widgets.

    project

    hashtag
    .NET

    Your task this week is to deploy and test the library app you have completed in the previous two weeks.

    hashtag
    Spike

    Before you start you need to create a testing and deployment plan. We would like you to 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 using CloudFront. You should also utilise Github actions to allow you to automatically deploy changes on merges to your main branch.

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

    hashtag
    Acceptance Criteria

    hashtag
    Stretch


    hashtag
    PHP

    hashtag
    Deployment and Advanced Topics

    Monday: Exploring Deployment Options

    • Objectives:

      • Learn about standard WordPress hosting solutions.

      • Compare AWS with managed WordPress hosting providers.


    Tuesday: Preparing for Deployment

    • Objectives:

      • Set up the chosen hosting environment.

      • Migrate the local WordPress site to the hosting server.


    Wednesday: Securing and Optimizing the Site

    • Objectives:

      • Implement security best practices.

      • Optimize the site's performance.


    Thursday: Final Adjustments and Presentation

    • Objectives:

      • Finalize the deployment of the WordPress site.

      • Prepare and deliver the final 20-minute presentation.


    hashtag
    Additional Learning Opportunities and Resources

    • Advanced PHP Concepts:

      1. Learn Object-Oriented Programming (OOP):

        • Implement Classes and Objects in Your Plugin:

    Learning Outcomes

    hashtag
    Testing

    hashtag
    Deployment

    Resources

    • hashtag
      Guide ENV variables and file in Vitearrow-up-right Some insight on how build tools process .env files

    • hashtag
      A quick guide to a basic deploy of a Core API to a EC2 instance

    schedule


    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: Apprenticeship Training EPA 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:

    Learning Outcomes

    hashtag
    Working with a client

    <!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>
    npm install --save-dev webpack webpack-cli typescript ts-loader
    {
      "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "outDir": "./dist",
        "strict": true
      },
      "include": ["src/**/*"]
    }
    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"),
      },
    };
    "scripts": {
      "build": "webpack",
      "watch": "webpack --watch"
    }
    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' );
    <button id="interactive-element">Click Me</button>
    /*
    Theme Name: My Custom Theme
    Theme URI: http://example.com/
    Author: Your Name
    Description: A custom theme for learning.
    Version: 1.0
    */
    <?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(); ?>
    <?php
    /*
    Template Name: Custom Page
    */
    ?>
    <?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(); ?>
    <?php
    function register_my_menus() {
      register_nav_menus(
        array(
          'header-menu' => __( 'Header Menu' ),
          'footer-menu' => __( 'Footer Menu' )
        )
      );
    }
    add_action( 'init', 'register_my_menus' );
    <?php
    wp_nav_menu( array( 'theme_location' => 'header-menu' ) );
    ?>
    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' );
    <?php
    if ( is_active_sidebar( 'custom-sidebar' ) ) {
      dynamic_sidebar( 'custom-sidebar' );
    }
    ?>
    document.addEventListener("DOMContentLoaded", () => {
      const element = document.getElementById("interactive-element");
      if (element) {
        element.addEventListener("click", () => {
          alert("TypeScript is working!");
        });
      }
    });
    global $wpdb;
    $results = $wpdb->get_results( "SELECT * FROM {$wpdb->prefix}posts WHERE post_status = 'publish'" );
    foreach ( $results as $post ) {
      echo $post->post_title;
    }
    register_activation_hook( __FILE__, 'create_custom_table' );
    function create_custom_table() {
      global $wpdb;
      $table_name = $wpdb->prefix . 'custom_table';
      $charset_collate = $wpdb->get_charset_collate();
    
      $sql = "CREATE TABLE $table_name (
        id mediumint(9) NOT NULL AUTO_INCREMENT,
        time datetime DEFAULT '0000-00-00 00:00:00' NOT NULL,
        name tinytext NOT NULL,
        email VARCHAR(100) NOT NULL,
        PRIMARY KEY  (id)
      ) $charset_collate;";
    
      require_once( ABSPATH . 'wp-admin/includes/upgrade.php' );
      dbDelta( $sql );
    }
    function custom_form_shortcode() {
      ob_start();
      ?>
      <form method="post">
        <?php wp_nonce_field( 'submit_form' ); ?>
        <input type="text" name="name" placeholder="Name" required>
        <input type="email" name="email" placeholder="Email" required>
        <input type="submit" name="submit_form" value="Submit">
      </form>
      <?php
      return ob_get_clean();
    }
    add_shortcode( 'custom_form', 'custom_form_shortcode' );
    function handle_form_submission() {
      if ( isset( $_POST['submit_form'] ) ) {
        // Security check
        if ( ! wp_verify_nonce( $_POST['_wpnonce'], 'submit_form' ) ) {
          die( 'Security check failed' );
        }
    
        global $wpdb;
        $table_name = $wpdb->prefix . 'custom_table';
        $name = sanitize_text_field( $_POST['name'] );
        $email = sanitize_email( $_POST['email'] );
    
        $wpdb->insert(
          $table_name,
          array(
            'time' => current_time( 'mysql' ),
            'name' => $name,
            'email' => $email,
          )
        );
      }
    }
    add_action( 'init', 'handle_form_submission' );
    Understand the process of building and optimising a .NET application for production (S10, S14, B3)
  • hashtag
    - name: Progress Log Review

    hashtag
    start: 10:00

    hashtag
    end: 11:30

    hashtag
    type: expert-feedback

    hashtag
    - name: Consolidation day

    hashtag
    start: 11:30

    hashtag
    end: 18:00

    hashtag
    ---

    Manage perspectives and expectations of a Product Owner
  • hashtag
    UX and Design

    hashtag
    Agile Workflow

    hashtag
    Sprints

    .NET Deployment Cheat Sheetarrow-up-right

    Resources

    • Sprint by Google Venturearrow-up-right

    • The Design Sprintarrow-up-right

    • Design Sprint Methodologiesarrow-up-right

    Project

    hashtag
    Repository naming convention

    Please name your repo following this template: PROTFB_Project_Name

    Your project in Design Week is to create a wireframe in Figmaarrow-up-right and test it with your Product Owners' user group.

    Take ideas from your Definition workshop and the sketches you did there. You can consider the ideas you came up with there as low-fidelity prototypes and with Figma, you'll create a high-fidelity prototype.

    Your wireframe should include the main steps of the user journey. Think about which parts of the journey you'd like to get feedback on from your users and prioritise building these.

    schedule

    define('DB_NAME', 'wordpress_db');
    define('DB_USER', 'root');
    define('DB_PASSWORD', '');
    <!DOCTYPE html>
    <html>
    <head>
      <title><?php bloginfo('name'); ?></title>
      <?php wp_head(); ?>
    </head>
    <body>
      <?php wp_footer(); ?>
    </body>
    </html>
    <?php get_header(); ?>
    <h1>Welcome to <?php bloginfo('name'); ?></h1>
    <?php get_footer(); ?>
    Where you are using interfaces what keys and methods will the interface need to look for?
    Set up version control.
  • Activities:

    1. Brainstorm Plugin Ideas:

      • Possible Ideas:

        • Event Manager with custom event posts.

        • Testimonials plugin with submission form.

        • Simple CRM for managing contacts.

    2. Outline Main Features:

      • User Interactions:

        • Front-end forms for data submission.

    3. Design Database Schema:

      • Identify Data Entities:

        • Determine what data needs to be stored.

    4. Set Up Version Control:

      • Initialize Git Repository:

        • Run git init in your plugin directory.

  • Resources:

    • Guide to Custom Post Types (Official Docs)arrow-up-right

    • Git Basics (Git-SCM)arrow-up-right

  • Build admin menus and settings pages.
  • Activities:

    1. Register Custom Post Types (CPT):

      • Add Code in Plugin File:

    2. Add Custom Taxonomies:

      • Register Taxonomy:

    3. Build Admin Menus and Settings Pages:

      • Add Menu Page:

      • Create Settings Page Content:

    4. Use the WordPress Settings API:

      • Register Settings:

      • Create Settings Form:

  • Resources:

    • How to Register Custom Taxonomies (Official Docs)arrow-up-right

    • Admin Menus and Settings API (Official Docs)arrow-up-right

  • Activities:
    1. Implement AJAX in the Plugin:

      • Enqueue Scripts:

      • Create JavaScript File plugin-ajax.js:

      • Handle AJAX Request in PHP:

    2. Integrate External APIs (Optional):

      • Choose an API:

        • For example, fetch event data from a public API like Eventbrite.

    3. Continue Integrating TypeScript:

      • Use TypeScript for AJAX Calls:

        • Convert plugin-ajax.js to TypeScript and place it in src/.

  • Resources:

    • Using AJAX in Plugins (Official Docs)arrow-up-right

    • Fetch API Basics (MDN Web Docs)arrow-up-right

  • Activities:
    1. Morning Development:

      • Integrate Plugin with Theme:

        • Connect plugin functionalities to the custom theme.

      • Enhance Plugin Features:

        • Add new features or refine existing ones.

      • Debug and Test:

        • Ensure the plugin works seamlessly within the theme.

    2. Presentation Preparation (1 hour):

      • Summarize Plugin Progress:

        • Outline key functionalities developed.

    3. Deliver the Presentation (20 minutes):

      • Presentation Content:

        • Introduce your plugin and its purpose.

    4. Afternoon Development:

      • Implement Feedback:

        • Incorporate any useful suggestions received during the presentation.

  • Resources:

    • Presentation Skills for Developersarrow-up-right

    • Demo Preparation Checklistarrow-up-right

  • Activities:
    1. Create Shortcodes to Display Plugin Data:

      • Display Events List:

      • Use Shortcode in a Page:

        • Add [events_list] to display the list of events.

    2. Design Front-End Templates for CPT:

      • Create Template Files:

        • single-event.php for individual events.

    3. Ensure Responsive Design and Accessibility:

      • Use Responsive CSS Frameworks (Optional):

        • Integrate Bootstrap or Tailwind CSS.

    4. Optimize Assets with TypeScript and CSS Preprocessors:

      • Set Up SASS (Optional):

        • Install node-sass:

  • Resources:

    • Building Shortcodes (Official Docs)arrow-up-right

    • Creating Widgets for Plugins (Official Docs)arrow-up-right

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

  • Activities:
    1. Research Hosting Providers:

      • Managed WordPress Hosts:

        • SiteGround:

          • Visit .

          • Note features like WordPress-specific optimizations, staging environments, and support.

        • Bluehost:

          • Visit .

          • Check for one-click WordPress installs, free domain, and SSL certificate.

        • WP Engine:

          • Visit .

          • Explore managed hosting features like advanced security, global CDN, and development environments.

      • Features to Consider:

        • Performance Optimization:

          • Server configurations.

    2. Understand Benefits of Managed Hosting:

      • Ease of Use:

        • Simplified setup processes.

    3. Compare with AWS:

      • AWS Flexibility:

        • Ability to customize server environments.

    4. Decide on Hosting Solution:

      • Factors to Consider:

        • Learning Objectives:

  • Resources:

    • WordPress Hosting Options (WPBeginner)arrow-up-right

    • Deploying WordPress on AWS (AWS Docs)arrow-up-right

  • Activities:
    1. Set Up Hosting Environment:

      • Sign Up for Hosting:

        • Follow the sign-up process for your chosen hosting provider.

        • Note down important details like login credentials, server IP, and nameservers.

      • Set Up Domain (if applicable):

        • Register a Domain:

          • If you need a new domain, register one through your hosting provider or a domain registrar like .

    2. Export Local Database:

      • Use phpMyAdmin:

        • Access phpMyAdmin via http://localhost/phpmyadmin/

    3. Import Database to Server:

      • Access Server's phpMyAdmin:

        • Log in to your hosting account's control panel (e.g., cPanel).

    4. Upload WordPress Files:

      • Use FTP Client (e.g., FileZilla):

        • Install FileZilla: If not already installed, download from .

    5. Configure wp-config.php:

      • Update Database Credentials:

        • Open wp-config.php in a text editor.

    6. Test the Site:

      • Access the Site via Browser:

        • Navigate to http://yourdomain.com.

  • Resources:

    • Migrating WordPress Sites (Official Docs)arrow-up-right

    • File Transfer via FTP (FileZilla Guide)arrow-up-right

  • Activities:
    1. Install SSL Certificate:

      • Use Let's Encrypt (if supported):

        • Access Control Panel:

          • Go to your hosting control panel.

        • Find SSL/TLS Settings:

          • Locate the SSL/TLS or Let's Encrypt option.

        • Install SSL Certificate:

          • Follow the prompts to install a free SSL certificate for your domain.

      • Force HTTPS:

        • Update .htaccess File:

          • Add the following code at the top of your .htaccess

    2. Set Up Security Plugins:

      • Install Wordfence Security Plugin:

        • In the WordPress admin dashboard, go to Plugins > Add New.

    3. Implement Caching for Performance:

      • Install WP Super Cache Plugin:

        • Go to Plugins > Add New.

    4. Optimize Images and Assets:

      • Install Smush Image Compression Plugin:

        • Go to Plugins > Add New.

    5. Check Site Performance:

      • Use GTmetrix:

        • Visit .

  • Resources:

    • WordPress Security Guide (Wordfence Blog)arrow-up-right

    • SSL for WordPress (Let’s Encrypt Guide)arrow-up-right

  • Allocate time for presentation preparation.
  • Engage in normal development activities.

  • Activities:

    1. Morning Development:

      • Finalize Deployment:

        • Double-Check Functionality:

          • Test all site features, including custom theme and plugin functionalities.

        • Fix Any Remaining Issues:

          • Address any bugs or errors found during testing.

      • Perform Final Testing:

        • Cross-Browser Testing:

          • Test the site on multiple browsers (Chrome, Firefox, Edge, Safari).

    2. Presentation Preparation (1 hour):

      • Summarize Project Journey:

        • Outline the project's objectives, progress, and outcomes.

    3. Deliver the Presentation (20 minutes):

      • Presentation Structure:

        • Introduction:

    4. Afternoon Development:

      • Implement Feedback:

        • Address any immediate feedback from the presentation.

  • Resources:

    • Tips for Effective Technical Presentationsarrow-up-right

    • Live Demo Best Practicesarrow-up-right

  • Refactor parts of your plugin to use classes.

  • Example Class Structure:

  • Benefits of OOP:

    • Encapsulation of functionality.

    • Easier maintenance and scalability.

  • Resources:

    • PHP OOP Conceptsarrow-up-right

  • Use Namespaces and Autoloading:

    • Organize Code Using Namespaces:

      • Add namespaces to your classes.

    • Implement PSR-4 Autoloading:

      • Use Composer for autoloading classes.

        • Install Composer:

          • Download from .

    • Resources:

  • Security Best Practices:

    • Deep Dive into WordPress Security:

      • Further Hardening WordPress:

        • Change default table prefixes.

        • Disable file editing from the admin dashboard.

        • Limit login attempts.

      • Stay Updated:

        • Regularly update WordPress core, themes, and plugins.

      • Resources:

  • Spikes

    There are no defined spikes for this week.

    You may find that you need to manage spikes within your sprints. Remember to follow .

    You're encouraged to continue role circles with those who are playing the same role as you.

    function create_custom_post_type() {
      $labels = array(
        'name' => __( 'Events' ),
        'singular_name' => __( 'Event' ),
        'add_new' => __( 'Add New Event' ),
        'add_new_item' => __( 'Add New Event' ),
        'edit_item' => __( 'Edit Event' ),
        'new_item' => __( 'New Event' ),
        'all_items' => __( 'All Events' ),
        'view_item' => __( 'View Event' ),
        'search_items' => __( 'Search Events' ),
        'not_found' => __( 'No events found' ),
        'not_found_in_trash' => __( 'No events found in Trash' ),
        'menu_name' => __( 'Events' )
      );
      $args = array(
        'labels' => $labels,
        'public' => true,
        'has_archive' => true,
        'supports' => array( 'title', 'editor', 'custom-fields', 'thumbnail' ),
        'rewrite' => array( 'slug' => 'events' ),
      );
      register_post_type( 'event', $args );
    }
    add_action( 'init', 'create_custom_post_type' );
    function enqueue_plugin_scripts() {
      wp_enqueue_script( 'my-plugin-ajax', plugin_dir_url( __FILE__ ) . 'js/plugin-ajax.js', array('jquery'), null, true );
      wp_localize_script( 'my-plugin-ajax', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
    }
    add_action( 'wp_enqueue_scripts', 'enqueue_plugin_scripts' );
    jQuery(document).ready(function ($) {
      $("#my-button").on("click", function () {
        $.ajax({
          url: ajax_object.ajax_url,
          type: "POST",
          data: {
            action: "my_ajax_action",
            data: "test",
          },
          success: function (response) {
            alert("Response: " + response);
          },
        });
      });
    });
    function display_events_shortcode() {
      $args = array(
        'post_type' => 'event',
        'posts_per_page' => -1,
      );
      $events = new WP_Query( $args );
      $output = '<ul>';
      if ( $events->have_posts() ) {
        while ( $events->have_posts() ) {
          $events->the_post();
          $output .= '<li>' . get_the_title() . ' - ' . get_the_date() . '</li>';
        }
      } else {
        $output .= '<li>No events found.</li>';
      }
      $output .= '</ul>';
      wp_reset_postdata();
      return $output;
    }
    add_shortcode( 'events_list', 'display_events_shortcode' );
    <?php
    class Event_Manager {
      public function __construct() {
        add_action( 'init', array( $this, 'register_custom_post_type' ) );
      }
    
      public function register_custom_post_type() {
        // Registration code here
      }
    
      // Additional methods
    }
    
    $event_manager = new Event_Manager();
    ?>
    <?php
    namespace MyPlugin;
    
    class Event_Manager {
      // Class code
    }
    ?>
    the techniques you followed earlier in the programmearrow-up-right
    Admin pages for data management.
  • Functionality:

    • CRUD operations (Create, Read, Update, Delete).

    • Notifications or email integration.

  • Sketch Tables and Relationships:
    • Use diagrams or tools like Draw.ioarrow-up-right.

    Create a Remote Repository:

    • Use GitHubarrow-up-right, GitLabarrow-up-right, or Bitbucketarrow-up-right.

  • Commit and Push Changes:

    • Stage files with git add ., commit with git commit -m "Initial commit", and push to remote.

  • Make API Requests:
    • Use wp_remote_get() to fetch data.

  • Display Data on Front-End:

    • Process and output the data within templates or via shortcodes.

  • Update Build Process:

    • Ensure Webpack compiles the TypeScript file into JavaScript.

  • Enqueue the Compiled Script:

    • Update the script handle and path in your plugin.

  • Prepare Presentation Materials:
    • Create slides or notes.

    • Set up a live demo.

  • Rehearse:

    • Practice delivering the presentation within the time limit.

  • Demonstrate key features and integrations.
  • Discuss challenges faced and solutions implemented.

  • Engage with the Audience:

    • Encourage questions and feedback.

  • Continue Development:
    • Proceed with pending tasks.

    archive-event.php for event archives.

  • Customize Templates:

    • Use HTML and WordPress functions to display event details.

    • Example for single-event.php:

  • Accessibility Best Practices:
    • Use semantic HTML.

    • Ensure proper contrast and font sizes.

    • Add alt attributes to images.

    Update Build Process:

    • Configure Webpack to process SCSS files.

    • Example webpack.config.js update:

  • Organize Styles:

    • Create SCSS files in src/styles/.

  • Import Styles in TypeScript:

  • Database Schema Best Practices (DigitalOcean)arrow-up-right
    Plugin Settings with the WordPress Settings API (Smashing Magazine)arrow-up-right
    Integrating APIs into WordPress (WPBeginner)arrow-up-right
    Responsive Design Basics (MDN Web Docs)arrow-up-right
    <?php get_header(); ?>
    <div class="event-content">
      <?php
      if ( have_posts() ) :
        while ( have_posts() ) : the_post();
          ?>
          <h1><?php the_title(); ?></h1>
          <div class="event-meta">
            <p>Date: <?php echo get_post_meta( get_the_ID(), 'event_date', true ); ?></p>
            <p>Location: <?php echo get_post_meta( get_the_ID(), 'event_location', true ); ?></p>
          </div>
          <div class="event-description">
            <?php the_content(); ?>
          </div>
          <?php
        endwhile;
      endif;
      ?>
    </div>
    <?php get_footer(); ?>
    module: {
      rules: [
        // ...existing rules
        {
          test: /\.scss$/,
          use: [
            'style-loader',
            'css-loader',
            'sass-loader'
          ],
        },
      ],
    },
    import "./styles/main.scss";
    function create_event_taxonomies() {
      $labels = array(
        'name' => __( 'Event Types' ),
        'singular_name' => __( 'Event Type' ),
        'search_items' =>  __( 'Search Event Types' ),
        'all_items' => __( 'All Event Types' ),
        'parent_item' => __( 'Parent Event Type' ),
        'parent_item_colon' => __( 'Parent Event Type:' ),
        'edit_item' => __( 'Edit Event Type' ),
        'update_item' => __( 'Update Event Type' ),
        'add_new_item' => __( 'Add New Event Type' ),
        'new_item_name' => __( 'New Event Type Name' ),
        'menu_name' => __( 'Event Types' ),
      );
      $args = array(
        'hierarchical' => true,
        'labels' => $labels,
        'show_ui' => true,
        'show_admin_column' => true,
        'query_var' => true,
        'rewrite' => array( 'slug' => 'event-type' ),
      );
      register_taxonomy( 'event_type', array( 'event' ), $args );
    }
    add_action( 'init', 'create_event_taxonomies', 0 );
    function my_plugin_menu() {
      add_menu_page( 'Events Management', 'Events', 'manage_options', 'events', 'events_page', 'dashicons-calendar', 6 );
    }
    add_action( 'admin_menu', 'my_plugin_menu' );
    function events_page() {
      echo '<div class="wrap"><h1>Events Management</h1>';
      // Add settings forms or data display here.
      echo '</div>';
    }
    function my_plugin_settings() {
      register_setting( 'my-plugin-settings-group', 'my_option_name' );
    }
    add_action( 'admin_init', 'my_plugin_settings' );
    function events_page() {
      ?>
      <div class="wrap">
        <h1>Events Management</h1>
        <form method="post" action="options.php">
          <?php settings_fields( 'my-plugin-settings-group' ); ?>
          <?php do_settings_sections( 'my-plugin-settings-group' ); ?>
          <table class="form-table">
            <tr valign="top">
              <th scope="row">Option Name</th>
              <td><input type="text" name="my_option_name" value="<?php echo esc_attr( get_option('my_option_name') ); ?>" /></td>
            </tr>
          </table>
          <?php submit_button(); ?>
        </form>
      </div>
      <?php
    }
    function my_ajax_action() {
      $data = $_POST['data'];
      // Process data here.
      echo 'Received: ' . $data;
      wp_die(); // All AJAX handlers should die when finished.
    }
    add_action( 'wp_ajax_my_ajax_action', 'my_ajax_action' );
    add_action( 'wp_ajax_nopriv_my_ajax_action', 'my_ajax_action' );
    import $ from "jquery";
    
    $(document).ready(function () {
      $("#my-button").on("click", function () {
        $.ajax({
          url: ajax_object.ajax_url,
          type: "POST",
          data: {
            action: "my_ajax_action",
            data: "test",
          },
          success: function (response) {
            alert("Response: " + response);
          },
        });
      });
    });
    npm install --save-dev node-sass
    $response = wp_remote_get( 'https://api.eventbriteapi.com/v3/events/search/?token=YOUR_API_TOKEN' );
    if ( is_array( $response ) && ! is_wp_error( $response ) ) {
      $body = $response['body']; // use the content
      $data = json_decode( $body );
    }
    Use of caching technologies.
  • CDN availability.

  • Security Features:

    • SSL certificates.

    • Malware scanning.

    • Firewall protection.

  • Customer Support:

    • Availability of 24/7 support.

    • Support channels (chat, phone, email).

  • Pricing Plans:

    • Monthly vs. annual pricing.

    • Introductory offers and renewal rates.

  • Pre-configured WordPress environments.
  • Performance:

    • Servers optimized specifically for WordPress.

    • Built-in caching and performance enhancements.

  • Security:

    • Regular security updates.

    • Proactive monitoring for vulnerabilities.

  • Scalability options.
  • Complexity:

    • Requires knowledge of server management.

    • Setup can be more time-consuming.

  • Cost Considerations:

    • Potentially lower costs at scale.

    • Pay-as-you-go pricing model.

  • Do you want to learn server management alongside WordPress?

  • Budget Constraints:

    • What is the acceptable cost per month/year?

  • Time Available for Setup:

    • Is there time to manage servers, or is a managed solution preferable?

  • Make a Decision:

    • Choose the hosting provider that best fits your project needs.

  • Update Nameservers:

    • Point your domain to your hosting provider's nameservers.

    .
  • Select your WordPress database (e.g., wordpress_db).

  • Click on the Export tab.

  • Choose the Quick export method and format as SQL.

  • Click Go to download the database export file.

  • Open phpMyAdmin from the control panel.

  • Create a new database (e.g., yourusername_wpdb).

  • Create a new database user and assign it to the database with all privileges.

  • Select the new database.

  • Click on the Import tab.

  • Choose the SQL file exported earlier and click Go to import.

  • Connect to the Server:

    • Host: Your domain or server IP.

    • Username: Your FTP username.

    • Password: Your FTP password.

    • Port: Usually 21.

  • Upload Files:

    • Navigate to the public_html or www directory on the server.

    • Upload all files and folders from your local WordPress directory.

  • Update the following lines with your server database credentials:

  • Update Site URLs:

    • Add the following lines to temporarily define site URLs:

  • Check if the site loads correctly.

  • Troubleshoot Issues:

    • Common Issues:

      • Database connection errors.

      • Missing files or permissions errors.

    • Solutions:

      • Double-check database credentials in wp-config.php.

      • Ensure all files are uploaded.

  • file to redirect all traffic to HTTPS:
  • Update WordPress Settings:

    • In the WordPress admin dashboard, go to Settings > General.

    • Update WordPress Address (URL) and Site Address (URL) to use https://.

  • Search for "Wordfence Security".

  • Install and activate the plugin.

  • Configure Wordfence:

    • Follow the setup wizard.

    • Enable firewall and scan options.

    • Configure login security settings.

  • Search for "WP Super Cache".

  • Install and activate the plugin.

  • Configure Caching Options:

    • Go to Settings > WP Super Cache.

    • Enable Caching.

    • Choose Simple caching method.

  • Advanced Settings (Optional):

    • Configure CDN support if using a CDN.

    • Enable compression.

  • Search for "Smush".

  • Install and activate the plugin.

  • Bulk Optimize Images:

    • Go to Media > Bulk Smush.

    • Optimize existing images.

  • Enable Automatic Optimization:

    • Configure settings to automatically optimize images on upload.

  • Minify CSS and JavaScript with Autoptimize:

    • Install and activate the "Autoptimize" plugin.

    • Go to Settings > Autoptimize.

    • Enable options to optimize HTML, JavaScript, and CSS.

  • Enter your site URL and analyze.
  • Use Google PageSpeed Insights:

    • Visit PageSpeed Insightsarrow-up-right.

    • Enter your site URL and analyze.

  • Review Recommendations:

    • Identify areas for improvement.

    • Implement suggestions as feasible.

  • Mobile Responsiveness:
    • Test the site on mobile devices or use browser developer tools.

    Prepare Presentation Materials:
    • Create slides highlighting key features.

    • Include screenshots and code snippets where appropriate.

    • Prepare a live demo of the deployed site.

  • Rehearse:

    • Practice the presentation to ensure it fits within the 20-minute time limit.

  • Briefly introduce yourself and the project.

  • Project Overview:

    • Discuss the project's goals and scope.

  • Demonstration:

    • Showcase the live site.

    • Navigate through key features.

    • Highlight custom theme and plugin functionalities.

  • Technical Deep-Dive:

    • Explain complex components.

    • Show relevant code snippets.

    • Discuss challenges and how you overcame them.

  • Conclusion:

    • Summarize accomplishments.

    • Mention possible future improvements.

  • Engage with the Audience:

    • Invite questions and feedback.

  • Begin Project Documentation:
    • Start compiling user guides and technical documentation.

    Create composer.json:

  • Run Composer Dump-Autoload:

  • Include Autoloader in Plugin:

  • SiteGround WordPress Hostingarrow-up-right
    Bluehost WordPress Hostingarrow-up-right
    WP Enginearrow-up-right
    Best Managed WordPress Hosting Providersarrow-up-right
    Namecheaparrow-up-right
    FileZillaarrow-up-right
    Editing wp-config.php (Official Docs)arrow-up-right
    GTmetrixarrow-up-right
    Caching and Performance (Official Docs)arrow-up-right
    getcomposer.orgarrow-up-right
    Composer Autoloadingarrow-up-right
    Namespaces in PHParrow-up-right
    Hardening WordPress (Official Docs)arrow-up-right
    WordPress Security Whitepaperarrow-up-right
    define('DB_NAME', 'yourusername_wpdb');
    define('DB_USER', 'your_db_username');
    define('DB_PASSWORD', 'your_db_password');
    define('DB_HOST', 'localhost'); // Often 'localhost', check with your host
    define('WP_HOME','http://yourdomain.com');
    define('WP_SITEURL','http://yourdomain.com');
    {
      "autoload": {
        "psr-4": {
          "MyPlugin\\": "src/"
        }
      }
    }
    composer dump-autoload
    require_once plugin_dir_path( __FILE__ ) . 'vendor/autoload.php';
    // Add to wp-config.php
    define('DISALLOW_FILE_EDIT', true);
    RewriteEngine On
    RewriteCond %{SERVER_PORT} 80
    RewriteRule ^(.*)$ https://www.yourdomain.com/$1 [R,L]
    Check file permissions (usually folders 755, files 644).