Final study project report in view of obtaining

of the higher technician certificate diploma

B
T Design and implementation of a platform
E-learning
S

D
S Created by: Fatima-Ezzahra Houd
Abdelghafour Aouad
I
Framed by:
Mr. Lachhab Youssef

Promotion : 2019 /2021

 Thank you

At the end of this work, we would like to express our

deep appreciation to all the people who have
helped, guided and supported during our two years of Master's degree.

We would like to particularly thank our supervisor, Mr.

Lachhab Youssef, design professor at the BTS center
Hassan II. Their patience and wise advice enabled the
completion of this work. We owe them a lot.
recognition for their availability and rigor.

We also thank our teacher Mrs. Amina

Hmajou, as well as Mrs. Bahija Gouimi for their advice
advised.

To all the teachers who will honor us by contributing

We express our gratitude for the evaluation of this work.

2
 Table of contents
Acknowledgment. 2
Table of contentss .............................................................................. 3
I.Presentation................................................................................. 5
II.Context and general specification......................................... 8
A. Presentation about the subject : ............................................................ . 9
B.Definition of E-learning :........................................................ 9
C. Principe of our project: ....................................................... 11
D. Management project : ........................................................... 12
GANTT chart : ............................................................... 13
PERT diagram:. 14
III.Conceptn.............................................................................. 16
Introduction : ................................................................................. 17
Choice of design methodology: ..................................... 17
Use case diagram.................................................... 18
- Definition ..................................................................................... 18
-The actors .................................................................................... 18
-Diagrams.................................................................................... 19
Class diagram:. 20
- Definition ..................................................................................... 20
Diagram................................................................................... 20
Sequence diagram:.............................................................. 21
- Definition ..................................................................................... 21
Sequence diagram (Log in)...................................... 21

3
 - Sequence diagramSign up) ............................................ 22
IV.Architectural techniques and technologies useds ................... 23
Introduction ................................................................................... 24
Technical study. 24
• Choice of programming languages.................................. 24
• Development tools....................................................... 26
• Development tools....................................................... 28
V.Realization.................................................................................. 29
Introduction : ................................................................................. 30
Architecture : ................................................................................. 30
Graphical interfaces :. 31
Presentation of interfaces: ...................................................... 32
VI.Conclusion................................................................................. 38
List of acronymss .......................................................................... 40
Webography .................................................................................... 41

4
I. Presentation

5
 The COVID-19 pandemic has disrupted our lives. It has deprived many
millions of students to continue their learning, particularly those from
disadvantaged families due to the ever-widening digital divide
and which was revealed by this health crisis.
The use of new technologies is essential to mitigate
the impact of the closure of schools. To this end,
distance learning is presented as an alternative guaranteeing the
educational continuity.
Nevertheless, the success of this teaching method requires the availability of a
appropriate technological equipment and a high-speed internet connection. But
these conditions are not met in all developing countries or
those who are the least developed.
Distance learning (or e-learning) is a way to train and
validate a diploma remotely, that is to say without the need to go to
a school to attend classes. A particularly interesting solution
for people who have activities during the day (employees, stay-at-home mothers...)
are abroad or unable to move.
Specifically, the student receives the lessons at home, which he can then study at any time.
Often the lessons are accompanied by exercises to complete and to
send back for them to be corrected by teachers. More and more
establishments have shifted in recent years from paper to mouse, and
now use digital tools to facilitate learning and
the interaction between student and teacher.

Among the advantages of distance learning:

● More flexibility
Online courses allow you to fit them in wherever you wish in your schedule.
the time. Normally, those who work and want to take courses
In addition to their work, they have difficulty managing their time. The
online training allows them to decide when they are the most
available to study. They can take their courses while traveling by bus,
by car, by train, or by plane. This is obviously not possible in
in-person teaching, which requires a predefined schedule and a fixed location.
But online courses give you the time to manage yourself to learn.
● Adapted to all rhythms
Each learner works at their own pace. In the event that you are
faster than the others, there is no need to wait for them.
The reverse is also true: if you are slower, you can take your time.
time without bothering anyone. The training sessions can also be
customized according to the level of learning.

6
● Practice
Distance learning, unlike face-to-face teaching,
allows for providing training in asynchronous time and place.
Learners no longer need to travel and conform to
schedules. You can train where you want, when you want. All you need is to have a
Wi-Fi connection and a laptop, a tablet, or a
smartphone.
E-learning allows learners who want to stay at home, by
example for family reasons, to make use of their free time to
continue to learn and evolve at a professional level. With
distance learning, there is no need to travel or ask for a
home tutor, the lessons will be characterized by being conducted
online. One can work in a familiar environment that allows for
work easily. Moreover, a considerable time saving is to be expected.

7
II. Context and specification
general

8
A. Presentation of the subject:
The work presented in this thesis is set in this context, our objective
is to design and implement a system that brings together the different
necessary features for an online learning platform and
confront the disadvantages of existing solutions. Our project is composed
of a main part, it is:
Training management: allows the organization of training as well as the
user management (creation of accounts for teachers and the
learners).

B. Definition of E-learning:
Today, there are many terms used to refer to education
basée sur le Web comme l'E-Learning, E-formation, l'enseignement en ligne,
enseignement basé web (web-based learning), apprentissage basé web
(webbased training) …etc.

Currently, the notion of E-Learning encompasses concepts and

technologies that are not fixed, its definition remains quite
approximate. We adopt the definition proposed by the European Council
(2001), who considers that e-learning is: " a set of concepts, of
methods, and tools using new multimedia technologies and
the Internet, to improve the quality of learning by promoting access to
resources and services, as well as exchanges and collaboration
possibly remotely.
E-learning is a mode of learning that leverages the use of
information and communication technologies at all levels of
the training activity. It specifically refers to a system of
training whose main objectives can be defined as
learning autonomy, distance education, individualization of
training path and the development of educational relationships in
line.

The use of the Internet for educational purposes in multiple ways

forms is currently developing in all sectors of education and
particularly in the academic world.
This new mode of teaching offers advantages, including
notably to facilitate distance learning. The term E-learning is
used to refer to the use of the Internet in the context of training.

9
 E-learning was born to allow learners to train.
without having to travel to a training location, and without worrying about the time of
start or end of training since the trainer will not be present
physically.

However, in this new mode of transmission and acquisition of

knowledge, concerning both academic training and
professionals, the direct teacher/learner relationship (face to face) is
replaced by a relationship mediated by a support and a set of
techniques.

Abbreviation of 'electronic learning'; which can be translated by

learning by electronic means. According to the
Definition of the European Commission: E-learning is "the use of
new multimedia and internet technologies to improve quality
from learning by facilitating access to resources and services, thus
that exchanges and remote collaboration.

E-learning defines any training system that uses a network.

local, extended or the internet to broadcast, interact or communicate, which
includes distance education, in a distributed environment, access to
sources by download or online consultation. It can do
intervene in synchronous or asynchronous, tortuous systems,
self-training systems.

E-Learning results from the association of interactive content and

multimedia (sound, text, animation), distribution media (PC, internet,
intranet, extranet), a set of software tools that enable management
of an online training and tools for creating interactive training.
Access to resources is thus considerably broadened as well as the
possibilities of collaboration and interactivity.

10
C. Principle of our project:
The principle consists then in replacing the old methods
time/place/content of learning through learning processes
fast/open/customized.
Here are some points of difference between traditional learning.
in the classes and this new e-learning mode illustrated in Table 1.

Tableau 1 :Comparaison entre le E-Learning et l'apprentissage traditionnel

On a practical level, a bridge platform is used between students.

and teacher, bringing together the necessary tools for the three main types
of users:
The administrator installs and maintains the system.
The teacher can put his courses online, incorporate resources
multimedia teaching tools and monitor activities with its
learners.
The learner accesses the courses online or downloads them, has a view of
the evolution of his work, performs exercises. He can sometimes communicate
with a trainer or other learners through a forum.

11
 Overall, our memory consists of five chapters:
Chapter I: Presentation.
Chapter II: Context and General Specification.
Chapter III: Detailed Analysis and Design.
Chapter IV: Technical architecture and technologies used.
Chapter VI: Project Implementation.

D. Project Management:
Project management is the set of activities
aimed at organizing the smooth running of a project and achieving its objectives.
It involves applying management methods, techniques, and tools.
specific to the different stages
First of all, the task list for our project is as follows:

Table 2: List of tasks

12
 To ensure good management of our project, we use
the following techniques:

GANTT chart:
The Gantt chart, commonly used in project management, is one of the
the most effective tools to visually represent the progress of
different activities (tasks) that make up a project. The left column
The diagram lists all the tasks to be performed, while the line of-
head represents the units of time most suitable for the project (days, weeks,
month etc.). Each task is represented by a horizontal bar, whose
Position and length represent the start date, duration, and end date.
This diagram allows you to see at a glance:
▪ The different tasks to consider
▪ The start date and the end date of each task
▪ The expected duration of each task
▪ The potential overlap of tasks, and the duration of this overlap
▪ The start date and end date of the project as a whole
Here is the GANTT chart of our project:

Diagram 1: GANTT chart

13
PERT diagram:

A PERT diagram is a visual tool forproject managementuseful

to plan the different tasks and define the project timeline.
The PERT method is often confused with the PERT diagram.
the best way to define this last one in detail is therefore to start by
clarify these two terms.
PERT is the acronym forProgram Evaluation Review Technique.It is about
the method used to create a PERT diagram. A diagram of
PERT is the visual diagram that results from the use of the PERT method.
In fact, the PERT method can be seen as the process, and the diagram
of PERT as the result.
PERT diagrams allow project managers to see all the
essential planning details such as task dependencies,
estimated duration of these and the minimum time required for the completion of the
project. However, they are not very user-friendly and are generally poorly
understood.
Here is the PERT diagram of our project:

Diagram 2: PERT diagram

14
The difference between the 2 diagrams:
The Gantt chart is a popular visualization tool for
project schedules. This is a bar chart that also shows
the dependencies between the tasks and the schedule of a project.
Gantt charts are often less technical and easier to
understand because they do not have the same level of detail as the diagrams of
PERT.
For this reason, PERT diagrams are more suitable for estimation.
initial of the project calendar, while the Gantt charts
are better suited to keep the various stakeholders of the project informed

15
III. Conception

16
A. Introduction
Conceptual and organizational modeling constitutes a step
important in the convergence of the notations used in the field of
object design analysis since it represents a synthesis for our
system.

In this chapter we begin with the detailed conceptual model of

our application, then we present the logical model of the data.
Finally, we conclude this chapter with a conclusion.

B. Conceptual modeling
Introduction :
The conceptual data model is a static representation of
information system. Its objective is to create a representation
clear and coherent data manipulated in the information system.
This section will be presented as follows: we start with the choice of
the design methodology and justification. Then we identify the
actors and the use case diagrams, then we present the
class diagram.
Choice of design methodology:
As part of our project, we opted for the UML language.
as a design approach. Below, we present this
language then we justify our choice.

Introduction to UML:
UML (Unified Modeling Language) is a formal language and
normalized in terms of object modeling. Its independence from
to programming languages, to application areas and to
process, its versatility and flexibility have made it a language
universal. Moreover, UML is essentially a support for
communication, which facilitates representation and understanding of
object solution. Its graphical notation allows to express visually a
object solution, which facilitates the comparison and evaluation of solutions.
The aspect of its notation limits ambiguity and misunderstandings.
UML provides a clever way to represent various
projections of the same representation thanks to the views.

17
 The design of our interface was developed following the approach
next:
The development of use case diagrams. This step has been completed.
following the functional specification of the application.
Census of candidate classes and development of the diagram of
classes.

Use case diagram:

Definition
Use case diagrams (UCD) arediagrams
UMLused for a representation of the functional behavior of a
systemsoftware.They are useful for presentations to management.
or actors of a project, but for development, thecase
of useare more appropriate. Indeed, a use case
represents a discrete unit of interaction between a user (human or
machine) and a system. Thus, in a use case diagram, the
users are called actors, and they appear in the cases
of use.

The actors
The teacher, the student, and the administrator are the actors who
interact with our system.
Teacher: conducts training in the training room.
Student: attends a training session in the training room.
Administrator: this is the person responsible for the administration of the site.
teletraining.

18
Diagram

Diagram 3: use case diagram

19
Class diagram:
Definition
The class diagram is a schematic used insoftware engineeringfor
present theclassesand theinterfacessystems as well as their relationships.
Thisdiagramis part of the partstaticof UML,not interested
to the temporal aspects anddynamics.
Aclassdescribe the responsibilities, behavior, and type of a
set of objects. The elements of this set are theinstancesfrom the
class.
Diagram
The class diagram below contains all the information as
that classes, methods, associations, and properties

Diagram 4: class diagram

20
Sequence diagram:
Definition
The sequence diagram allows showing the interactions of objects in
the framework of ascenarioof aUse case diagram.In a concern
for simplification, the main actor is represented on the left of the diagram, and
the potential secondary actors to the right of the system. The goal is to describe
how actions take place between actors or objects.
The vertical dimension of the diagram represents time, allowing for
visualize the sequence of actions over time, and to specify the
birth and death of objects. The periods of activity of objects are
symbolized by rectangles, and these objects communicate using messages.

Sequence diagram (Log in)

Diagram 5: sequence diagram (Log In)

21
 The sequence diagram 'Authentication' presents the
sequencing of interactions between the user, the authentication interface,
the user entity and the profile interface. In this loop diagram (1, n)
indicate that there will be a repetition of the authentication interface display
until the validation of the username and password.

Sequence diagram (Sign up)

Diagram 6: sequence diagram (Register)

The enrollment sequence diagram for the site presents the

sequencing of interactions between the user, the registration interface and
the User entity.

22
 IV. Architecture
technique and technologies
used

23
Introduction
After developing the design of our application, we address
In this chapter, a section aims to present the phase
of technical architecture.
First, we conduct a technical study where we describe the
software resources used in the development of our project. We
let's first present our choice of the work environment, where
we specify the hardware and software environment that we used for
develop our application and then we detail the architecture.

Technical study
The technical study is a phase of design adaptation to
the technical architecture.
Its objective is to functionally describe the solution to be implemented.
detailed manner as well as the description of treatments. This study, which
The detailed study serves as the complement to the IT specification.
necessary to ensure the realization of the future system. This study allows
also to determine:
✓ The computer structure of the database,
✓ The architecture of programs,
✓ The structure of each program and access to data.
For the realization of our application, we used several
material and software resources:
• Choice of programming languages
PHP,whichstandsforHypertextPreprocessor,referstoaprogramminglanguage.

computer science, or a language ofscriptused mainly for the

dynamic website design. This is a language of
programming under a free license that can therefore be used by
anyone completely free of charge.
Created in the early 1990s by Canadian and Greenlandic Rasmus Lerdorf, the
PHP language is often associated with the database serverMySQLand at
Apacheserver.WiththeLinuxoperatingsystem,itisanintegralpartofthesuite.
free softwareLAMP.
On a technical level, PHP is mostly used on the server side. It generates
HTML, CSS or even XHTML code, data (in PNG, JPG,etc.) or even
PDF files. For many years, it has been the subject of development.
specific and enjoys today a good reputation for reliability and
performances.

24
 JavaScript is a programming language used in the
web page development.
This language has the particularity of being activated on the client workstation,
In other words, it is your computer that will receive the code
and who must execute it. This is in contrast to other languages that are
server-side activated. The code execution is carried out by your browser
internet such as Firefox or Internet Explorer.

CSS is the acronym for Cascading Style Sheets, it is a language for

stylesheet used to describe the formatting of a
document written in a markup language. It allows for
designers to control the appearance and layout of their web pages.

HTML is a computer language used on the internet.

Language is used to create web pages. The acronym
HyperText Markup Language, which means in
French 'hypertext markup language'. This meaning is well
its name since this language indeed allows to make of
hypertext based on a markup structure.
It is not strictly speaking a programming language, but
rather a language that allows formatting content.

MySQL (My Structured Query Language - Query Language)

structured) is a database management system
dedicated relational open source. It is very fast, reliable and easy
to use and free. It was originally developed to manage very large
databases much faster than already established solutions. It
offers a wide and rich set of features. Its speed and its
securing it makes it an ideal tool for internet applications

25
MVC The Model-View-Controller is a pattern of 'architecture
softwareintended forgraphical interfaceslaunched in 1978 and very popular
for theweb applications.The pattern is composed of three types of modules.
having three different responsibilities: models, views, and controllers.
• A model contains the data to be displayed.
• A view contains the presentation of the graphical interface.
• A controller contains the logic regarding actions
performed by the user.
This pattern is used by manyframeworksforapplications
websuch que Ruby on RailsGrailsASP.NET
MVCSpring,Struts,Symfony,Apache Tapestry, LaravelorAngularJS.

• Development tools

Visual Studio Code is an extensible code editor developed

by Microsoft for Windows, Linux, and macOS. The
fonctionnalités incluent la prise en charge du débogage, la mise
highlighting syntax, smart code completion, snippets,
the code refactoring and integrated Git.

WampServer (formerly WAMP5) is a platform for

type of Web developmentWAMPallowing to do
function locally (without having to connect to a server)
external) of scriptsPHP.WampServer is not in itself software,
but a environment understanding three servers
(Apache,MySQLandMariaDB)a script interpreter (PHP), thus
whatphpMyAdminfor the web administration of MySQL databases.

StarUML is a modeling softwareUMLwho was 'transferred'

asopen source"by its publisher, at the end of its distribution"
commercial (which is clearly continuing here ...), under a license
modified from GNU GPL.

26
 phpMyAdmin is a web management application for
MySQL and MariaDB database management systems
mainly developed in PHP and distributed under GNU license
GPL

Ajax is a method using different added technologies.

to theweb browsersbetween 1995 and 2005, and whose peculiarity is
to allow making requests toweb server and, in
consequence of partially modifying theweb pagedisplayed on
theclient station without having to display a complete new page.
Thiscomputer architectureallows to construct someWeb applicationsand
ofdynamic websites interactive.Ajax is the acronym for asynchronous
JavaScript and XML

Bootstrap acollection of tools useful for the creation of

design (graphics, animation and interactions with the page in the
browser, etc.) ofsitesand ofweb applications.It is a set
which contains codesHTMLandCSSforms, buttons,
navigation tools and other interactive elements, as well as
extensionsJavaScriptas an option. It is one of the most popular projects on
the development management platformGitHub.

Photoshop is asoftwareofretouchoftreatmentand ofdrawing

computer-assisted,launched in 1990 on MacOS and then in 1992 on
Windows.
Edited byAdobeit is mainly used for treatment
of thedigital photographsbut also serves for creationex
nothingof images.
He mainly works onimages matricielles because the images are
composed of a grid of points calledpixels. The interest of these images is
to reproduce subtle gradations of colors.

27
 JQuery is a frameworkJavascriptunder a free license which allows
to facilitate common features ofJavascript.
The use of this library saves time
development during interaction on the codeHTMLof a web page,
AJAX or event management. JQuery has at the same time
the advantage of being usable on multiple web browsers (see Internet
Explorer, Firefox, Chrome, Safari or Opera.

Gantt Project is a free project management software written

in Java, which allows it to be used on various systems
It allows the editing of a Gantt chart.

Thus other tools such as:

• SweetAlert
• Particles JS
• TypeWriter
• SummerNote (Wysiwyg)
• HtAccess
• FontAwesome

• Development tools
The development of the application is carried out using two computers.
portable devices with the following characteristics:

Characteristic Latitude E5450 HP 250 g7

Brand DELL HP
Processor Intel(R) Core (TM) i5- Intel(R) Core (TM) i5-
53000U CPU @ 2.30 GHz 1035G1 CPU @ 1.00GHz
2.301 GHz 1.19GHz
RAM 16 GO 16GB
Hard disk 500 Go HDD 500 GB HDD + 128 GB SSD
M.2
Operating system Windows 10 Pro (x64) Windows 10 Pro (x64)

Table 3: Materials used

28
V. Realization

29
Introduction:
After completing the analysis and design phase of the application, we will
starting in this chapter the part of realization and implementation in
which ensures that the system is ready to be operated by the
end users.

Architecture:
The architecture of our application is of the client-server type, where a
computer interacts with others on the Internet.
In the realization of our project, we opted for an architecture
MVC in order to ensure maintainability, modularity of
the application and the speed of development.

MVC literally Model View Controller is an architecture that

organize the Human-Machine interface in such a way that the
development can take place in independent layers. It imposes the
separation between data, presentation, and processing, which gives
three fundamental parts in the final application: the data model,
controller and the view.
• Layer Model
Allows to record the data, retrieve them, list them, to
delete, and update them.
• View Layer
The view corresponds to the interface with which the user interacts. Its
The first task is to present the results returned by the model. Its
seconde tâche est de recevoir toutes les actions de l'utilisateur (clic de
mouse, selection of an entry, buttons, etc...). These different events
are sent to the controller, it simply displays the results of the
treatments performed by the model and interact with the user.
• Controller Layer
The controller takes care of event management.
synchronization to update the view or the model and synchronize them.
It receives all user events and triggers the actions to
execute. If an action requires a change of data, the controller
request the modification of the data to the model, and the latter notifies the view
that the data has changed so that it updates.

30
 The following figure represents the MVC architecture of our application.

Diagram 1: MVC Architecture

Graphical interfaces:
The design of the application's interfaces is a very
important since all interactions with the core of the application
passing through these interfaces, we must then guide the user with the
error messages and notifications if needed, as well as presenting a system
complete. In this section, we will present some interfaces of
the application, adhering to ergonomic recommendations of
compatibility, guidance, clarity, uniformity, and flexibility. We
we have chosen the administration as the user since it presents through
these interactions constitute the majority of the main features of
the application.

31
Presentation of interfaces:

Figure 1: home page

32
 This interface presents the homepage of our application, we can it
divide into three parts:
• The 1eracontains the logo of our platform with 2 buttons (Sign Up
and Log in), as well as another button that redirects directly to the
course page,
• The 2thcontains information about our center as well as the
available pathways, with photos of our promotion.
• The 3thpart represents the footer, the last element viewed by
the visitor, it contains a short definition of this project, the location
from our center, as well as the contact information, all this for
leave a good impression on the visitor.

From the homepage, if the visitor is a new user, they have the
possibility to create your account. Simply click on the button
"Sign up" for the registration page to display, and the visitor must
fill in all the form fields to create an account in our
platform.
The figure below presents the interface for signing up a new
learner type user (Teacher accounts are created by
the administrator

Figure 2: registration page

33
 If already registered, a user (trainer or learner) will be able to
connect. Just click on the 'Connect' button and enter your e-
email and its password to log in.
The figure below shows the user login interface of
type learner or teacher:

Figure 3: login page

After verifying the connection information, the user will be

Redirected to the main interface. The image below shows the page.
main.

Figure 4: main page

34
 This page contains the list of all available courses and exercises.
to access the content of a course or an exercise, just click on
the 'Read more' button that directly redirects to a page that contains the
course or well-detailed exercise.
Here is an example of a course page:

Figure 5: detailed course page

Each course can contain several chapters, as shown in the following figure.
illustrate

Figure 6: chapter interface

35
 Figure 7: Navigation bar

The navigation bar is a very important element in our platform,

thanks to her, we can add/modify or delete a lesson/chapter or
a exercise.
The following figure presents what we just explained earlier:

Figure 8: Drop-down menu

Here is an example of a course addition page:

Figure 9: add course page

36
 Let's stay on the navigation bar, as you may have seen.
to the right, there is the user's name and their photo, once you click on the name
a dropdown menu will be displayed. The dropdown menu contains the items
following:

Figure 10: dropdown menu 2

Once clicked on "Log out", the user's session will be closed.

And if we click on 'Edit profile' we are automatically redirected to this
page :

Figure 11: profile editing page

For more details please visit our website.

37
VI.Conclusion

38
 In conclusion, this project allowed us to establish
practice our knowledge acquired during our training at
at the BTS Hassan II center, learn the spirit of work in
group and also to develop our technical skills in
computer science, by creating a website that brings together the different
essential features for a learning platform
line and confront the disadvantages of existing solutions. In
using different programming languages and software for the
succeed, despite all the obstacles and constraints we've experienced.

During the implementation period of our project, we were

attentive to ensure the quality and readability of the source code in order to
to create a high-performance website while trying to make it
as pleasant as possible.

Ultimately, this project is just the beginning for our

career, a new experience for us and an initiation for
to carry out other projects and websites in various fields, in order to
to master computer tools and programming languages
necessary programming.

And for the second time, we want to express our heartfelt

thanks and our deep gratitude to Mr. Lachhab Youssef
who closely contributed to the success of this work.

39
 List of acronyms

BTS Higher Technician Certificate

GANT Generalized Activity Normalization Time Table
PERT Program Evaluation and Review Technology
UML Unified Modeling Language
UCD Use Case Diagram

PHP Hypertext Preprocessor

JS JavaScript
CSS Cascading Style Sheets
HTML Hypertext Markup Language
SQL Structured Query Language
MVC Model View Controller
WAMP Windows, Apache, MySQL, Perl

40
 Webography

SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-

ARIA) replacement for JavaScript's popup boxes

particles.js - A lightweight JavaScript library for creating particles

vincentgarreau.com

Typewriter JS - A simple yet powerful native javascript plugin for a cool

typewriter effect. (safi.me.uk)

Summernote - Super Simple WYSIWYG editor

KaTeX– The fastest math typesetting library for the web

Bootstrap · The most popular HTML, CSS, and JS library in the world.
(getbootstrap.com)

Font Awesome

jQuery

Google Fonts

CodePen: Online Code Editor and Front End Web Developer Community

Stack Overflow - Where Developers Learn, Share, & Build Careers

OpenClassrooms

Online courses - Learn what you want, at your own pace | Udemy

PHP: Documentation

41