This is the step-by-step guide to becoming a web developer in 2019. We will look at nearly all aspects of web technology including the necessities as well as some of the new trends for 2019.

1. WEB DEVELOPMENT
IN 2019
Vinh Hoang

2. VINH
HOANG
ABOUT VINH HOANG
• Electronic Engineer eSilicon, 2013 - 2014
• IT Trainer / Training Manager PNV, 2014 -
2017
• Training Manager Sioux High Tech Software
2017 - 2018
• IT Lecturer University of Greenwich, 2018 -
Present
• Training Consultant 2018 - Present
2

3. VINH
HOANG
ABOUT VINH HOANG
• Classic Rock Pink Floyd, Led Zeppelin, The
Beatles
• Martial Art Aikido
• Music Instrument Piano, Guitar
• Favorite Films The Godfather
3

7. VINH
HOANG
BASIC SOFTWARE & TOOLS
7
• Text Editor or IDE VSCode, Sublime Text,
Atom
• Web Browser Chrome, Firefox
• Design & Mockup XD, Photoshop, Sketch,
Figma
• 3rd
Party Terminal Git Bash, iTerm2

8. VINH
HOANG
HTML & CSS
Always the very first thing to learn
What To Learn
• HTML5 Elements
• Basic CSS (Positioning, box model, etc)
• Flexbox & CSS Grid
• CSS Variables (Custom Properties)
• Browser Dev Tools
8

9. VINH
HOANG
RESPONSIVE LAYOUT
Responsive Layouts are no longer a luxury, they are a necessity
• Set viewport
• Fluid widths
• Media queries
• rem over px
• Mobile first
9

10. VINH
HOANG
BASIC DEPLOYMENT
Learn to deploy a static website
• Register a domain name Namecheap,
Google Domains
• Shared hosting or VPS Inmotion, Hosgator,
Bluehost
• FTP, SFTP File Upload Filezilla, Cyberduck
• Static Hosting Netlify, Github Pages
10

11. VINH
HOANG
SASS
Not mandatory but recommended. It is easy enough to learn the basics
• Structured CSS
• Variables
• Nested CSS
• Mixins & Functions
• Inheritance
11

12. VINH
HOANG
VANILLA JAVASCRIPT
Start learning JavaScript without any library or framework
• Data Types, functions, conditionals,
loops, operators
• DOM & Events
• JSON
• Fetch API
• ES6+
12

13. VINH
HOANG
FRONT-END WEB NEWBIE
• Build static websites (Small business,
informational)
• Build UI layouts (Take a design and create the
html.css)
• Add dynamic functionality (modals,
slideshows, etc)
• Deploy and maintain websites
It is possible to find an entry level job
13

14. VINH
HOANG
WHAT TO LEARN NEXT
What to do next depends on what you want to do. You have a few choices
• HTML / CSS Framework
• Git & Tooling
• Front End JS Framework
• Server Side Language & Database
14

15. VINH
HOANG
CMS CHOOSE ONE
Great for freelancers
• PHP Based Wordpress, Drupal
• JS Based Ghost, Keystone
• Python Mezzazine
• .NET Piranha, Orchard CMS
15

16. VINH
HOANG
HTML / CSS FRAMEWORK
CHOOSE ONE
• Boostrap
• Materialize
• Bulma
16

17. VINH
HOANG
GIT & TOOLING
Here are some other tooling suggestions
• Basic Command Line Must have
• Git Version Control
• NPM or Yarn Installing packages
• Webpack or Parcel module bundling
• Editor Extensions ESLint, Prettier, Live
Server, etc.
17

18. VINH
HOANG
FRONT-END FRAMEWORK
CHOOSE ONE
It is becoming a necessity to learn a JS front-end framework
• React – Most popular in the industry
• Vue – Easy to use and really gaining
traction
• Angular – Fading A Bit – Used in
enterprise
18

19. VINH
HOANG
STATE MANAGEMENT
For larger apps with a framework, you may need to learn methods to
manage app-level state
• Redux, Context API
• Apollo (GraphQL Client)
• VueX
• NgRx
19

20. VINH
HOANG
FRONT-END WEB WARRIOR
• Build front-end applications
• Smooth & steady front-end workflow
• Work well with teams & familiar with Git
• Connect to backend APIs & work with
data
You should be able to get a front-end job
or work for yourself
20

21. VINH
HOANG
SERVER SIDE LANGUAGE
CHOOSE ONE
• Node.js
• Python
• PHP
• C#
• Go
21

22. VINH
HOANG
SERVER SIDE FRAMEWORK
CHOOSE ONE
Do not reinvent the wheel. Learn a framework to build better and faster
• Node.js Express, Koa, Adonis
• Python Django, Flask
• PHP Lavarel, Symfony
• C# ASP.NET.
22

23. VINH
HOANG
DATABASE CHOOSE ONE OR TWO
Most applications will use some kind of database.
• Relational Database MySQL, MS SQL,
PostgreSQL
• NoSQL MongoDB, Couchbase
• Cloud Firebase, AWS, Azure DocumentDB
• Lightweight SQLite, NeDB, Redis
23

24. VINH
HOANG
DEVOPS, DEPLOYMENT & MORE
Setting up environments, testing & deployment
• Deployment Linux, SSH, Git, Nginx, Apache
• Platforms AWS, Heroku, Azure
• Virtualization Docker, Vagrant
• Testing Unit, Integration, Functional, System
24

25. VINH
HOANG
FULL STACK SUPERMAN
• Setup full stack dev environments &
workflows
• Build back-end APIs & microservices
• Work with databases
• Construct full-stack apps
• Deploy to the cloud
25

26. VINH
HOANG
MOBILE DEVELOPMENT
CHOOSE ONE
There are some frameworks that allow us to create native apps with web
technologies
• React Native
• NativeScript
• Ionic
• Flutter
• Xamarin
26

27. VINH
HOANG
2019 TRENDS
• GraphQL & Apollo
• TypeScript
• Serveless Architecture AWS, Netlify &
Firebase
• AI & Machine Learning TensorFlow
27

28. VINH
HOANG
2019 TRENDS
• Blockchain Technology Solidity, Mist,
Coinbase API
• PWA
• Web Assembly
28

31. Q&A
VINH
HOANG

32. THANK YOU
Vinh Hoang 078 271 4705
nhuvinh.hoang@gmail.com
VINH
HOANG

33. VINH
HOANG
SECTION
DIVIDER
OPTION 2
Lorem ipsum
dolor sit amet,
consectetur
33

34. VINH
HOANG
ABOUT US
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Etiam
aliquet eu mi quis lacinia. Ut
fermentum a magna ut.
Lorem ipsum dolor sit
amet, consectetur
adipiscing elit.
• Ut fermentum a magna ut eleifend.
• Integer convallis suscipit ante eu
varius.
• Morbi a purus dolor.
34

35. VINH
HOANG
OUR PROMISE
Lorem ipsum dolor sit amet.
• Ut fermentum a magna ut eleifend.
Integer convallis suscipit ante eu varius.
• Suspendisse sit amet ipsum finibus justo
viverra blandit.
• Ut congue quis tortor eget sodales.
35

36. VINH
HOANG
COMPARISON
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Company Name
• Nulla a erat eget nunc hendrerit
ultrices eu nec nulla. Donec
viverra leo aliquet, auctor quam
id, convallis orci.
• Sed in molestie est. Cras ornare
turpis at ligula posuere, sit amet
accumsan neque lobortis.
• Maecenas mattis risus ligula, sed
ullamcorper nunc efficitur sed.
Competitive Service
• Praesent venenatis quam tortor,
viverra nunc rutrum.
• Maecenas malesuada ultricies
sapien sit amet pharetra.
• Nunc tempus, risus sodales
sodales hendrerit, arcu dolor
commodo libero, a sollicitudin
quam nulla quis lectus. In at porta
mauris.
36

37. VINH
HOANG
CHART OPTIONS
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
37

38. VINH
HOANG
TABLE
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vendors Users Consultant
s
Ad Buyers Gross
Revenue
Company
Revenue
20YY 0 0 2 0 $0 $0
20YY 10 100 50 10 $6,750 $1,013
20YY 50 500 60 500 $33,750 $5,063
20YY 200 2000 100 5000 $135,000 $20,250
20YY 400 4000 120 50000 $270,000 $40,500
38

39. VINH
HOANG
Lorem ipsum
dolor sit amet,
consectetur
adipiscing elit.
39

40. THANK YOU
April Hansson +1 23 987 6554
april@woodgrovebank.com
www.woodgrovebank.com
WOODGROV
E BANK

41. VINH
HOANG
CUSTOMIZE THIS TEMPLATE
Template Editing
Instructions and
Feedback
41

42. VINH
HOANG
SECTION
DIVIDER
OPTION 1
Lorem ipsum
dolor sit amet,
consectetur
42