Web Development Fundamentals 

So, you have decided that you want to become a Web Developer without a degree and you need a structured way of learning to get there, luckily you have stumbled across this article where I will layout a clear pathway for you and a guide on how you can do it.

This guide will work best if you can spare 3 hours per day however any time you can spare is a bonus! 😎. I also strongly recommend that you stick to the order mentioned below as this will prevent you from overwhelming yourself with information.

I have included various different resources as well that will help you learn.

For support and help throughout your journey come and join the community and get help from other developers and people who are walking similar paths to you.

1) HTML

HTML( Hyper Text Markup Language) is a markup language that is used to define a page structure that web browsers understand. It is a fundamental building block and understanding it will pay dividends in the long run. You may find it a bit of a dry/slow subject but it is worth every second you spend learning it. You will learn all about various Tags/Elements that you can create. I recommend learning this and moving straight onto CSS when you have an understanding of the core concepts.

2) CSS

CSS ( Cascading Stylesheet) is what we use to style our web pages and make them beautiful. It is a must learn as you will use this regularly when creating websites and web apps.

3) JavaScript

JavaScript is the programming language of the web that lets us make our websites dynamic and create engaging content. Nearly everything you do on your phone will engage with JavaScript in some way so it is learning it is a must! It is also a really awesome language that will open up a lot of avenues for you in the future.

4) Project Time!

You have now learned the basics and its time for you to create something, doing a project will consolidate your learning and open up your mind to start thinking in a way that will get you asking more questions, which is a good thing πŸ˜„.

Here is a list of some projects, I recommend that you try at least two of these before moving on to the next stage.

Project Ideas

  • Build a 5 page website for a wedding company. This website should feature a contact form that sends an alert message to the users screen when submitted.
  • Create a photography portfolio website that showcases some really cool images. There should be a carousel that lets you view images in a slide show fashion.
  • Build a simple game using HTML, CSS and JS. You can use this flappy birds like clone to start from as a base an then add ideas on top of it. Β 

5) Bootstrap

Bootstrap can be a powerful toolkit in a FrontEnd developers arsenal. Bootstrap is one of the most popular web development frameworks and it can be used to rapidly create layouts and websites using pre-configured CSS classes to make responsive websites out of the box.

It is a handy tool to know and common among start ups and when prototyping new products and ideas.

6) HTTP and How the internet works

Now is a good time to start to learn a bit more about how the internet works, the fundamentals behind it and also what HTTP protocol actually is.

This is a really good video that gives you a really well defined explanation as to how the internet actually works:

How does the internet work
How does the Internet work?
The Internet is the backbone of the Web, the technical infrastructure that makes the Web possible. At its most basic, the Internet is a large network of computers which communicate all together.

HTTP

HTTP is something that you interact with everyday and use constantly as a common way of requesting data from servers. If you are reading this you will have made a HTTP request to get this article - here are some useful articles and videos that explain this really well.

An overview of HTTP
HTTP is the foundation of any data exchange on the Web and it is a client-server protocol, which means requests are initiated by the recipient, usually the Web browser. A complete document is reconstructed from the different sub-documents fetched, for instance text, layout description, images, video…

7) RESTFul APIs and JSON

Websites are usually full of data, think Facebook, twitter, blogs and content websites. In web development we often need to fetch data from somewhere in order to display it on our website/ web app(A Web application (Web app) is an application program that is stored on a remote server and delivered over the Internet through a browser interface).

One way of interacting with data is through something known as a RESTFul API. A RESTful API is an application program interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data and normally interacts with a database.

A common data form that restful APIs use is called JSON. JSON stands for JavaScript Object Notation. JSON is a lightweight format for storing and transporting data, you would have touched on it when learning JavaScript.

8) Project

Time to build something again! Lets use your newly found Bootstrap skills with your knowledge of JavaScript, RestAPIs and JSON to create a simple website that displays users from GitHub on a page that is mobile friendly. Use bootstrap to give you a card layout that the data from github can be displayed in. Β 

you will need to do the following:

  • Create a page with bootstrap that has a header, navigation and a main body.
  • Write some JavaScript code that makes a request to the github api for users
  • Write some code that creates bootstrap card elements on the page with the data from the api in them. Each card should display the name, email and any info you see fit.
Fetch requests in JavaScript
Using Fetch
This kind of functionality was previously achieved using XMLHttpRequest. Fetch provides a better alternative that can be easily used by other technologies such as Service Workers. Fetch also provides a single logical place to define other HTTP-related concepts such as CORS and extensions to HTTP.

9) A FrontEnd framework/library

Now that you have got here you are already in a position to create websites and simple ideas. You now have the skills that you can monetise, I mean there are probably many local businesses near you that still don't have a website and you now posses the skills to build one for them, I think you should ask some local businesses, who knows, maybe it will be the best thing you ever decide to do πŸ˜‰.

A huge amount of websites that you use are actually web apps, not websites(Mind Blown 🀯). A web application or "web app" is a software program that runs on a web server. Unlike traditional desktop applications, which are launched by your operating system, web apps must be accessed through a web browser.

Web apps have several advantages over desktop applications. Since they run inside web browsers, developers do not need to develop web apps for multiple platforms.

The Common web app libraries and frameworks that we use are React, Vue and Angular.

NOTE: You will only need to learn one of these to begin with! My preference would be either Vue or React Β as these are the go to standard at the moment for a lot of new projects, however angular is still a great choice and you should definitely consider it.

React

React is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. It's used for handling the view layer for web and mobile apps.

VueJS

VueJS is an advanced JavaScript framework with an open source code for the development of a user interface. It is one of the most popular frameworks for simplifying web development. VueJS works mostly with the presentation layer. It can easily be integrated into large projects for FrontEnd development.

Angular

AngularJS is a JavaScript-based open-source front-end web framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications.

10) Portfolio and Job Applications

It is now time for you to just Build, Build and Build some more. Create projects using all that you have learned. Here are a few that I recommend you give a try:

  • Build a web app that shows off various stock market data
  • Build a blog app that lets you create blogs
  • Build an app that will get the price of some items from an API and let you create watch lists.

Next apply to jobs - you are ready!!!