Select Page
Web Development Introduction for 2020

This article is basically a complete map of technologies that are relevant to web development and this includes things like languages, frameworks, libraries, tools and it’s a guide for all types of developers from front-end to backend and full-stack.

Now, since the industry has kind of slowed down in terms of new technologies.  Before we get started with technologies and tools and all that, let’s take a look at what you want to do because there’s a lot of different reasons to want to learn how to code.


01. Decide the Web Development type you want to be

(1) Work as a developer at a company – Do you want to work for a company that’s probably the most popular decision. Just becoming a developer for a company, applying for jobs.

(2) Start freelancing or make your own business – You could also be a freelancer. You could have your own business or agency and what you do can kind of dictate what technologies you learn.

(3) Become a consultant – You can become a consultant for other companies.

(4) Create an app or software as a service (SAAS) to make money – You could learn how to code to create your own apps or some kind of sass which is a software as a service to make a little bit of money there.

(5) Code as a hobby – You might just want a code as a hobby. So it really depends on what you want to do as to what you should learn.

Front-end developer –  Then you also have the option to be a front-end developer where you’re dealing with the client-side. So you’re dealing with HTML CSS JavaScript maybe a front-end JavaScript framework.

Back-end developer – Dealing with building APIs and microservices, data be dealing with databases or full-stack which seems to be the most popular option where you’re doing both.

It’s important to know your path and what it is you want to do.


02. Know basic system tools for web development

(01) Computer & OS – macOS, Windows, Linux

Obviously you need a computer and an operating system. Can’t write code without that and as far as hardware goes, web development isn’t really demanding on your system, it’s not like game engine development. So you can use a mid-range laptop or desktop or even in some cases a lower-end computer.

It’s really preference. There’s Mac, Windows or Linux. Mac feels like get a smoother experience when it comes to development. Windows 10 is much better than previous versions of Windows when it comes to web development.

Linux for anything that has to do with servers, home’s media server, home web server. One of the advantages of using Linux as a dev machine is that it’ll most likely match your production environment because most production servers run Linux.

(02) Text Editor/ IDE – I would definitely recommend vs code. For most cases and many languages, it has high performance, tons of features,  great extensions, built-in terminal and more. There’s nothing bad about VS code and It also seems to be the most popular one.

Sublime text and Adam which are some other great text editors that most devs used in the past. Visual Studio is pretty popular for like .NET stuff If work in asp.net.  If you’re using Java or a language like that a compiled language, probably needs an IDE. You might want to look at eclipse or NetBeans.

(03) Web browser – Basically have 2  respected choices. They’re Chrome and Firefox. Chrome is fast as it uses the v8 JavaScript engine and it has dev tools as well.  Firefox has also come a long way in recent years and has some really great dev tools. It even has some stuff that chrome doesn’t. Either one of these is our great choice.

(04) Terminal – Most of them use the default bash at a terminal on Mac and Linux. In Windows, most developers use git bash which is a third party terminal and UNIX based. Much better than the standard Windows command line. Now Windows does have a new bash terminal but I haven’t tried it yet.

Then you also have the windows subsystem for Linux which isn’t really finding it to be over complicated but a lot of people that like it and then try third party terminals like iTerm.  A lot of developers use ITerm. Hyper is another one

(05) Design (Option) –  This is optional because not everybody needs to learn this. if you’re working for a company as a developer, you’re not going to be working with the UI itself. (Ex: – Creating the design).

They usually have teams to do that or at least a designer but if you’re freelancing, you may do you create mock-ups for clients.  Most of them like Adobe XD and Photoshop for well over a decade but switch to Adobe XD because it’s more targeted to what we’re doing and it’s a little easier.

Sketch and Figma are pretty popular I’ve used sketch a couple of times. It’s only available on Mac and but it allows you to create really cool interactive UI mock-ups.


03. Learn HTML/CSS  Building Blocks

(01) Learn HTML/CSS – When you start learning web development, the first thing you’re going to learn is HTML and CSS. These are the building blocks of the web and it doesn’t matter how advanced your web app is, what it uses on the backend or what framework is on the front end. It’s going to spit out HTML and CSS for the browser to render.

Now you want to stick to html5 and don’t waste your time on XHTML or any of those other derivatives. They’re not really used anymore.  Html5 allows us to create really semantic layouts. So before HTML5, have to use divs and have to know the id or class of a header & footer.

But with html5, we have semantic tags like the header tag, footer tag and the article tag things like that. So you really want to learn how to semantically layout your elements correctly.

(02) CSS Fundamentals – This is a lot harder than HTML and needs to learn all the fundamentals colors, fonts, and positioning. Learning the box model is really important.

(03) CSS Grid and flexbox – These are probably the best additions to CSS that there have been. Because before when we wanted to align things and create columns and all that, we had to use floats which absolutely sucked or we had to reach for a framework like bootstrap.

So definitely learn CSS grid and flexbox and it’ll make your life a lot easier. CSS custom properties are fairly new. In 2018, they came out but variables in CSS. so they can be very helpful and help you to not repeat yourself so much in your CSS.

(04) CSS transitions and doing animations – I wouldn’t say you have to go crazy with this at first but just learn the basics but don’t have to master CSS before moving on to something else.

Responsive Design

Most people actually use the internet on their mobile devices on their smartphones than their computers. Creating a layout that’s responsive is very important if it’s any kind of serious project.

  • Viewport
  • Media Queries
  • Fluid Widths
  • Rem units over PX
  • Mobile-first

04. Learn to use Custom reusable CSS components.

Most developers moving away from large frameworks like bootstrap and creating their own mini framework for each project. Simply, you can build reusable components like cards and alerts.

The same stuff that the frameworks offer but you build it in a custom way. So it’s a custom design and it doesn’t look to bootstrap or it’s a good way to go. You don’t have to import an entire library and you can just create the components that you need for that particular UI.

Saas Sass which is a CSS preprocessor allows you to do this more efficiently. You can use variables, nesting, conditionals, functions and all types of stuff to make your CSS more efficient and quicker.

The same stuff that the frameworks offer but you build it in a custom way. So it’s a custom design and it doesn’t look to bootstrap or it’s a good way to go. You don’t have to import an entire library and you can just create the components that you need for that particular UI.

You can use the dry principle which is don’t repeat yourself if you use like inheritance and functions and stuff like.

So Saas is a technology that is not pretty easy to learn. If you already know CSS, you can learn sass very quickly. You can create separate sass files for each reusable component.


05. Choose one CSS Frameworks

(01) Boostrap – This is the most popular and it’s pretty easy to learn.

(02) Tailwind CSS – This framework is really gaining interaction in 2020. Little different than the others and when you use something like bootstrap, you have classes like button and alert for the high-level components.

(03) Materialize

(04) Bulma


06. Learn Vanilla JavaScript

(01) Fundamentals – This meaning, just the JavaScript language without any framework. It really depends on what you plan on doing as to how much JavaScript you should learn.

If you’re planning on being like an asp.net developer, Python, PHP or some other language, you don’t need to learn as much JavaScript as someone that’s going to go into learning react or learning NodeJs on the back end.

But you still should learn JavaScript because it is the programming language of the browser and if you want to have dynamic page functionality, you’re going to do that through JavaScript. Can’t do that through Python.

So you want to learn the fundamentals, variables, data types, functions, and all that good stuff.

(02) DOM – Learn about the DOM which is the document object model every element on your page is in the Dom and you can manipulate certain things with JavaScript using events and using element selectors.

(03) Fetch API –  To make a request to API’s, the fetch API is built into the browser and have to use AJAX. Although, I prefer Axios which is a third-party library. But you definitely want to learn how to make requests to JSON APIs.

(04) Modern JS (ES6) – Learning modern JavaScript meaning ES6 or ECMAScript also known as ECMA 2015. Very popular update to JavaScript where it added a whole bunch of new features things like arrow functions, template literals, classes, promises things and more.


07. Learn to use Advanced Tools

Need to learn some of these tools as well I would say Git is something you definitely need to learn regardless of what you’re doing any kind of web development or any kind of programming at all.

(01) Git (Version control) & Github –  This will allow you to save your work to version it to create separate branches when you create a new feature and you want a place to be able to push your code GitHub is obviously the most popular but you also have like git lab, bitbucket, and some other ones as well. but you definitely want to learn to get it’s pretty easy to learn as far as the basics. Just to clone repositories, make pull requests and you know to push to your repo, all that stuff is pretty easy.

(02) browser dev tools –  Every browser has its own dev tools that do a lot of the same stuff as far as what you should know with the dev tools. It means, there’s all different tabs, HTML, CSS, elements and make changes and so on.

The console you want to be familiar with that’s where all your JavaScript errors will go. That’s where you can do logging and debugging.  The network tab will show the request, response and any data, or files that you get back. It’ll also show you how it’s performing the application tab and the dev tools will show you local storage and cookies.

(03) Vs code – This could be any text editor or IDE. It has the ability to add extensions or plugins. There are set of vs code extensions like live server, live sass compiler, bracket colorizer and there are specific extensions for those using frameworks that have syntax highlighting and IntelliSense.

(04) Emmet – This is another great tool and it allows you to write really fast HTML and CSS. Mostly better for HTML5 and it faster with Emmet. It’s built into VS code that’s another great thing about it but if you want to use it with another editor like Adam or sublime text, you have to install it as a separate extension.

(05) NPM and yarn – Both JavaScript package managers and you may not have to learn this if you don’t plan on going into like using a front-end framework or using node. If want to be a Python developer, you need to use pip for the package manager. In PHP, you’ll use the composer but you may have to use NPM at some point. it allows you to install packages really quickly.

(06) Axios – This is an HTTP library similar to the fetch API. It has nice syntax but It’s really up to you. It’s not something that you definitely need to learn.

(07) Webpack or Parcel (JS Module Bundlers) – Install NPM packages on the front end,  use like web pack or parcel. Even if you want to create your own modules, bring a JavaScript file into another JavaScript file, Can’t do that by default just with the browser. That’s only needed if you’re going to get deep into JavaScript.

Even if you use react, or view, they use modules but everything is done under the hood. You don’t actually have to configure your web pack there.


08. Get Experience with Basic Deployment

Now you need to know how to deploy and get your website onto the Internet. A lot of people overcomplicate this.

(01) Managed Hosting (InMotion, Hostgator, Godaddy, Namecheap)

These days we’re building landing pages and tiny applications with a single javascript file. Maybe it’s a personal site or for some small business, there’s no need to learn DevOps and AWS complicated platforms. For hosting a small site or web app, a managed hosting company like in Motion or Godaddy. That’s absolutely fine.

No terminal or anything needed and smaller sites, can use FTP or secure FTP which is a way to get your files onto your web host. It is very slow and you wouldn’t want to use FTP for a really large application but it’s fine for smaller websites. There’s thousands of registrar’s out there and I prefer Namecheap but of course, you could use whatever you want and then connecting a domain to your web host is pretty easy

(02) Static Hosting – (Netlify, Github pages)

You can get a ton for free and it’s really easy to push your code from GitHub or GitLab to Netlify. It can have continuous deployment and it also has a custom CLI that gives a free SSL certificate. There’s form submission without having to create like a PHP script, they’re really innovative as far as hosting goes.

(03) Domain Registration – (NameCheap, Google Domain) – Obviously you need to know how to register a domain easily.

(04) SSH (Secure Shell)

It’s not really to learn at this point and definitely needs to know it when it starts creating more advanced apps and while using cloud hosting.


09. Who is a basic front-end developer

If you’re able to do all the following stuff, you’re a basic front-end developer and you could start to apply for jobs with this skill set but chances are if you’re looking to be a front-end developer you’ll need to know a front-end framework.

(01) Build websites for individuals and small businesses

(02) Create mobile-friendly layouts.

(03) Build small client-side apps with JavaScript

(04) Work with a CSS Framework

(05) Create CSS animations and effects

(06) Add dynamic page functionality

(07) Utilize git for version control

(08) Use your browsers dev tools

(09) Deploy and maintain small projects


10. Choose Front end or Backend?

Now you need to pick what you want to do. Learn a front-end JavaScript framework or want to skip that and move to a server-side language. A lot of people say you need to use a front-end JavaScript framework if you want to be a developer. I don’t think that’s true.

If you want to create PHP sites or maybe use Python with Django, asp.net or whatever render templates on the server without using a JavaScript framework, that’s absolutely fine.  But there are many jobs that are looking for people that know something like react or view.  Let’s get into both of these but let’s start off with the front-end JavaScript framework.

01.Frontend JavaScript Framework

Each of these frameworks has like their own ecosystem.F frameworks give us a lot of advantages such as reusable components, a more organized UI,  page interaction, better for collaboration and writing clean code.There are a bunch of other ones but these are the framework that you’re going to find jobs with.

(01) React JS –  (Still the most popular and easy to learn)

Technically React is a library and still seems to be the most popular. It has an easier time finding a job because there are a lot of React jobs but there’s also a lot of React developers.  So you can’t just go by that what I say is to try each one and pick the one that you really click with. The one that you understand the easiest.

(02) Vue JS –  (Really gaining traction and easy to learn)

 This has really been gaining traction for the past couple of years and it’s becoming really popular. Vue is the easiest out of the 3.

]

(03) Angular –  (Mostly used in enterprise and steep learning curve)

 – Angular is still used a lot in like bigger corporations and enterprise-level and it has a pretty steep learning curve. It’s structured, uses typescript and it’s a full framework.

Note: Try to one or two projects with each one and then picking one and sticking with it.


11. Svelte

This is really popular now in 2019 going into 2020 and a lot of people think Svelte as a framework but it’s not. It’s a JavaScript compiler that works differently when you run your Svelte code through the compiler and it produces pure readable vanilla JavaScript.

When you use a framework you have a whole bunch of stuff that specifically has to do with that framework and it’s much more bloated than Svelte.

(01) Write less code –  Svelte produces readable vanilla JavaScript which is much lighter and it’s very performant.

(02) No Virtual DOM

(03) Very Fast


12. What and Why State Management

When building a front-end app or user interface, a lot of the time we have components that need state. This might be a list of users or maybe you have a modal component and it has an open & closed State but sometimes you need app-level state.

So that you can share data across multiple components and each framework has different ways of doing this. We have libraries that are specifically built for this.

(01) React (Redux, Context API with Hooks)

Often uses redux and although Redux is completely separate from React and very popular to use with react. There’s a library called react Redux that connects them both together.

For 2020, developers will use less of these third-party state managers. for instance, react has the context API and if you use that along with some of the newer hooks (React introduced hooks a little while ago).

There’s a hook called useReducer and useContext. If you use those paired with the context API, you can get the same effect that you get from redux without having to use a third-party library. So that’s what I’m seeing has a trend in 2020.

(02) Vue Js – (Vuex) 

Vuex is a state manager built for Vue.  Vuex highly integrated with Vue and it’s made for Vue. It’s much easier and a less boilerplate than something like redux.

(03) Angular – (NGRX, Services)  – You can use just services when you need to share data across components.


13. What is Server-Side Rendering?

Now one huge trend that I’m seeing in 2019 going into 2020 is server-side rendering. As opposed to the traditional single-page web app that’s rendered on the client-side.

Because that’s by default when you use something like create react app, it’s generated an app that runs on the client. However, there are frameworks like next js(React) and Nuxt js (Vue) that basically allow you to run react or Vue on the server.

NUXT is basically the same ideas NEXT and it’s just for Vue js. If you’re new to this, this might sound like yet another over-complication. (Framework for a framework) but it actually makes things easier in the long run because it brings you closer to production than using something like Create react app where you just we build the static assets and so on.

(01) File System Routing – If you’re using just regular single page application or react, you need to create all your routes and that can get kind of difficult. But with NEXT or NUXT, can just create like about.js page and put that right in the pages folder and it’ll render automatically when you go to /about.

In PHP also if you create a PHP file, you can upload it and go to that page. that’s one of the best features of server-side rendering.

(02) Better SEO – If you build a standard `create react` app out the application, it’s hard for search engine crawlers to actually see the data because it’s getting rendered through JavaScript after the page loads.

With server-side rendering, the content is already there as if it were a regular HTML file on the server. Some applications don’t really care about it but if you need it, you need to look server-side rendering.

(03) Automatic code splitting 

(04) Static exporting – Create static sites or generate static sites CSS in your JavaScript. There’s a whole bunch of features that you get right out of the box when you use NEXT or NUXT.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Related Articles

Cool Gadgets on Amazon 2019 | Cool Amazon Products

Cool Gadgets on Amazon 2019 | Cool Amazon ProductsG, 0 Comments Today’s, topic about Cool Gadgets on Amazon 2019. Now, let's go and know about those gadgets in more deep. 01. The orange screwThis is one of the most clever and versatile tools you'll ever...

Is Interstellar Travel Impossible? | Interstellar Travel

Is Interstellar Travel Impossible? | Interstellar TravelG, 0 Comments Today's, topic about Interstellar Travel Impossible. Let's go into deep and understand the scientific facts related to this topic. Simply, Is interstellar travel doomed to remain in the...

Smart Retail Technology in IoT – Smart Retail Stores

Smart Retail Technology in IoT – Smart Retail StoresG, 0 Comments Today's topic is about "How IOT Gives Rise to Smart Retail Technology". Simply, I want you to picture your kitchen at home. If you're like most people you can trace many of your...

Stay Up to Date With The Latest News & Updates

Join Our Newsletter

Follow Us