What You Need To Learn to Become a Full Stack Developer from Zero

I worked in marketing and data analysis. After a long time, I decided to change career and leave my 8 to 5 job, to pursue a remote job and start a business of my own. After this point, it's difficult to decide where to look for information and what language to start learning first. If you don’t have any previous knowledge this could be an impediment to continue with your goal. And a waste of your time trying to find the right resources to start.

I read a lot of articles and forums, there is a lot of free resources you can use to study online. For this, you have to have the will to schedule and stay focus to read and get the projects done. Here is where most people struggle, to find the time. Try to stay organized and meet your study objectives.

I decided to start with HTML and CSS, even if you don’t want to work as a Front End developer is good to know how it works and their relevance in every web project. HTML is the skeleton of a web page and CSS the style
applied to that skeleton. The result of these working together is what you see every time you reach a website.

To become a Full Stack Developer you will need to learn Front End Development as well as Back End Development. You can start with either, but I recommend you to start with Front End development, which means HTML and CSS. It will help you to know how to structure a web page and how to give it a simple style at first.

I started learning HTML and CSS on January 13th. After two weeks I was able to clone the looks of a website like YouTube or Apple Home Page. You can see my improvement in this GitHub repository.

To do this I started with the following topics and exercises.

1. HTML and CSS Basics

First, you can read through the links on HTML and CSS Basics. You will learn what HTML is and how to use Tags, Attributes and Elements to structure your web page. Also how to apply CSS to HTML, with the use of selectors, properties and values.

• HTML Guide for beginners
• CSS Guide for beginners

You might think there is too much content, but trust me, you just have to start reading. Even if you don’t understand all the concepts, it’s fine.

2. Practice

The best way to understand new concepts is to see it in action and practice with them. In W3Schools are some examples to understand all the lectures in the first part.

• Examples with HTML
• Examples with CSS
  

3. CSS intermediate

Once you understand the basics of CSS, you can go to this article and learn about Classes and ID selectors. Inside there are other resources available to make your code clean.

After reading the article above. There are two powerful concepts that will help you when you are trying to layout a web page. Take your time to learn these topics, they are going to be very useful to built good looking web pages.

• CSS Flexbox
• CSS Grid

You don’t need to remember all the concepts at first, if you get stuck, take a step back and remember where you can find the concept you need. Or you can review this articles when you need help to remember.

• Centering in CSS
• Cheat sheet HTML
• Cheat sheet CSS

4. Other resources

Developer Tools

This is a very useful tool if you want to inspect elements on a web page and see how a particular web page was built, also to track down issues or bugs. This could be one of the best resources you can use if you are stuck and need some inspiration to check what's underneath a web page.

• Video for beginners
• CSS debugging
• Chrome DevTools

Clockify

A difficult part of learning from home is to stay focus, and this tool will help you to see what are you spending your time. Enter everything you do and see if you need to dedicate less time to checking your phone or watching TV.

Text Editors

It’s a program that allows you to open, view and edit plain text. They do not add formatting to text and developers use them to write their code.

• Atom
• Visual Studio Code
• Sublime Text

5. Your first Project

This is a project where you can test your skills. Clone the Google Home Page .

I encourage you to start writing code in projects like this one, so you can learn faster. The more you do, the more you learn.

Note: After finishing your first project you can practice more and test your new skills by cloning the look of a web page you already know like YouTube, Facebook, etc.

6. Here is what you learned

• HTML and CSS Basics
• CSS Layouts
• Where you can practice online: W3Schools
• How to find projects: clone a web page
• Tools to make your journey easier.

This is going to help you start and to have the confidence that learning to code is possible, no matter your age, background or location. Go to your own pace and make sure to master the concepts.

Learning HTML and CSS will give you the motivation you need to accomplish that career change you are looking for in web development.

(Disclaimer: I’m not a full stack developer yet , I’m a student at Microverse)