Full IT Stack Training

25.12.2021
─

Younes Henni

Oran, Algeria
1

Overview
This training program aims to help the trainee acquire web development skills and become
ready to take on real web development projects.

Goals
At the end of this training curriculum, the trainee would acquire all the knowledge and skills
necessary to create any website or application that they want.
This training covers all the hard skills required during the development and deployment
process of an application.
2

Overview 1

Goals 1

The main domains 3

Front-end 3
Markup 3
Stylesheets 3
Logic 3
Tools 3
Back-end 3
Back-end web development represents the server, a centralized software that
controls and organizes users’ access to resources 3
Tools 3
Database 4
Tools 4
System Administration 4
Tools 4
APIs 4
Tools 4
Software Engineering 4
Mobile Development 5
Cybersecurity 5
DevOps 5
Tools 5

Specifications 5

Milestones 7
Technology: Is it food? 7
Your website in hours: WordPress 8
It’s instructive and beautiful: HTML and CSS 9
I can do anything I want: JavaScript 10
He who never sleeps: Backend 11
Talking Machines: RESTful APIs and WebSockets 11
A magical page: Single-Page Applications 12
Once you say it you can’t take it back: Teamwork and Version Management 12
An organized Desktop: Relational Databases 13
Chaos Masters: Non-Relational Databases 14
Clean up your room: Writing clean, documented, and organized code 14
3

A single node in a big ocean: The Operating System 14

Let the world see you: Deploying your application on the internet 15
It works everywhere! Progressive Web Applications 15
Thou shall not pass: Web Application Security 15
It’s on your phone! Mobile Development 16
I’m always watching: Monitoring 16

The main domains

Front-end
Front-end web development represents everything that gets executed in the client (The
web browser), it involves three parts:

Markup
The content, written using HyperText Markup Language (HTML)

Stylesheets
The design, specified using Cascading StyleSheets (CSS)

Logic
The functionalities, interactivity, and life that is found in a website, it is coded using
JavaScript

Tools
● HTML
● CSS
● JavaScript
● React.js
● Material-UI

Back-end
Back-end web development represents the server, a centralized software that controls and
organizes users’ access to resources
Tools
4

● JavaScript
● Node.js
● Express.js

Database
The Database is software in which all the data related to the website is stored, it ensures
data remains coherent and non-repetitive. A well-organized database is mandatory for any
application to keep functioning properly as it scales

Tools
● MySQL
● MongoDB

System Administration
Once we have all of this software configured, we need to put our website on the internet.
And that is done by deploying this written software in a server that’s accessible online.
System Administration is about installing and setting up the server so that it hosts our
website

Tools
● Linux
● NGINX
● Docker
● Ansible
● JavaScript

APIs
Different software need to communicate with each other, and that happens through
Application Programming Interfaces, they are a set of conventions for making applications
communicate through different protocols

Tools
● HTTP
● WebSocket

Software Engineering
5

We know how to create software, but what is more important is creating software that is
scalable, reliable, and efficient in an efficient, fast, and mostly automatic way. It is
also, about knowing how to set up your software’s architecture in order for it to scale more
efficiently.

Mobile Development
Just like web applications, mobile applications are well-demanded, so it is important for a
web developer to know how to make these. Mobile development is quite similar to
front-end web development, as mobile applications get executed in the client’s device

Cybersecurity
If we just code our web applications like that, they will be prone to certain vulnerabilities.
Thereby we need to know the different risks that threaten our apps in order for us to
prevent them.

DevOps
During development, there are lots of repetitive tasks that really just slow down the
software development process. DevOps is about setting up a development and IT
operations pipeline that shortens the systems’ development lifecycle

Tools
● Docker/Podman
● Ansible
● Shell
● Git/GitHub

Web Optimization

Specifications

1. Introduction to the whole IT Stack (From semiconductors to Cloud Computing and

Artificial Intelligence)
6

2. Creating simple websites using Weebly and WordPress

3. Introduction to Markup: HTML and CSS

4. Code organization with HTML and CSS
5. Adding life to your website: JavaScript

6. Programming basics with JavaScript

7. ES6 and beyond: OOP and Functional programming

8. Backend: Creating a server with Node.js

9. MongoDB
10. Sessions, log in and security concepts
11. Connecting your backend to your database

12. APIs: The HTTP Protocol and REST

13. Web Sockets with Socket.io
14. Securing your APIs: JWT and HTTPS
15. Dynamic type-checking in API endpoints

16. React.js
17. Server-side rendering with Next.js
18. Creating Components, documenting and publishing them

19. Version management and issue tracking with Git and GitHub
20. Teamworking in GitHub

21. Relational Databases: MySQL

22. NoSQL
7

23. Code organization and the MVC model

24. Writing clean and beautiful code with ESLint, Prettier, and TypeScript
25. Documenting your APIs
26. Documenting your React components
27. Documenting your code
28. Testing your code

29. Deploying your application

30. Securing your deployment
31. Optimizing your deployment
32. Containers
33. Deployment automation

34. Progressive Web Applications: Service Worker

35. Workbox

36. Web Application security

37. Creating Mobile Applications with React Native

38. Developing React Native modules with Java

Milestones

I. Technology: Is it food?
The participant should have a general view of all the IT stack and what are the
different roles within it. What each person is responsible for and how these
different roles interact with and relate to each other.

Course Content
● The different fields:
○ Electronics
8

○ Logical Circuits
○ Integrated circuits
○ Assembly
○ Operating System
○ IoT
○ Front-end Web
○ Back-end Web
○ Database
○ System
○ Network
○ DevOps
○ Cloud Computing
○ Data Analysis
○ Cybersecurity
○ Artificial Intelligence
○ Data Analysis
○ User Interface and User Experience
● What is the Web
● How the web works
○ Client-Server
○ HTTP Protocol
○ Client Languages
○ Server Languages
○ APIs
○ Frameworks
○ Databases
○ System Administration
○ Mobile Development
○ IP Addressing
○ DNS

Duration
3 hours in one session

II. Your website in hours: WordPress

The participant should learn how to create simple websites using WordPress,
without doing any programming.

Assessments
● Blogs
9

● E-Commerce
● Portfolio
● Online communities (Forums)
● Wiki
● Magazine
● Multisite networks

Duration
10 Hours - 4 sessions

III. It’s instructive and beautiful: HTML and CSS

The participant should be able to create static web pages using HTML and CSS.
And add some basic interactivity to them using JavaScript.

Course content
● Developer’s toolset
○ Computer: Windows, Linux, or macOS
○ Text Editor: VSCode
○ Web Browser: Microsoft Edge / Google Chrome
○ Graphics Editor
■ GIMP
■ Figma
○ Version Control: Git and GitHub
○ Server Communication: SSH and SSH-keygen
○ Development Server: Node.js, Yarn, Serve
● Defining your website
○ What is your website about?
○ What information are you presenting?
○ What does your website look like?
○ Sketching your website
○ Choosing your assets
■ Text
■ Theme color
■ Images
■ Fonts
● HTML Basics
○ Document structure
○ Paragraph and Headers
○ Nesting elements
○ Images - Empty Element
10

○ Lists
○ Links (Anchors)
● CSS Basics
○ Inline styles
○ Adding CSS
○ Putting CSS in a separate file
○ CSS Anatomy
○ Selecting multiple elements
○ Fonts and text
○ Element inspector
○ Boxes: Margin and Padding
○ Inheritance
○ Flexbox
○ Grids
○ Responsive Design
● Javascript
○ Alert
○ Prompt
○ Accessing an element
○ Deleting an element
○ Listening for the click event on a button

Assessments
● Letter - HTML Only
● Portfolio
● Data Table
● Form
● Business Landing page

Duration
10 Hours - 4 sessions

IV. I can do anything I want: JavaScript

The participant should be able to do programming with modern JavaScript. They
would thereby acquire the ability to solve any logical problem using JavaScript and
appropriately manipulate the different data structures.

Course content
● Data types
● Variables
11

● Operations
● Conditions
● Loops
● Functions
● Document Object Model (DOM)
● Object-Oriented Programming
● Events
● Recursive functions
● Asynchronous programming: Async/Await, Promises, Fetch / Axios
● MAP, FILTER, REDUCE, EVERY, SOME, FIND,
● Higher order functions
● Node.js
● Writing and reading files
● JSON

Assessments
● Guess the number game
● Map, Filter, Reduce exercise
● Fetching list of resources asynchronously
● Configurable document template
● Markdown document merger

Duration
20 Hours - 10 sessions

V. He who never sleeps: Backend

The participant should be able to store user data and do basic Backend tasks using
Node.js: Sessions, Log in and Register, and storing data in your database.

Course Content
● Introducing the Backend, Node.js, and packages
● Installing Node.js and yarn
● Package.json and dependencies
● Express.js
● Logging
● Templating with EJS
● Sessions
● Log in and Register
● Redirection
● Prepared Template to work with
12

● Monolithic vs Microservices architecture

● Representational State Transfer (REST)
● Fetch API
● Using JSON as a data exchange format
● The HTTP Protocol in details
● JSON Web Tokens
● Login and Registration security (HASH + Salt)
● HTTPS
● WebSockets for real-time communication
● Dynamic type-checking with Zod

Assignment
● Add values to a table
● File Server
● Single bank account management CRUD API with Login and Registration
backend
● Realtime chat app

Duration
48 hours - 16 sessions

VI. A magical page: Single-Page Applications

The participant should be able to create Single Page Applications and make them
interact with a server using APIs
● Single Page Applications
● React.js
● React without JSX
● JSX
● Function components
● Components, props, and state
● Lifecycle
● Events
● Conditional rendering
● Lists and keys
● Children
● Lifting state up
● Hooks: useState, useEffect
● Flux architecture: useContext and useReducer
13

● Fetching data from server using fetch API

● Advanced hooks: useRef, useCallback, useMemo
● Server-side rendering with Next.js
● Re-usable components: Planning, creating, documenting, and publishing.
Assignments:
● To-Do list
● Advanced Data Table component
● Server-side data table

Duration
16 hours - 5 sessions

VII. Once you say it you can’t take it back: Teamwork and Version Management
The participant should be able to use Git and GitHub for personal and team
projects. And be aware of the best practices when it comes to version management
● Kanban
● Scrum
● Version Management
● Git
○ Commits
○ Branches
○ Repositories
○ Submodules
● GitHub
○ Repositories
○ Issues
○ Milestones
○ Projects: Kanban
○ Pull Requests
Assignments
● Working on a small document as a team, exploring the different problems
encountered while working as a team

Duration
2 Hours - one session

VIII. An organized Desktop: Relational Databases

14

The participant should be able to do data modeling, in addition to setting up a

database, querying, optimizing queries, doing basic CRUD operations on the database
Course Content:
● MySQL
● Data Types
● Tables
● Modifying tables
● Inserting, Updating, and deleting data
● Querying
○ Join
○ Group by
○ Subrequests
○ Union
○ Scalar and Aggregation functions
● Indexes
● Primary and foreign keys
● Date and Time
● Advanced SQL
○ Transactions
○ Locks
○ Prepared Statements
○ Stored Procedures
○ Error management
○ Cursors
○ Triggers
○ Views
○ Temporary Tables
○ User Management
Assignments
● Bank account management CRUD API with Login and Registration backend -
Database modeling - Multi-account, multi-user

Duration
20 Hours - 8 sessions

IX. Chaos Masters: Non-Relational Databases

The participant should be able to understand the different concepts behind NoSQL,
the drawbacks and limitations of SQL. In addition to familiarity with different NoSQL
15

databases, notably MongoDB. They should also be able to know which database is most
suitable for a specific use case.
Course Content:
● SQL Limitations
● Key-Value based Databases
● Column-based Databases
● Document-based Databases
● Graph-based Databases
Assignments:
● Real-time storing and retrieving heterogeneous data

Duration
12 Hours - 4 sessions

X. Clean up your room: Writing clean, documented, and organized code

The participant should acquire the ability to write clean, maintainable, readable, and
organized code and to document it. Making him able to contribute to the Open Source
community
Course Content
● Prettier
● ESLint and conventions
● Organizing code via imports
● Using classes when they are convenient
● Automating repetitive tasks using Gulp
● Type checking with TypeScript
Assignments
● Organizing an existing project

Duration
2 Hours - one session

XI. It’s crazy fast! Performance optimization

Web optimization
Lodash

XII. A single node in a big ocean: The Operating System

16

The participant should be able to make efficient use of the Linux shell, manage files
and permissions, packages, users, and storage
Course Content
● Installing Linux
● Command Line basics
● Files and Permissions
● Package Management
● Shells and Processes
● Virtualization and Containers
● Docker Compose

Duration
30 Hours - 15 sessions

XIII. Let the world see you: Deploying your application on the internet
The participant will learn how to deploy his website on a server so that it is
accessible from anywhere
Course Content
● DNS
● Firewall
● NGINX reverse proxy

Duration
4 Hours - 2 sessions

XIV. It works everywhere! Progressive Web Applications

The participant should be able to create and manage a Service Worker to set up a
Progressive Web Application
● Asset caching
● IndexedDB
● Proxying requests
● Caching strategies
● Push and Notifications API
● Background loading
● Application manifest
Assignments
17

● Making one of our previous websites work offline

Duration
4 Hours - two sessions

XV. Thou shall not pass: Web Application Security

Participants should be able to secure their applications, audit them for
vulnerabilities and fix them.
Course Content
●
● Application Security
○ SQL Injection attacks
○ XSS Attacks
○ CSRF Attacks
○ Request Forgery Attacks
● Securing your Login
○ Hashing passwords
○ Salt and Pepper
○ Using Asymmetric Keys for authentications
○ Using JWT
Assignments
● Securing a web Application (Applying all previously mentioned principles)

Duration
16 Hours - 6 sessions

XVI. It’s on your phone! Mobile Development

Participants should be able to create mobile applications using React Native
Course Content
● Setting up React Native
● Basic components
● Creating Native Modules using Java

Duration
8 Hours - 4 sessions
18

XVII. A secure Crypt: Server Security

Course Content
● System Security
○ SELinux
○ Firewall
○ Using a different user from the root
○ Managing permissions
● Securing your source code
○ GitHub Deploy keys
○ GitHub SSH Keys
○ Signing your commits

XVIII. I’m always watching: Monitoring

Participants should know how to create monitoring solutions for constantly
watching their servers’ performance, obtaining performance analytics and alerts
when something goes wrong
Course Content
● ElasticSearch
● Kibana
● Beats
● Logstash

Duration
4 Hours - 2 sessions

XIX. Let’s get rid of the boring stuff: DevOps

Participants should know how to automate repetitive tasks, from the usual
copy-paste during development to the deployment of nodes and services on the
network
Course Content
● Gulp.js
● GitHub Actions
● GitHub Webhooks
● Ansible
● Containers
○ Docker
19

○ Podman
● Orchestrating containers
○ Docker Swarm
○ Kubernetes

Duration
20 Hours - 10 sessions