web development in 2024 - website development
Download as PPTX, PDF0 likes174 views
This document provides a guide to web development technologies and options for 2018. It recommends first learning HTML and CSS before moving to JavaScript, then choosing a front-end framework like React or Angular. It also suggests learning a back-end language like Node.js or Python along with a database like MongoDB or MySQL. Finally, it recommends focusing on full stack development and gaining experience with technologies commonly used by employers.
![2
Before We Start…
This is a guide to web development technologies and your options
Based on both fact and opinion
Look other places for guidance, not just this video
Decide what type of developer you want to be before anything
[Full stack developer, front-end, web designer, back-end engineer &
API creation]
Traversymedia.com](https://image.slidesharecdn.com/webdevelopmentin2018-180131161612-240415011400-e9d74195/85/web-development-in-2024-website-development-2-320.jpg)
![5
Basic Vanilla JavaScript
Basic JS [NO FRAMEWORKS!]
Data types, functions, conditionals, loops, operators, etc
DOM manipulation & events [NO JQUERY!]
Ajax / Fetch API / JSON
ES2015+ (Arrow functions, promises, template strings)
Traversymedia.com](https://image.slidesharecdn.com/webdevelopmentin2018-180131161612-240415011400-e9d74195/85/web-development-in-2024-website-development-5-320.jpg)
![6
Deploying a Basic Website
Shared hosting [InMotion, Hostgator, etc]
Learn the basics of cPanel [Creating email accounts, FTP,
etc]
Upload a site with FTP [FileZilla]
Register a domain name and learn about DNS / Name
Servers
Traversymedia.com](https://image.slidesharecdn.com/webdevelopmentin2018-180131161612-240415011400-e9d74195/85/web-development-in-2024-website-development-6-320.jpg)
![8
Where To Next? [Depends]
HTML / CSS Frameworks
Frontend JavaScript Framework
Server Side Language / Technology
Database
Bootstrap, Materialize, etc
React, Angular, etc
Node.js, Python, etc
MongoDB, MySQL, etc
Traversymedia.com](https://image.slidesharecdn.com/webdevelopmentin2018-180131161612-240415011400-e9d74195/85/web-development-in-2024-website-development-8-320.jpg)
![9
HTML / CSS Frameworks [Choose One]
Twitter Bootstrap 4
Materialize CSS
Bulma
Zurb Foundation
Skeleton
General framework, most popular
Primarily a UI/UX framework
Easy to learn syntax, No JS
Alternative to Bootstrap
VERY light boilerplate
Traversymedia.com](https://image.slidesharecdn.com/webdevelopmentin2018-180131161612-240415011400-e9d74195/85/web-development-in-2024-website-development-9-320.jpg)
![10
Front End JS Framework [Choose One]
React
Angular
Vue.js
Aurelia
Popular for startups, fast, Redux, JSX
Popular in enterprise, full featured, NgRx
Fast, light, easy to use, Vuex
Light, feels like vanilla JavaScript
Traversymedia.com](https://image.slidesharecdn.com/webdevelopmentin2018-180131161612-240415011400-e9d74195/85/web-development-in-2024-website-development-10-320.jpg)
![12
Server Side Technology [Choose One]
Node.js
Python
PHP
Ruby
C# & ASP.NET
Fast, scalable and powerful
Popular, rapid development, great integration
Practical, easy to deploy – Wordpress & Laravel
Rapid development, strong community
Very powerful, Microsoft
Traversymedia.com](https://image.slidesharecdn.com/webdevelopmentin2018-180131161612-240415011400-e9d74195/85/web-development-in-2024-website-development-12-320.jpg)
![13
Database [Choose One]
MongoDB
MySQL
PostgreSQL
SQL Server
Oracle
Firebase
NoSQL, non-relational, suggested for Node.js
Popular relational database
Powerful but a bit more difficult than MySQL
Microsoft’s implementation of SQL
Heavily used in enterprise
Cloud database maintained by Google
Traversymedia.com](https://image.slidesharecdn.com/webdevelopmentin2018-180131161612-240415011400-e9d74195/85/web-development-in-2024-website-development-13-320.jpg)
![14
Server Side Frameworks [Choose One]
JavaScript
Python
PHP
Ruby
C#
Express, Hapi.js, Adonis, Loopback, Swagger
Django, Flask, Web2py, Pylons
Laravel, Symfony, CodeIgniter, Yii2
Ruby on Rails, Sinatra, Nitro
.NET
Traversymedia.com](https://image.slidesharecdn.com/webdevelopmentin2018-180131161612-240415011400-e9d74195/85/web-development-in-2024-website-development-14-320.jpg)
![15
Content Management Systems
Wordpress, Drupal, Joomla [PHP]
Great for clients
Thousands of plugins / addons
Fast development
Can be limiting
Traversymedia.com](https://image.slidesharecdn.com/webdevelopmentin2018-180131161612-240415011400-e9d74195/85/web-development-in-2024-website-development-15-320.jpg)
![17
Mobile Applications [Choose One]
React Native
NativeScript
Ionic
PhoneGap / Cordova
Xamarin
Traversymedia.com](https://image.slidesharecdn.com/webdevelopmentin2018-180131161612-240415011400-e9d74195/85/web-development-in-2024-website-development-17-320.jpg)
![18
You Are a Full Stack Developer!
Create simple to advanced web applications [Front & Back end]
Create secure RESTAPIs
Deploy & maintain applications
Administer databases
• You should now be able to get a very good job or run your own business
Traversymedia.com](https://image.slidesharecdn.com/webdevelopmentin2018-180131161612-240415011400-e9d74195/85/web-development-in-2024-website-development-18-320.jpg)
![19
Biggest Changes From Last Year
New technologies [Grid CSS, Fetch API, Materialize, NativeScript]
More focus on full stack and REST APIS rather than server rendered
views
More focus on vanilla JavaScript in addition to frameworks
Single Page Applications
Python & C# over PHP
Traversymedia.com](https://image.slidesharecdn.com/webdevelopmentin2018-180131161612-240415011400-e9d74195/85/web-development-in-2024-website-development-19-320.jpg)
web development in 2024 - website development
- 1. 1 Web Development In 2018 A Practical Guide Traversymedia.com
- 2. 2 Before We Start… This is a guide to web development technologies and your options Based on both fact and opinion Look other places for guidance, not just this video Decide what type of developer you want to be before anything [Full stack developer, front-end, web designer, back-end engineer & API creation] Traversymedia.com
- 3. 3 Tools & Software Text Editor Good Browser Image Editing Deployment Tools Cloud Storage Optional VSCode, Atom, Sublime Text Chrome or Firefox Photoshop, GIMP, etc FTP client, SSH tool Dropbox, Google Drive, etc Traversymedia.com
- 4. 4 HTML / CSS Learn before ANYTHING else Building blocks of the web Every website uses both Easy & quick to learn Learn the core fundamentals & basics of Flex and/or Grid Responsive layouts are VERY important Traversymedia.com
- 5. 5 Basic Vanilla JavaScript Basic JS [NO FRAMEWORKS!] Data types, functions, conditionals, loops, operators, etc DOM manipulation & events [NO JQUERY!] Ajax / Fetch API / JSON ES2015+ (Arrow functions, promises, template strings) Traversymedia.com
- 6. 6 Deploying a Basic Website Shared hosting [InMotion, Hostgator, etc] Learn the basics of cPanel [Creating email accounts, FTP, etc] Upload a site with FTP [FileZilla] Register a domain name and learn about DNS / Name Servers Traversymedia.com
- 7. 7 Web Designer / Basic Front End Dev Build simple websites & UIs PSD / AI -> HTML / CSS Some dynamic UI with JavaScript Choose to be a freelancer or a very entry level position Traversymedia.com
- 8. 8 Where To Next? [Depends] HTML / CSS Frameworks Frontend JavaScript Framework Server Side Language / Technology Database Bootstrap, Materialize, etc React, Angular, etc Node.js, Python, etc MongoDB, MySQL, etc Traversymedia.com
- 9. 9 HTML / CSS Frameworks [Choose One] Twitter Bootstrap 4 Materialize CSS Bulma Zurb Foundation Skeleton General framework, most popular Primarily a UI/UX framework Easy to learn syntax, No JS Alternative to Bootstrap VERY light boilerplate Traversymedia.com
- 10. 10 Front End JS Framework [Choose One] React Angular Vue.js Aurelia Popular for startups, fast, Redux, JSX Popular in enterprise, full featured, NgRx Fast, light, easy to use, Vuex Light, feels like vanilla JavaScript Traversymedia.com
- 11. 11 Side Technologies You Should Learn GIT Basic Command Line APIS / REST HTTP / SSL CSS Pre-Processor Webpack & Babel Version control Folder navigation, file creation, etc Learn how REST APIs work HTTP requests, HTTPS Sass or Less Module loader & JS compiler Traversymedia.com
- 12. 12 Server Side Technology [Choose One] Node.js Python PHP Ruby C# & ASP.NET Fast, scalable and powerful Popular, rapid development, great integration Practical, easy to deploy – Wordpress & Laravel Rapid development, strong community Very powerful, Microsoft Traversymedia.com
- 13. 13 Database [Choose One] MongoDB MySQL PostgreSQL SQL Server Oracle Firebase NoSQL, non-relational, suggested for Node.js Popular relational database Powerful but a bit more difficult than MySQL Microsoft’s implementation of SQL Heavily used in enterprise Cloud database maintained by Google Traversymedia.com
- 14. 14 Server Side Frameworks [Choose One] JavaScript Python PHP Ruby C# Express, Hapi.js, Adonis, Loopback, Swagger Django, Flask, Web2py, Pylons Laravel, Symfony, CodeIgniter, Yii2 Ruby on Rails, Sinatra, Nitro .NET Traversymedia.com
- 15. 15 Content Management Systems Wordpress, Drupal, Joomla [PHP] Great for clients Thousands of plugins / addons Fast development Can be limiting Traversymedia.com
- 16. 16 Dev Ops & Deploying Applications Dedicated Server / VPS Cloud Hosting – Digital Ocean, Heroku, Amazon Web Services Cloud Storage – Amazon S3 Working with SSH & command line Server maintenance & software updates Traversymedia.com
- 17. 17 Mobile Applications [Choose One] React Native NativeScript Ionic PhoneGap / Cordova Xamarin Traversymedia.com
- 18. 18 You Are a Full Stack Developer! Create simple to advanced web applications [Front & Back end] Create secure RESTAPIs Deploy & maintain applications Administer databases • You should now be able to get a very good job or run your own business Traversymedia.com
- 19. 19 Biggest Changes From Last Year New technologies [Grid CSS, Fetch API, Materialize, NativeScript] More focus on full stack and REST APIS rather than server rendered views More focus on vanilla JavaScript in addition to frameworks Single Page Applications Python & C# over PHP Traversymedia.com
- 20. 20 What Now? Focus on your career and whatever technologies your company uses Learn other languages / stacks in your spare time Stay up to date with trends & technologies Traversymedia.com
- 21. 21 Follow Me TWITTER: Twitter.com/traversymedia FACEBOOK: Facebook.com/traversymedia INSTAGRAM: Instagram.com/traversymedia DISCORD CHAT: Discord.gg/traversymedia LINKEDIN: T ravLeirnsykmeeddiian.co.cmom/in/bradtraversy