SlideShare a Scribd company logo
1
Web Development
In 2018
Traversymedia.com
A Practical Guide
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
Tools & Software
 Text Editor VSCode, Atom, Sublime Text
 Good Browser Chrome or Firefox
 Image Editing Photoshop, GIMP, etc
 Deployment Tools FTP client, SSH tool
 Cloud Storage Optional Dropbox, Google Drive, etc
Traversymedia.com
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
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
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
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
Where To Next? [Depends]
 HTML / CSS Frameworks Bootstrap, Materialize, etc
 Frontend JavaScript Framework React, Angular, etc
 Server Side Language / Technology Node.js, Python, etc
 Database MongoDB, MySQL, etc
Traversymedia.com
9
HTML / CSS Frameworks [Choose One]
 Twitter Bootstrap 4 General framework, most popular
 Materialize CSS Primarily a UI/UX framework
 Bulma Easy to learn syntax, No JS
 Zurb Foundation Alternative to Bootstrap
 Skeleton VERY light boilerplate
Traversymedia.com
10
Front End JS Framework [Choose One]
 React Popular for startups, fast, Redux, JSX
 Angular Popular in enterprise, full featured, NgRx
 Vue.js Fast, light, easy to use, Vuex
 Aurelia Light, feels like vanilla JavaScript
Traversymedia.com
11
Side Technologies You Should Learn
 GIT Version control
 Basic Command Line Folder navigation, file creation, etc
 APIS / REST Learn how REST APIs work
 HTTP / SSL HTTP requests, HTTPS
 CSS Pre-Processor Sass or Less
 Webpack & Babel Module loader & JS compiler
Traversymedia.com
12
Server Side Technology [Choose One]
 Node.js Fast, scalable and powerful
 Python Popular, rapid development, great integration
 PHP Practical, easy to deploy – Wordpress & Laravel
 Ruby Rapid development, strong community
 C# & ASP.NET Very powerful, Microsoft
Traversymedia.com
13
Database [Choose One]
 MongoDB NoSQL, non-relational, suggested for Node.js
 MySQL Popular relational database
 PostgreSQL Powerful but a bit more difficult than MySQL
 SQL Server Microsoft’s implementation of SQL
 Oracle Heavily used in enterprise
 Firebase Cloud database maintained by Google
Traversymedia.com
14
Server Side Frameworks [Choose One]
 JavaScript Express, Hapi.js, Adonis, Loopback, Swagger
 Python Django, Flask, Web2py, Pylons
 PHP Laravel, Symfony, CodeIgniter, Yii2
 Ruby Ruby on Rails, Sinatra, Nitro
 C# .NET
Traversymedia.com
15
Content Management Systems
 Wordpress, Drupal, Joomla [PHP]
 Great for clients
 Thousands of plugins / addons
 Fast development
 Can be limiting
Traversymedia.com
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
Mobile Applications [Choose One]
 React Native
 NativeScript
 Ionic
 PhoneGap / Cordova
 Xamarin
Traversymedia.com
18
You Are a Full Stack Developer!
 Create simple to advanced web applications [Front & Back end]
 Create secure REST APIs
 Deploy & maintain applications
 Administer databases
• You should now be able to get a very good job or run your own business
Traversymedia.com
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
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
Follow Me
TWITTER:
Twitter.com/traversymedia
FACEBOOK:
Facebook.com/traversymedia
INSTAGRAM:
Instagram.com/traversymedia
DISCORD CHAT: Discord.gg/traversymedia
LINKEDIN: Linkedin.com/in/bradtraversyTraversymedia.com

More Related Content

What's hot

Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScript
Edureka!
 
ppt of web development for diploma student
ppt of web development for diploma student ppt of web development for diploma student
ppt of web development for diploma student
Abhishekchauhan863165
 
Web Development Presentation
Web Development PresentationWeb Development Presentation
Web Development Presentation
TurnToTech
 
Web development presentation
Web development presentationWeb development presentation
Web development presentation
Vaishnavi8950
 
Full Stack Web Development
Full Stack Web DevelopmentFull Stack Web Development
Full Stack Web Development
SWAGATHCHOWDARY1
 
Web Development
Web DevelopmentWeb Development
Web Development
Lena Petsenchuk
 
Basics of Web Development.pptx
Basics of Web Development.pptxBasics of Web Development.pptx
Basics of Web Development.pptx
Palash Sukla Das
 
Web development
Web developmentWeb development
Web development
RaziyaChoudhary
 
Web Development - Lecture 1
Web Development - Lecture 1Web Development - Lecture 1
Web Development - Lecture 1
Syed Shahzaib Sohail
 
Modern Web Development
Modern Web DevelopmentModern Web Development
Modern Web Development
Robert Nyman
 
Web Development
Web DevelopmentWeb Development
Web Development
Harshdeep Singh
 
Top frontend web development tools
Top frontend web development toolsTop frontend web development tools
Top frontend web development tools
Benji Harrison
 
Front-End Web Development
Front-End Web DevelopmentFront-End Web Development
Front-End Web Development
Yash Sati
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
JohnTaieb
 
Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1
Oleksii Prohonnyi
 
Web Development on Web Project Presentation
Web Development on Web Project PresentationWeb Development on Web Project Presentation
Web Development on Web Project Presentation
Milind Gokhale
 
web development.pptx
web development.pptxweb development.pptx
web development.pptx
MohdArbazraza
 
Internship presentation
Internship presentationInternship presentation
Internship presentation
Wasim Shemna
 
Wordpress
WordpressWordpress
Wordpress
lexinamer
 
Web development ppt
Web development pptWeb development ppt
Web development ppt
ParasJain222
 

What's hot (20)

Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScript
 
ppt of web development for diploma student
ppt of web development for diploma student ppt of web development for diploma student
ppt of web development for diploma student
 
Web Development Presentation
Web Development PresentationWeb Development Presentation
Web Development Presentation
 
Web development presentation
Web development presentationWeb development presentation
Web development presentation
 
Full Stack Web Development
Full Stack Web DevelopmentFull Stack Web Development
Full Stack Web Development
 
Web Development
Web DevelopmentWeb Development
Web Development
 
Basics of Web Development.pptx
Basics of Web Development.pptxBasics of Web Development.pptx
Basics of Web Development.pptx
 
Web development
Web developmentWeb development
Web development
 
Web Development - Lecture 1
Web Development - Lecture 1Web Development - Lecture 1
Web Development - Lecture 1
 
Modern Web Development
Modern Web DevelopmentModern Web Development
Modern Web Development
 
Web Development
Web DevelopmentWeb Development
Web Development
 
Top frontend web development tools
Top frontend web development toolsTop frontend web development tools
Top frontend web development tools
 
Front-End Web Development
Front-End Web DevelopmentFront-End Web Development
Front-End Web Development
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
 
Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1
 
Web Development on Web Project Presentation
Web Development on Web Project PresentationWeb Development on Web Project Presentation
Web Development on Web Project Presentation
 
web development.pptx
web development.pptxweb development.pptx
web development.pptx
 
Internship presentation
Internship presentationInternship presentation
Internship presentation
 
Wordpress
WordpressWordpress
Wordpress
 
Web development ppt
Web development pptWeb development ppt
Web development ppt
 

Similar to Web Development In 2018

web development in 2024 - website development
web development in 2024 - website developmentweb development in 2024 - website development
web development in 2024 - website development
Goa App
 
web development full stack
web development full stackweb development full stack
web development full stack
Goa App
 
Seminar: Become a Reliable Web Programmer
Seminar: Become a Reliable Web ProgrammerSeminar: Become a Reliable Web Programmer
Seminar: Become a Reliable Web Programmer
Achmad Solichin
 
Become a Successful Web Developer in Web development Field in 2017
Become a Successful Web Developer in Web development Field in 2017Become a Successful Web Developer in Web development Field in 2017
Become a Successful Web Developer in Web development Field in 2017
Imran Qasim
 
Microsoft WebMatrix Platform Overview
Microsoft WebMatrix Platform OverviewMicrosoft WebMatrix Platform Overview
Microsoft WebMatrix Platform OverviewSpiffy
 
Web Architecture with Infopark's Cloud Platform - Thomas Witt @Cloud Develope...
Web Architecture with Infopark's Cloud Platform - Thomas Witt @Cloud Develope...Web Architecture with Infopark's Cloud Platform - Thomas Witt @Cloud Develope...
Web Architecture with Infopark's Cloud Platform - Thomas Witt @Cloud Develope...
JustRelate
 
Web Development Today
Web Development TodayWeb Development Today
Web Development Today
bretticus
 
Web II - 01 - Introduction to server-side development
Web II - 01 - Introduction to server-side developmentWeb II - 01 - Introduction to server-side development
Web II - 01 - Introduction to server-side development
Randy Connolly
 
Normalizing x pages web development
Normalizing x pages web development Normalizing x pages web development
Normalizing x pages web development
Shean McManus
 
T2 Web Framework
T2 Web FrameworkT2 Web Framework
T2 Web Framework
Shinpei Ohtani
 
Web summit.pptx
Web summit.pptxWeb summit.pptx
Web summit.pptx
171SagnikRoy
 
Building the next generation of browser apps today
Building the next generation of browser apps todayBuilding the next generation of browser apps today
Building the next generation of browser apps today
Randy Williams
 
Web technologies practical guide
Web technologies practical guideWeb technologies practical guide
Web technologies practical guide
samir azazy
 
Building Flash-based websites using Adobe Flex - Lesson 1/10
Building Flash-based websites using Adobe Flex - Lesson 1/10Building Flash-based websites using Adobe Flex - Lesson 1/10
Building Flash-based websites using Adobe Flex - Lesson 1/10
Stefano Virgilli
 
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Brian Culver
 
Ruby On Rails Seminar Basis Softexpo Feb2010
Ruby On Rails Seminar Basis Softexpo Feb2010Ruby On Rails Seminar Basis Softexpo Feb2010
Ruby On Rails Seminar Basis Softexpo Feb2010arif44
 
Scraping the web with Laravel, Dusk, Docker, and PHP
Scraping the web with Laravel, Dusk, Docker, and PHPScraping the web with Laravel, Dusk, Docker, and PHP
Scraping the web with Laravel, Dusk, Docker, and PHP
Paul Redmond
 
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Maximiliano Firtman
 
Node.js Tools Ecosystem
Node.js Tools EcosystemNode.js Tools Ecosystem
Node.js Tools Ecosystem
Rocket Software
 

Similar to Web Development In 2018 (20)

web development in 2024 - website development
web development in 2024 - website developmentweb development in 2024 - website development
web development in 2024 - website development
 
web development full stack
web development full stackweb development full stack
web development full stack
 
Seminar: Become a Reliable Web Programmer
Seminar: Become a Reliable Web ProgrammerSeminar: Become a Reliable Web Programmer
Seminar: Become a Reliable Web Programmer
 
Become a Successful Web Developer in Web development Field in 2017
Become a Successful Web Developer in Web development Field in 2017Become a Successful Web Developer in Web development Field in 2017
Become a Successful Web Developer in Web development Field in 2017
 
Microsoft WebMatrix Platform Overview
Microsoft WebMatrix Platform OverviewMicrosoft WebMatrix Platform Overview
Microsoft WebMatrix Platform Overview
 
Web Architecture with Infopark's Cloud Platform - Thomas Witt @Cloud Develope...
Web Architecture with Infopark's Cloud Platform - Thomas Witt @Cloud Develope...Web Architecture with Infopark's Cloud Platform - Thomas Witt @Cloud Develope...
Web Architecture with Infopark's Cloud Platform - Thomas Witt @Cloud Develope...
 
Web Development Today
Web Development TodayWeb Development Today
Web Development Today
 
Web II - 01 - Introduction to server-side development
Web II - 01 - Introduction to server-side developmentWeb II - 01 - Introduction to server-side development
Web II - 01 - Introduction to server-side development
 
Normalizing x pages web development
Normalizing x pages web development Normalizing x pages web development
Normalizing x pages web development
 
T2 Web Framework
T2 Web FrameworkT2 Web Framework
T2 Web Framework
 
Web summit.pptx
Web summit.pptxWeb summit.pptx
Web summit.pptx
 
Building the next generation of browser apps today
Building the next generation of browser apps todayBuilding the next generation of browser apps today
Building the next generation of browser apps today
 
Web technologies practical guide
Web technologies practical guideWeb technologies practical guide
Web technologies practical guide
 
Building Flash-based websites using Adobe Flex - Lesson 1/10
Building Flash-based websites using Adobe Flex - Lesson 1/10Building Flash-based websites using Adobe Flex - Lesson 1/10
Building Flash-based websites using Adobe Flex - Lesson 1/10
 
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
 
Ruby On Rails Seminar Basis Softexpo Feb2010
Ruby On Rails Seminar Basis Softexpo Feb2010Ruby On Rails Seminar Basis Softexpo Feb2010
Ruby On Rails Seminar Basis Softexpo Feb2010
 
Web engineering lecture 4
Web engineering lecture 4Web engineering lecture 4
Web engineering lecture 4
 
Scraping the web with Laravel, Dusk, Docker, and PHP
Scraping the web with Laravel, Dusk, Docker, and PHPScraping the web with Laravel, Dusk, Docker, and PHP
Scraping the web with Laravel, Dusk, Docker, and PHP
 
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
 
Node.js Tools Ecosystem
Node.js Tools EcosystemNode.js Tools Ecosystem
Node.js Tools Ecosystem
 

Recently uploaded

zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex ProofszkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
Alex Pruden
 
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdfSAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
Peter Spielvogel
 
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Nexer Digital
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
Kari Kakkonen
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
ControlCase
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
OnBoard
 
Quantum Computing: Current Landscape and the Future Role of APIs
Quantum Computing: Current Landscape and the Future Role of APIsQuantum Computing: Current Landscape and the Future Role of APIs
Quantum Computing: Current Landscape and the Future Role of APIs
Vlad Stirbu
 
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
James Anderson
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
Prayukth K V
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
James Anderson
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
Alan Dix
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
91mobiles
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
Safe Software
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
Ralf Eggert
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
Adtran
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance
 
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptxSecstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
nkrafacyberclub
 
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
UiPathCommunity
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Paige Cruz
 

Recently uploaded (20)

zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex ProofszkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
 
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdfSAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
 
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
 
Quantum Computing: Current Landscape and the Future Role of APIs
Quantum Computing: Current Landscape and the Future Role of APIsQuantum Computing: Current Landscape and the Future Role of APIs
Quantum Computing: Current Landscape and the Future Role of APIs
 
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
 
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptxSecstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
 
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
 

Web Development In 2018

  • 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 VSCode, Atom, Sublime Text  Good Browser Chrome or Firefox  Image Editing Photoshop, GIMP, etc  Deployment Tools FTP client, SSH tool  Cloud Storage Optional 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 Bootstrap, Materialize, etc  Frontend JavaScript Framework React, Angular, etc  Server Side Language / Technology Node.js, Python, etc  Database MongoDB, MySQL, etc Traversymedia.com
  • 9. 9 HTML / CSS Frameworks [Choose One]  Twitter Bootstrap 4 General framework, most popular  Materialize CSS Primarily a UI/UX framework  Bulma Easy to learn syntax, No JS  Zurb Foundation Alternative to Bootstrap  Skeleton VERY light boilerplate Traversymedia.com
  • 10. 10 Front End JS Framework [Choose One]  React Popular for startups, fast, Redux, JSX  Angular Popular in enterprise, full featured, NgRx  Vue.js Fast, light, easy to use, Vuex  Aurelia Light, feels like vanilla JavaScript Traversymedia.com
  • 11. 11 Side Technologies You Should Learn  GIT Version control  Basic Command Line Folder navigation, file creation, etc  APIS / REST Learn how REST APIs work  HTTP / SSL HTTP requests, HTTPS  CSS Pre-Processor Sass or Less  Webpack & Babel Module loader & JS compiler Traversymedia.com
  • 12. 12 Server Side Technology [Choose One]  Node.js Fast, scalable and powerful  Python Popular, rapid development, great integration  PHP Practical, easy to deploy – Wordpress & Laravel  Ruby Rapid development, strong community  C# & ASP.NET Very powerful, Microsoft Traversymedia.com
  • 13. 13 Database [Choose One]  MongoDB NoSQL, non-relational, suggested for Node.js  MySQL Popular relational database  PostgreSQL Powerful but a bit more difficult than MySQL  SQL Server Microsoft’s implementation of SQL  Oracle Heavily used in enterprise  Firebase Cloud database maintained by Google Traversymedia.com
  • 14. 14 Server Side Frameworks [Choose One]  JavaScript Express, Hapi.js, Adonis, Loopback, Swagger  Python Django, Flask, Web2py, Pylons  PHP Laravel, Symfony, CodeIgniter, Yii2  Ruby Ruby on Rails, Sinatra, Nitro  C# .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 REST APIs  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