Guide To Web Development

1. The Roadmap to
Web Development
GOOGLE DSC TEAM
PREPARED BY

2. GOOGLE DSC 2
Contents
PREFACE
From Google DSC to you <3>
VSCODE
How to Download VSCode <4>
SECTION ONE
The Front-End Section <5>
SECTION TWO
The Back-End Section <8>
SECTION THREE
Designing Section <12>

3. Hi, we are Google DCS at King Abdulaziz University and we
want to put this helpful and superb Booklet in your hand.
We recommend to all of you while you are learning from
this amazing Booklet to keep this Circle below in your mind,
where it will aid you in your journey.
In this booklet, you will find the Front-End, Back-End, and
Designing sections. Each one will have the languages that
you are going to learn. Besides, the sources that will help
you. By clicking on the icons that are in front of the tasks a
new page will appear that includes the source you need.
FROM GOOGLE DSC TO YOU
3
Crash
Course
20%
Apply What You
Have Learned
30%
50%
Build Projects
GOOGLE DSC

4. Download Visual
Studio Code
4
FOR MAC OS DEVICES
CLICK ON THE
ICON TO GET
STARTED
FOR WINDOWS 10 DEVICES
GOOGLE DSC

5. 3 DAYS
WATCH A CRASH COURSE
APPLY WHAT YOU LEARNED
BUILD A PROJECT
CLICK ON THE ICON
TO GET STARTED
HTML
6 DAYS
WATCH A CRASH COURSE
APPLY WHAT YOU LEARNED
BUILD A PROJECT
CSS
Front-End Section
5
CLICK ON THE ICON
TO GET STARTED
GOOGLE DSC

6. JavaScript
12 DAYS
6
Front-End Section
CLICK ON THE ICON
TO GET STARTED
WATCH A CRASH COURSE
APPLY WHAT YOU LEARNED
BUILD A PROJECT
GOOGLE DSC

7. For Finishing The
Front-End Section
7
GOOGLE DSC

8. WATCH A CRASH COURSE
APPLY WHAT YOU LEARNED
Node.JS
8
WATCH A CRASH COURSE
APPLY WHAT YOU LEARNED
BUILD A PROJECT
3 DAYS CLICK ON THE ICON
TO GET STARTED
6 DAYS CLICK ON THE ICON
TO GET STARTED
Back-End Section
GOOGLE DSC

9. 9
MongooDB
Mongoose
WATCH A CRASH COURSE
APPLY WHAT YOU LEARNED
3 DAYS CLICK ON THE ICON
TO GET STARTED
1 DAYS CLICK ON THE ICON
TO GET STARTED
WATCH A CRASH COURSE
APPLY WHAT YOU LEARNED
Back-End Section
GOOGLE DSC

10. 10
Heroku
Mongoose
BUILD A PROJECT
WATCH A CRASH COURSE
1 DAYS CLICK ON THE ICON
TO GET STARTED
10 MINUTIES CLICK ON THE ICON
TO GET STARTED
Back-End Section
GOOGLE DSC

11. 11
For Finishing The
Back-End Section
GOOGLE DSC

12. 12
Designing Section
WATCH A CRASH COURSE
BUILD A PROJECT
2 DAYS CLICK ON THE ICON
TO GET STARTED
Adobe XD
GOOGLE DSC

13. 13
For Finishing The
Designing Section
GOOGLE DSC

14. Break a leg
GOOGLE DSC © 2021 14
CLICK ON THE
ICON TO GET
STARTED