SlideShare a Scribd company logo
1 of 21
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 on Web Project Presentation
Web Development on Web Project PresentationWeb Development on Web Project Presentation
Web Development on Web Project PresentationMilind Gokhale
 
Difference between-web-designing-and-web-development
Difference between-web-designing-and-web-developmentDifference between-web-designing-and-web-development
Difference between-web-designing-and-web-developmentGlobal Media Insight
 
Web Development Ppt
Web Development PptWeb Development Ppt
Web Development PptBruce Tucker
 
Basic WordPress for Beginner ppt
Basic WordPress for Beginner pptBasic WordPress for Beginner ppt
Basic WordPress for Beginner pptDipika Wadhvani
 
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 Design & Development - Session 1
Web Design & Development - Session 1Web Design & Development - Session 1
Web Design & Development - Session 1Shahrzad Peyman
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptEdureka!
 
Internship Presentation 2 Web Developer
Internship Presentation 2 Web DeveloperInternship Presentation 2 Web Developer
Internship Presentation 2 Web DeveloperHemant Sarthak
 
Front end web development
Front end web developmentFront end web development
Front end web developmentviveksewa
 
Introduction to WordPress
Introduction to WordPressIntroduction to WordPress
Introduction to WordPressLumosTech
 
Internship presentation
Internship presentationInternship presentation
Internship presentationWasim Shemna
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | IntroductionJohnTaieb
 
Basic Wordpress PPT
Basic Wordpress PPT Basic Wordpress PPT
Basic Wordpress PPT mayur akabari
 
web development.pptx
web development.pptxweb development.pptx
web development.pptxMohdArbazraza
 
Full-Stack Development
Full-Stack DevelopmentFull-Stack Development
Full-Stack DevelopmentDhilipsiva DS
 
UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?Diego Eis
 

What's hot (20)

Web development
Web developmentWeb development
Web development
 
Web Development on Web Project Presentation
Web Development on Web Project PresentationWeb Development on Web Project Presentation
Web Development on Web Project Presentation
 
Difference between-web-designing-and-web-development
Difference between-web-designing-and-web-developmentDifference between-web-designing-and-web-development
Difference between-web-designing-and-web-development
 
Web Development Ppt
Web Development PptWeb Development Ppt
Web Development Ppt
 
Basic WordPress for Beginner ppt
Basic WordPress for Beginner pptBasic WordPress for Beginner ppt
Basic WordPress for Beginner ppt
 
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 Design Trends: 2018 Edition
Web Design Trends: 2018 EditionWeb Design Trends: 2018 Edition
Web Design Trends: 2018 Edition
 
Web Design & Development - Session 1
Web Design & Development - Session 1Web Design & Development - Session 1
Web Design & Development - Session 1
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScript
 
Internship Presentation 2 Web Developer
Internship Presentation 2 Web DeveloperInternship Presentation 2 Web Developer
Internship Presentation 2 Web Developer
 
Front end web development
Front end web developmentFront end web development
Front end web development
 
Introduction to WordPress
Introduction to WordPressIntroduction to WordPress
Introduction to WordPress
 
Internship presentation
Internship presentationInternship presentation
Internship presentation
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
 
Basic Wordpress PPT
Basic Wordpress PPT Basic Wordpress PPT
Basic Wordpress PPT
 
web development.pptx
web development.pptxweb development.pptx
web development.pptx
 
Web Development
Web DevelopmentWeb Development
Web Development
 
Wordpress
WordpressWordpress
Wordpress
 
Full-Stack Development
Full-Stack DevelopmentFull-Stack Development
Full-Stack Development
 
UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?
 

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 developmentGoa App
 
web development full stack
web development full stackweb development full stack
web development full stackGoa App
 
Seminar: Become a Reliable Web Programmer
Seminar: Become a Reliable Web ProgrammerSeminar: Become a Reliable Web Programmer
Seminar: Become a Reliable Web ProgrammerAchmad 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 2017Imran 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 Todaybretticus
 
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 developmentRandy Connolly
 
Normalizing x pages web development
Normalizing x pages web development Normalizing x pages web development
Normalizing x pages web development Shean McManus
 
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 todayRandy Williams
 
Web technologies practical guide
Web technologies practical guideWeb technologies practical guide
Web technologies practical guidesamir 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/10Stefano 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 PHPPaul 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 2014Maximiliano Firtman
 

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

Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptxLBM Solutions
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersThousandEyes
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...HostedbyConfluent
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitecturePixlogix Infotech
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxOnBoard
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksBenefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksSoftradix Technologies
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...shyamraj55
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal
 
Azure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAzure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAndikSusilo4
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Allon Mureinik
 

Recently uploaded (20)

Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptx
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptx
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksBenefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other Frameworks
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
 
Azure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAzure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & Application
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
 

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