Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

[DevDay2019] Web Development In 2019 - A Practical Guide - By Hoang Nhu Vinh, IT Lecturer at University of Greenwich Vietnam- Danang Campus

78 views

Published on

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.

Published in: Technology
  • Be the first to comment

[DevDay2019] Web Development In 2019 - A Practical Guide - By Hoang Nhu Vinh, IT Lecturer at University of Greenwich Vietnam- Danang Campus

  1. 1. WEB DEVELOPMENT IN 2019 Vinh Hoang
  2. 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. 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
  4. 4. 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
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. VINH HOANG SASS Not mandatory but recommended. It is easy enough to learn the basics • Structured CSS • Variables • Nested CSS • Mixins & Functions • Inheritance 11
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. VINH HOANG CMS CHOOSE ONE Great for freelancers • PHP Based Wordpress, Drupal • JS Based Ghost, Keystone • Python Mezzazine • .NET Piranha, Orchard CMS 15
  13. 13. VINH HOANG HTML / CSS FRAMEWORK CHOOSE ONE • Boostrap • Materialize • Bulma 16
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. VINH HOANG SERVER SIDE LANGUAGE CHOOSE ONE • Node.js • Python • PHP • C# • Go 21
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. VINH HOANG 2019 TRENDS • GraphQL & Apollo • TypeScript • Serveless Architecture AWS, Netlify & Firebase • AI & Machine Learning TensorFlow 27
  25. 25. VINH HOANG 2019 TRENDS • Blockchain Technology Solidity, Mist, Coinbase API • PWA • Web Assembly 28
  26. 26. Q&A VINH HOANG
  27. 27. THANK YOU Vinh Hoang 078 271 4705 nhuvinh.hoang@gmail.com VINH HOANG
  28. 28. VINH HOANG SECTION DIVIDER OPTION 2 Lorem ipsum dolor sit amet, consectetur 33
  29. 29. 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
  30. 30. 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
  31. 31. 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
  32. 32. VINH HOANG CHART OPTIONS Lorem ipsum dolor sit amet, consectetur adipiscing elit. 37
  33. 33. 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
  34. 34. VINH HOANG Lorem ipsum dolor sit amet, consectetur adipiscing elit. 39
  35. 35. THANK YOU April Hansson +1 23 987 6554 april@woodgrovebank.com www.woodgrovebank.com WOODGROV E BANK
  36. 36. VINH HOANG CUSTOMIZE THIS TEMPLATE Template Editing Instructions and Feedback 41
  37. 37. VINH HOANG SECTION DIVIDER OPTION 1 Lorem ipsum dolor sit amet, consectetur 42

×