- Work for a big company, startup, freelance?
- Web development (frontend/backend), gaming, data science, mobile apps?
- What are you naturally good at?
- Check pay scales, job security, etc for different types of dev jobs
- Figure out which language you should learn for what you want to do
- Python: Data Science, Machine Learning, AI
- Swift, Java: Mobile Development
- C++: Game Development
- JavaScript, PHP, Ruby, Python, etc: Web Development
- Fundamentals first! (Save framework, etc for later)
- Chose a text editor / IDE and get comfortable with it
- You can always switch or learn another language
- Books: Great for learning language fundamentals
- Documentation: Best used for reference
- Resource Websites: W3Schools, MDN Web Docs
- Video Courses: Youtube, Udemy, Pluralsight, Lynda, Coursera, etc
- Online Bootcamps: FreeCodeCamp, Codeacademy, Treehouse
- Challenge Websites: Codewars, HackerRank
- Having people to talk to and learn from is very benifitial
- Find a mentor if possible
- Join an online community
- Go to meetups
- Following along with courses is only half the battle
- This is where most get stuck and many quit
- Your projects do NOT have to be from scratch
- Add new features, use the docs as a supplement to figure new stuff out
- Look at other people's code that is similar to what you want to achieve
- Eventually you won't need to use other projects as a starting point
- Create an attractive but simple portfolio
- Showcase a live version (if possible) and your source code
- Self taught developers NEED a great portfolio with work examples
- Gives you experience with real-life projects
- Collaborate with other developers
- Something for your resume
- Learn how to use Github
- Also extremely importnt for self-taught devs with no degree
- Have an up to date LinkedIn and professional Twitter
- Upload all of your work to Github and keep it well documented
- Write articles, tutorials, videos, etc
- The more your are visible on the web, the better
- All other boxes should be checked
- Prepare for interviews, practice algorithms, create a resume, cover letter, etc
- Search for jobs in your area that are looking for things you know
- Apply even if it says a degree required
- Remember...it is your first job, not your last
- Web Development
- HTML, CSS, Javascript
- Software Development
- Java and C++
- Android & IOS Development
- Android built in Java
- IOS build in C#
- 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
- React - Popular for startups, fast, Redux, JSX
- Angular - Pupular in enterprise, full feature, NgRx
- Vue.js - Fast, light, easy to use, Vuex
- Aurelia - Light, feels like vanilla Javascript
- Ambers
- Meteor - javascript, for frontend and backend
- 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
- Less
- Webpack & Babel - Module loader & JS compiler
- 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
- 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
- CRUD (create, read, update, delete)
- 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
- Wordpress
- Drupal
- Joomla
- Dedicated Server / VPS
- Cloud Hosting
- Digital Ocean, Heroku
- Amazon Web Services
- Cloud Storage - Amazon S3
- Working with SSH & command line
- Server maintenance & software updates
- React Native
- NativeScript
- Ionic
- PhoneGap / Cordova
- Xamarin
- Web fundamentals like HTML, CSS and Vanilla JS (ES6)
- Build projects, solve js coding challenges
- Version Control and CLI:
- Git & Github
- ssh
- command line
- CSS pre-processor:
- SASS or LESS
- CSS library:
- Bootstrap
- Material
- Foundation
- Version Control:
- Git & Github
- Frontend Developer Tools:
- Gulp
- Webpack
- NPM
- Babel
- Design Patterns (JS, CSS)
- JavaScript Libraries and Frameworks:
- jQuery - it's like JavaScript but...easier
- Backbone.js
- Angular
- React
- Vue.js
- ember
- AJAX
- Deploy:
- Firebase
- Heroku
- API design and development
- CRUD (Create, Read, Update, Delete)
- RESTful Services
- Web fundamentals like HTML, JavaScript, and CSS
- Server-side languages like PHP, Python, Ruby, Java, JavaScript, and .Net
- Database technologies like MySQL, Oracle, PostgreSQL, and MongoDB.
- Web server technologies like Node.js, J2EE, Apache, Nginx, ISS, etc.
- Frameworks related to their server-side language of choice like: Express.js, Ruby on Rails, CakePHP, etc.
On the front-end, the full stack web developer uses a combination of HTML, CSS, and JavaScript to build everything a user sees and interacts with on a website. On the back-end they develop the application, server, and database that make up the foundational structure of a website. Their skills are often centered around solution stacks like LAMP (Linux, Apache, MySQL, PHP) or MEAN (MongoDB, Express.js, AngularJS, Node.js) which contain all the technologies required to set up a complete website.
- Create simple to advanced web applications (Front and Back end)
- Create secure REST APIs
- Deploy & maintain applications
- Administer databases
- PHP
- Python
- Node.js
- Rails
- Java
- Express - Web development framework
- Body-parser
- learn how it helps put things on
req.body
- learn how it helps put things on
- Connect - Extensible HTTP server framework
- Path
- Socket.io - Server side component for websockets
- Templating
- Pug / Jade
- inspired by HAML
- learn how to render pug files with
res.render('someViewFile.pug', data)
- handlebars
- mustache
- ejs
- etc
- Pug / Jade
- Mongo / Mongoose - Wrappers to interact with MongoDB
- Coffee-Script - CoffeeScript compiler
- Redis - Redis client library
- Server or Web Server
- Request and response
res.json
/res.render
/res.send("you're on the homepage")
<-"/"
- MongoDB non relational
- MERN (mongo, express, react, node)
- Progres
- mysql
- Mongoose (mongoDB)
- Sequelize (postgres, mysql)
- must have CRUD (Create, Read, Update, Delete) functionality
- URL shortener
- To do list App
- A movies App
- Blog
- Rebuild front end app projects
- Deployment
- docker
- heroku
- digital ocean
- nginx
- learn 1 then come back later for more.
- RESTful api
- MVC Architecture:
- Model - data in your database
- View
- pug files (what the user sees)
- Controller
- connecter/linker for the two
- Authentication (JWTm oAuth 2.0):
- Passport
- Strategies
- Simple basic authentication system Email && Password
- Login with social media profiles, facebook google twitter etc..
- Json Web Token
- Email reset password flow
- Nodemailer (sendgrid, postmark)
- Authorization
- Testing (Mocha, Chai)
- Security:
- SSL
- Injections
- Form validations (client && server)
- Handling uploads (images, videos, links etc)
- XSS attacks
- You're ready:
- Keep learning more
- SSR (Server Side Rendering) vs CSR (Client Side Rendering)
- MERN (mongo, express, react, node) (Go Deeper, solidify)
- explore other stacks
- Job? Still haven't applied?
- Apply to Every job
Senior Software Engineer (Java and Web Dev)
A senior developer with 5+ years in the field of Front-end and Java. I can work on both front-end and back-end part of a project, which also includes but not limited to: designing, data structure, development, optimization, testing, and deployment.
I'm flexible with changes needed to meet-up the requirements. I'm confident in my skills and I'm very open to new technologies and knowledge that I might acquire.
My previous projects include mostly e-Commerce websites, banking web application, and social media. Also, I mostly work on several APIs that serve both Mobile and Web apps.
- Goal
- Professional Dev at a Company (Large or Small)
- Freelancer / Consultant / Your Own Business
- Build Your Own Apps / SaaS
- Content Creation
- Just a Hobby
- How the Internet Works
- Hosting
- DNS
- HTTP
- Browsers
- Domain Names
- Resources:
- Basic Tools
- Computer & OS: MacOS, Windows, Linux
- Text Editor: Visual Studio Code, Sublime Text, Atom, Vim
- Web Browser: Chrome, Edge, Firefox, Brave, Safari
- Terminal: Powershell, Zsh, Hyper, iTerm, Bash, Git Bash
- Design Software: Figma, Adobe XD, Photoshop, Sketch
- Resources:
- HTML
- Semantic HTML
- Forms & Validations
- Accessibility
- SEO
- Best Practices
- Resources:
- CSS
- Basic Styling
- Positioning
- Alignment
- Flexbox
- CSS Grid
- Custom Properties
- Transitions / Animations
- Plain CSS
- GSAP (GreenSock Animation Platform)
- anime.js
- Responsive Design
- Mobile First
- rem units
- Viewport
- Fluid Widths
- Media Queries
- Resources:
- CSS Crash Course in 30 Minutes (codeSTACKr)
- Learn CSS Flexbox in 20 Minutes (codeSTACKr)
- Learn CSS Grid in 20 Minutes (codeSTACKr)
- Learn Sass in 30 Minutes (codeSTACKr)
- GSAP Typing Animtion (codeSTACKr)
- CSS King, Kevin Powell (Youtube)
- HTML & CSS Playlist
- Modern HTML & CSS From The Beginning (Including Sass) Udemy Course
- CSS Preprocessors gives us more functionality in styling
- Sass: offers variables, mixins, functions, nesting, etc
- PostCSS
- Resources:
- Sass Crash Course
- Responsive Portfolio Website Project Playlist
- Fancy Form UI From Scratch
- Modern CSS
- CSS Frameworks can be used to create websites and UIs quickly
- Tailwind CSS: Utility-first framework
- Bootstrap: Popular framework
- Materialize: Based on Material Design
- Bulma: Modular & lightweight
- Resources:
- UI Design
- Color & Contrast: Make sure text is readable
- White Space: Spacing between elements
- Scale: Sizing relative to other elements
- Visual Hierarchy: Arrange in order of importance
- Typography: Text typefaces, sizing, etc
- Resources:
- JavaScript is language of the client side
- Basics: Variables, arrays, functions, loop, etc
- DOM & Styling: Selecting and manipulating elements
- Array Methods:
forEach
,map
,filter
,reduce
, etc - JSON: JavaScript Object Notation
- HTTP Requests: Fetch API - GET, POST, PUT, DELETE
- ES6+
- Resources:
- Vanilla JavaScript
- JavaScript Tutorial for Beginners (codeSTACKr)
- Learn JSON in 10 Minutes (codeSTACKr)
- Fetch API Explained (codeSTACKr)
- JavaScript Playlist (codeSTACKr)
- JavaScript Shorts (codeSTACKr)
- Modern JavaScript From The Beginning Udemy Course
- 20 Web Projects With Vanilla JavaScript Udemy Course
- 50 Projects In 50 Days - HTML, CSS & JavaScript Udemy Course
- TypeScript is a superset of JS, popilar on it's own as well as being paired with a FE framework
- Brings a "strict" type system to JavaScript
- Makes the code more robust and less prone to errors
- Object oriented programming (classes, interfaces, generics, modules)
- Great for larger projects
- Resources:
- Front-End Framework
- Frameworks
- React
- Vue
- Svelte
- Angular
- Resources:
- State Management
- React: Context API, Redux, MobX
- Vue: Vuex
- Svelte: Context API
- Angular: Shared Service, NgRx
- Resources:
- Static Site Generators
- Gatsby (React)
- Next.js (React)
- Gridsome (Vue)
- Nuxt.js (Vue)
- 11ty (JS alternative to Jekyll)
- Jekyll (Ruby)
- Hugo (Go)
- Resources:
- Server Side Rendering (SSR) advantages are better SEO, easy routing, etc
- Next.js (React)
- Nuxt.js (Vue)
- Sapper (Svelte)
- Angular Universal (Angular)
- Frameworks
- Other Tools
- GraphQL: Query language for your API
- Send a query (similar to JSON) to your API and get exactly what you need
- Setup a GraphQL server and query using a client like Apollo
- Easily use with React and other frameworks
- Resources:
- Socket.io & Real-Time Technologies: Allows real-time, bidirectional communication
- Instant messaging & chat
- Real-time analytics
- Document collaboration
- Binary streaming
- etc.
- Progressive Web Apps (PWA): Web apps with a completely native feel as far as experience, layout and functionality, regardless of the device
- Built for all screen sizes
- Offline content / Service workers
- HTTPS
- Native experience (Fast, engaging, splash, screens, installable, etc)
- Resources:
- Web Assembly: Effcient low-level bytecode for the web, an improvement to JS (not a replacement)
- Create extremely powerful web apps (games, video/image editing, etc)
- Use languages like C++ & Rust to compile to WASM
- AssemblyScript is a variant of TypeScript and makes it easy to compile to Wasm without learning a new language
- Resources:
- JAMstack (JavaScript APIs & Markup): Web architecture with high performance, security and scalability at a low cost with a great dev experience
- Static Sites / Assets
- Markdown
- Serverless
- Headless CMS for Content
- Hosting with services like Netlify
- Resources:
- Speech Recognition
- Back-End Path: focuses on data, modeling and HTTP requests/responses
- Server Side Language
- Node.js (JavaScript)
- Deno (JavaScript)
- Python
- C#
- Go
- Ruby
- PHP
- Java
- Kotlin
- Rust
- Resources:
- Server Side Frameworks
- Node: Express, Koa, Nest, Loopback
- Python: Django, Flask
- PHP: Laravel, Symfony, Slim
- C#: ASP.NET, Blazor
- Java: Spring MVC
- Ruby: Ruby on Rails, Sinatra
- Kotlin: Javalin, KTor
- Resources:
- Database
- Relational
- PostgreSQL
- MySQL
- Azure Cloud SQL
- MS SQL Server
- Resources:
- NoSQL/Cloud
- MongoDB
- Airtable
- AWS
- FaunaDB
- Firebase
- Elasticsearch
- Resources:
- Object-relational mapping (ORM) / Object Document Mapping (ODM):
- Mongoose
- Sequelize
- SQLAlchemy
- Doctrine
- Eloquent
- Relational
- APIs (Application Programming Interface)
- Resources:
- Authentication
- OAuth
- JWT
- Providers
- Auth0
- Firebase
- Resources:
- Blockchain / Cryptocurrency
- Resources:
- Content Management Systems (CMS)
- Traditional
- Wordpress
- Setup websites quickly
- Give your clients complete control
- Tons of plugins to add functionality
- Create custom themes and plugins
- Wordpress can be used as a headless CMS
- Drupal
- Wordpress
- Headless CMS: Backend only content management system that is commonly used with static site generators
- Strapi
- Sanity.io
- Contentful
- Prismic
- Wordpress
- Netlify CMS
- Storyblok
- Resources:
- Traditional
- Deployment / DevOps
- SSH
- Load Balancing, Monitoring, Security
- Domain Names: Namecheap, Google Domains, Enom
- Email Hosting: Namecheap, Zoho Mail, CPanel
- SSL Certificates: Let's Encypt, Cloudflare, Namecheap
- GitHub Actions
- Hosting
- Static
- Netlify
- GitHub Pages
- Heroku
- Linode
- AWS
- Azure
- Vercel
- CPanel: InMotion, Hostgator, Bluehost
- Static
- Web Servers: Nginx, Apache, MS IIS
- Testing
- Unit: Individual units like functions or classes
- Integration: Modules tested as group
- End-to-End: Test workflow from start to finish
- Testing frameworks
- JS: Jest, Mocha
- Python: PyTest, Robot
- Serverless (FaaS): AWS Lambda, Netlify
- Virtualization / Containers: Docker / Kubernetes, Vagrant
- Image / Video: Cloudinary, S3
- CI / CD: Jenkins, Travis CI, Circle CI
- Resources:
- Server Side Language
- Mobile Development
- Flutter / Dart
- React Native
- Web
- Ionic
- Xamarin (C#)
- Kotlin
- Swift
- NativeScript
- Resources:
- Desktop Development
- Electron (e.g., VS Code, Twitch, Slack, Figma, Discord)
- NW.js
- Python & Tkinter
- Machine Learning / AI: Can be useful in certain aspects of web development, especially for Python developers
- Automation & Tools
- Machine Learning APIs
- Understand User Behavior / Engagement / Analytics
- Create Code
- Technologies: Python, Tensorflow, Brain.js
- Resources:
- Soft Skills & Personal Development
- Algorithms: Helps your logical and critical thinking skills
- Beginner Algo Questions: FizzBuzz, string reversals, array chuking, palindromes, anagrams, max character, etc
- Popular Challenge Websites: Codewars, Project Euler, Coderbyte
- Data Structure: Organizing & managing data effectively so that we can perform specific operations efficiently
- Popular Data Structures: Array, Linked Listm Queue, Stack, Tree, Graph, Hash Table
- Software Design Patterns: General reusable Solutions to commonly occuring problems, some are:
- Singleton Pattern
- Facade Pattern
- Bridge/Adapter Pattern
- Strategy Pattern
- Observer Pattern
- Foundational Frontend Developer
- Setup a productive development environment
- Write HTML, CSS & JavaScript
- Use Sass & CSS framework (Optional)
- Create responsive layouts
- Build websites with some dynamic functionality and work with the DOM
- Connect to 3rd party APIs with Fetch & understand basic HTTP
- Use Git and GitHub or some other Git repo (Bitbucket, etc)
- Deploy & manage a website or small web app
- Frontend Superstar
- Build apps and interfaces with a frontend framework
- Work with component and global state
- Connect to backend JSON data integrate into your apps
- Write and test clean and efficient code
- Optional:
- Use typescript to write more robust code
- Server side rendering
- Static site generators / JAMstack
- Full Stack Developer
- Comfortable with both building frontend UIs and servers
- Know a server side language / technology
- Can work with & structure databases, work with ORMs / ODMs
- Understand HTTP & Create RESTful APIs
- Can successfully deploy full stack projects
- Very comfortable with the terminal