Tech4DevSE

Tech4Dev Software Engineering (Web Dev) Course Repository

Overview

This repository consolidates all course modules and projects from the Tech4Dev Software Engineering Program. The program aims to empower Africans by providing access to decent work and entrepreneurship opportunities through digital skills empowerment and advocacy. The initiative is dedicated to scaling access to sustainable tech careers and transforming how talent connects with opportunity, ensuring economic prosperity for young Africans and marginalized groups.

Modules and Technologies Covered

The course included 14 modules covering foundational topics in software engineering (Web Dev). Below is the curriculum of the program:

Module 1: Introduction

● What is web development? ● Overview of the frontend and backend ● Basics of HTML, CSS, and JavaScript ● How browsers work

Module 2: Setting Up your Development Environment

● Installing a text editor (e.g., Visual Studio Code) ● Introduction to the terminal/command line ● Installing Node.js and npm

Module 3: HTML and CSS Fundamentals

● Understanding HTML tags and structure ● Styling with CSS: Selectors, properties, and values ● Building a simple static webpage

Module 4: Introduction to JavaScript

● Variables, data types, and operators ● Control flow: if statements, loops ● Functions and basic JavaScript events

Module 5: Getting started with Node.js

● What is Node.js, and why use it? ● Installing Node.js and npm. ● Running your first Node.js script

Module 6: Backend Development Basics

● What is the backend? ● Creating a basic server with Node.js ● Introduction to request and response objects

Module 7: Working with Databases

● Introduction to databases (e.g., MongoDB) ● Setting up and connecting to a database ● Basic CRUD operations with a database

Module 8: Creating your first full-stack app

● Integrating the frontend and backend ● Building a simple web application with Node.js and Express.js

Module 9: Frontend Development with React ● What is React, and why use it?

● Setting up a React development environment ● Building your first React component

Module 10: State and Props in React

● Understanding state and props ● Managing component state ● Passing data between components

Module 11: Creating a React App with Multiple Components

● Building a multicomponent React application ● Handling user input and forms in React

Module 12: Connecting the frontend to the backend ● Making API requests from React to Node.js

● Displaying data from the backend in your React app

Module 13: Basic styling in React

● Styling React components ● Introduction to CSS-inJS libraries (e.g., styledcomponents)

Module 14: Introduction to Deployment ● The basics of deploying a web application

● Deploying a simple app to a hosting service (e.g., Netlify)

Repository Structure

The repository is organized into separate folders for different module. Some modules are grouped together in a single folder due to their similarity, some have their own dedicated folders, while others didn’t require any code and thus no folder. Each folder contains the associated files and projects. Below is an outline:

Tech4DevSE/
|
├── Backend/
│   ├── My 1st Contact With API/
│   └── Shopping Wishlist API Project/
|
├── BootStrap/
│   ├── loginPortalProject/
│   ├── SkatingSite/
│   └── starterTemplate/
|
├── HTML-CSS-JS/
│   ├── JavaScript/
│   └── Learn CSS/
|
├── LearningGit/
│   ├── LearningGit/
│   ├── LearningGit2/
│   └── LearningGit3/
|
├── React/
│   └── my-1st-react-app/
|
└── SASS/
    ├── 1st-SASS-Website/
    ├── LandingPageStarter/
    ├── SASS-Structure-Example/
    ├── SASS1/
    └── SASSskillz_starter/

⚡ Notes

• Modules 1, 7 and 14 didn’t require file creation, so no folders exist for them.
• Modules 5, 6 and 8 are grouped under the Backend/ folder.
• Module 3 is partly under the BootStrap/ folder.
• Modules 3 and 4 are combined under the HTML-CSS-JS/ folder.
• Module 2 is under the LearningGit/ folder.
• Modules 9, 10, 11, 12, and 13 are in the React/ folder.
• Module 3 is also partly under the SASS/ folder.

Learning Outcomes

Through this program, I:

• Acquired foundational and advanced knowledge in software engineering.
• Gained hands-on experience in web development, API creation, and UI/UX design.
• Built projects like a Shopping Wishlist API, a responsive SkatingSite, and dynamic landing pages.

While I have completed all modules, the issuance of my certification is delayed due to technical issues (at the moment, Tue, 22nd Apr 2025).

Acknowledgements

I extend my gratitude to Tech4Dev and the program instructors for their dedication to empowering African youth through technology. Their guidance has been instrumental in my journey toward becoming a software engineer.

Feel free to explore the repository and provide feedback or suggestions for improvement!