Foundations for Web Development
Tags: webdev, beginners, startup, productivity
Published: 2020-08-26 15:48:27

The original post was on [Foundations for Web Development - Reading Time: 4 Mins](https://www.maxongzb.com/foundations-for-web-development-reading-time-4-mins/) and cover image by [Scott Blake on Unsplash](https://unsplash.com/photos/x-ghf9LjrVg)

# Introduction
I know that web development can be **overwhelming**. We just didn't make it easier for you to pick up. I would suggest that you focus on just eating the elephant **one** bite at a time. Besides, that learn to **chew** your food before taking another bite. In simple terms, just master one piece of technology and expand it through multiple sources of inspiration.

I promise that this won't be another React vs Vue vs Angular on what to choose. Instead, I would explain to you what are the areas I feel you should build a foundation with. While picking your own technologies or specialisation along the way.

# HTML, CSS, Javascript & Git
Regardless of what technology you had to learn to pick up for your web development specialisation. I would first ask you to have a good foundation for the trifecta. Namely **HTMl**, **CSS** and **Javascript**. As these are the core skills that allow you to build upon it to pick up web development technologies. My favourite goto resources for it is either [w3Schools](https://www.w3schools.com/) or [Mozilla Development Network](https://developer.mozilla.org/en-US/). 

Next up is the basics of [Git](https://www.atlassian.com/git/tutorials/what-is-git) commands to store, share & contribute your code as a developer. Despite there are tons of GUI viewers in your IDE or code editors. It's actually much **simpler** and **easier** to do it in the command line when your GUI goes crazy.

# Understanding & Applying Design Concept
You don't really need to be a **designer** to create websites. But you do need to know the [basics of design](https://www.udacity.com/course/intro-to-the-design-of-everyday-things--design101) to create **good looking** & **effective** websites. So that you know on how to customise it to suit the needs for your own work. 

Which you can get your designs from your friendly neighbourhood UI/UX designer or purchasing a [template](https://www.youtube.com/watch?v=WpoTZyyW4sE) for yourself like [Creative Tim](https://www.creative-tim.com/). This can save yourself alot of the **pain** & **effort** to do it yourself. 

Unless you are a **masochist** like me, you can look at either learning [Xd](https://www.adobe.com/sea/products/xd.html) or [Figma](https://www.figma.com/) as a goto choice to create website designs for your website. This could help you get to contribute to design decisions with your designer for your website as well on what works or makes sense when you are implementing it.

# Picking Your Web Framework
Now let's start with looking at your local job listing in your country. To get a gist of what type of technology and payscale. You should use to get a job in it. Do note that **job requirements** is just a wishlist, you can apply for a job at **70** - **80%** of the job requirement. If you have the correct skillsets, education and experience.

Now, it is time for my 2 cents in it. I would recommend you to learn a **backend** web framework first. Namely [Django](https://www.djangoproject.com/), [Laravel](https://laravel.com/), [Ruby On Rails](https://rubyonrails.org/). Which allows you to create a functioning website with ease. 

Once that you had mastered the backend web framework. You can **spice** it up with say [Tailwind CSS](https://tailwindcss.com/) or [Bootstrap](https://getbootstrap.com/) to make it beautiful. 

Moving on, if you would like to earn more or become a versatile web developer. You could pick a front-end web framework like React, Vue or Angular or some other flavour of the month. Which introduces additional skills or knowledge for you to integrate it with your backend knowledge.

# Conclusion
We talked about the need to learn the trifecta of HTML, CSS & Javascript along with Git. Then we moved into the need to understand design so to allow you to edit existing templates and lastly my recommendation of you to master a backend web framework. Before learning front-end frameworks to build upon your foundations to help you to become a better backend or full-stack developer.
 
Being a beginner can be daunting, I just want to let you know that I'm rooting for you. Since you had made a choice to learn to become a web developer. 

I'm providing you with my understanding of how you should do it. Which is not just a mind map on various technologies to learn. I wish that you will stick to the basics & these fundamentals like Avatar the Last Airbender. Who had mastered the 4 elements to save the world with his team.

If you like this article do **sign up** for my [Adventurer's Newsletter](https://maxongzb.activehosted.com/f/1). Which contains interesting content I stumble across over the week in the area of **Python**, **Web Development**, **Startup** and articles that I wrote.

You can also **follow** me to get the **latest** update of my article on **Dev**.

Lastly, are you looking to specialise yourself as a developer? If it's a Yes. I'm giving away my free ebook called ["Picking Your Specialisation as a Developer"](https://maxongzb.activehosted.com/f/5) for anyone interested to command a higher salary or do the work that you like.

# Reference
* [W3 Schools](https://www.w3schools.com/)
* [Mozilla Development Network](https://developer.mozilla.org/en-US/)
* [What is Git?](https://www.atlassian.com/git/tutorials/what-is-git)
* [Intro to Design of Everyday Things](https://www.udacity.com/course/intro-to-the-design-of-everyday-things--design101)
* [Creative Tim](https://www.creative-tim.com/)
* [Should you EVER use a Web Design Template?](https://www.youtube.com/watch?v=WpoTZyyW4sE)
* [Xd](https://www.adobe.com/sea/products/xd.html)
* [Figma](https://www.figma.com/)
* [LevelUpTutorials](https://www.leveluptutorials.com/)
* [DesginCourse](https://www.youtube.com/channel/UCVyRiMvfUNMA1UPlDPzG5Ow)
* [Django](https://www.djangoproject.com/)
* [Laravel](https://laravel.com/)
* [Ruby On Rails](https://rubyonrails.org/)
* [Tailwind CSS](https://tailwindcss.com/)
* [Bootstrap](https://getbootstrap.com/)

* [Full Stack Python](https://www.fullstackpython.com/)