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.
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.
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.
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.
- 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.
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:
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.
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.
you will need to do the following:
- Create a page with bootstrap that has a header, navigation and a main body.
- 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.
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.
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.
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.