Everything You Need To Know To Become A Full Stack Developer In 2019
Aug 05 2019
Over the past 10 years, web technologies have grown from a chaotic line by line trial and error into a more complex component-based system. Today, developers have a better understanding of the web and how it should manifest.
This article will cover all of the major technologies involved in becoming a front-end, back-end or full-stack developer in 2019.
Keep in mind that regardless of how many books, tutorials, youtube videos, articles, tips and tricks, you’ll dig, to level up your coding skills, it’s a matter of how many KB of lines you’ll write and how many gallons of coffee will pour.
IDE or Text Editor
An integrated development environment (IDE) is a software suite (Text Editor in this case) that consolidates basic tools required to write and test software.
- Brackets — Is a lightweight, yet powerful, modern text editor.
- Atom — A hackable text editor for the 21st Century
- Microsoft Visual Studio — Code faster. Work smarter. Create the future with the best-in-class IDE.
A web browser, or simply “browser,” is an application used to access and view websites. The primary function of a web browser is to render HTML.
- Chrome — Google Chrome is a cross-platform web browser developed by Google.
- Safari — Safari is a graphical web browser developed by Apple, based on the WebKit engine.
- Firefox — Mozilla Firefox, or simply Firefox, is a free and open-source web browser developed by the Mozilla Foundation and its subsidiary, Mozilla Corporation.
Design & Mockup
In the design industry, from ideation to implementation there are some great applications that make it possible.
- Sketch — Sketch is a vector graphics editor, dedicated for web design.
- Illustrator — Adobe Illustrator is a vector graphics editor, since 1985.
- Photoshop — Adobe Photoshop is a raster graphics editor, since 1988.
- Figma — Design, prototype, and collaborate all in the browser.
At the core of any interaction stands motion. Most users expect to be guided through their experiences, and here, animations are playing an important role in easing the learning curve usability.
- Principle — Principle makes it easy to design animated and interactive user interfaces.
- After Effects — Adobe After Effects is a digital visual effects, motion graphics, and compositing application.
- Cinema 4D — Cinema 4D is a 3D modeling, animation, motion graphic, and rendering application.
Getting familiar with the basic understanding of the code structure and it’s hierarchy, will help you search for more.
HTML & CSS
- Set Viewport
- Fluid widths
- Media queries
- ‘rem’ over ‘px’
- Mobile first, stacked columns
- Structured CSS
- Fluid widths
- Nested CSS
- Mixing & Functions
- Data Types, functions, conditionals, loops, operators
- DOM Manipulation & Events
- Fetch API
- ES6+ (arrow functions, promises, async / await, destructuring)
Learn to deploy a website and link a domain name.
Register a domain name
A domain is an IP address identifier with a unique name that is easier to remember and it’s used in URLs to point to a particular Web page.
A Web Host or Web Hosting is a computer called Web Server that holds on to your web site files and show them to the Internet.
FTP, also known as File Transfer Protocol, is a communication protocol for simple transmission of files across or accessing files on another computer over the Internet.
Static Hosting (need to learn git)
Static sites are the most basic type of website and are the easiest to create. Unlike dynamic websites, they do not require any Web programming or database design.
SSL Certificates are small data files that digitally bind a cryptographic key to an organization’s details. When installed on a web server, allows secure connections from a web server to a browser.
What can I build now?
- Basic static website (small business, informational)
- Build UI layouts (take a design and create the HTML/CSS)
- Add dynamic functionality (modals, slideshows, transitions, etc)
- Deploy and maintain websites
What to do next depends on what you want to do. You have a few choices:
- 1. HTML / CSS Framework
- 2. Git & Tooling
- 3. Front End JS Framework
- 4. Server Side Language & Database
1. HTML / CSS Framework
HTML/CSS Frameworks are becoming a bit less relevant but I would still suggest learning one. They can make your life much easier and great for prototyping.
- Bootstrap — Bootstrap is an open source toolkit for developing with HTML, CSS, and JS
- Materialize — A modern responsive front-end framework based on Material Design.
- Bulma — Bulma is a free, open-source CSS framework based on Flexbox.
- Semantic UI — Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.
2. Git & Tooling
Git is absolutely necessary for all web developers. Here are some other tooling suggestions:
- Basic Command Line
- Git (versioning control)
- NPM or Yarn (install/update/remove packages)
- Webpack or Parcel (module bundling)
- Grunt or Gulp (task runners)
- Editor Extensions (ESLint, Prettier, Live Server, etc.)
3. Front End JS Framework
- React — Build encapsulated components that manage their own state, then compose them to make complex UIs.
- Angular — Use modern web platform capabilities to deliver app-like experiences.
It is becoming a necessity to learn a JS front-end framework
- – Very popular in the industry
- – More interactive & interesting UIs
- – Components & modular front end code
- – Good for teams & code management
For larger apps with a framework, you may need to learn methods to manage app-level state.
- Redux, Context API
- Apollo (GraphQL Client)
You now can:
- – Build incredible front-end applications
- – Smooth & steady font-end workflow
- – Work well with teams & familiar with Git
- – Connect to backend APIs & work with data
Now, you should be able to get a full front-end job really easily.
4. Server-Side Language
To be a full stack or software engineer, you will need to learn a server-side language/technology.
- Python (ML, AI, Data analysis, etc.)
Things to learn:
- Fundamental Syntax
- Structure & Workflow
- Package Managementx
- HTTP / Routing
Do not reinvent the wheel. Learn a framework to optimize your workflow and build better and faster.
Most applications will use some kind of database. These are different types, here are some options:
Server Rendering Pages
Frameworks like React, Vue & Angular can also be rendered on the server which can actually make things relatively easier and load faster
Content Management System (CMS)
CMS allows for quick development and give your client the ability to update their content without writing code.
DevOps, Development & More
Learning languages and frameworks is one thing, setting up environments, testing & deployment is another:
- Deployment — Linux, SSH, Git, Server Software (Nginx, Apache)
- Platforms — Digital Ocean, AWS, Heroku, Azure, Now
- Virtualization — Docker, Vagrant
- Testing — Unit, Integration, Functional, System
Full Stack Badass
You can call your self a web rockstar. You now, can:
- - Setup full stack development environments & workflows
- - Build back end APIs & micro-servers
- - Work with databases
- - Construct full-stack apps (Front-End frameworks & Server)
- - Deploy & Maintain to the cloud (SSH, Git, Servers, etc)
There are some frameworks that allow us to create native apps with web technologies.
- React Native — Build Native apps with React
- Ionic — Hybrid apps with HTML/CSS/JS
- Flutter — Mobile SDK for Android & iOS
- Xamarin — Mobile apps with C#
Desktop Apps with Electron
- Uses Chromium & Node.js
- Compatible with Windows, Mac & Linux
- Crash reporting, debugging & profiling