Become a Front-End Web Developer in Six Months

Getting Started

In your first six months to become a front-end web developer, you will get a firm grasp on certain web scripting technologies preferably in this order: HTML, CSS, JavaScript, jQuery, and any JavaScript Framework/Library. If you would like to get a job learning React is your bet since it’s more focused on front end development/UI Design (Due to wide adoption of companies using it). However, before even stepping into a framework or library it’s best to get an understanding of vanilla JavaScript first. Although, I do feel jQuery can help you learn JavaScript since it takes some of the complexity out of development while React adds to it. To get started, I would suggest learning a little bit on code academy first or just follow some tutorials on YouTube. A good first project would be to create your own resume website to highlight your work. Then you can create a showcase of single page applications on a separate page.

Create Your First Web Page

You can always get started by doing development on your local machine. Or you can get hosting as there are plenty of free hosting providers out there. Some free hosting providers are Firebase, Heroku, Netlify, and freehosting.com. Although, if you’re not yet familiar with the command line yet, just putting files on a freehosting.com is the easiest way to get started. Although, you could host your site on any service like digital ocean, aws, gcp, or azure but it’s whatever is best for you. Additionally, always remember to put your work on GitHub so that way your future employers can see your work. Furthermore, you will need a code editor in which I recommend VScode and has all the extensions you could desire for free. One of my favorite features about VSCode is Emmet and Multi-cursors which helps you speed up your development time.

Forms and Form Validation

Correspondingly, once you have several pages up and running; it’s time to learn the bread and butter of web systems; Forms. Forms are the information we enter a browser when we sign up for a service like tophack.io, we must enter our information to become a user. Additionally, this information is stored in a database and therefore it’s important to learn SQL or NoSQL type databases. However, if you don’t want this information to be garbage in your database you have to validate it on both ends, in the browser, the server, and the database. Lots of your time as a Developer will be spent doing forms and form validation as this is the most user-friendly way to insert data.

JSON

From here you will want to move onto learning JSON. Most of the time we retrieve data from an API as JSON which stands for JavaScript Object Notation. You can either create your own JSON or retrieve it from a Rest API. On the other hand, there is also XML which is more used by languages such as Java which are called SOAP API’s. Down below I’ve created a JSON car object that has a type, make and model. You can easily get the data by ajaxing the file ‘car_model.json’ or create a variable called car and hardcode it like I’ve done. Then you can reference it like car.type or car.make to get details about the vehicle.

let car = 
{
    "type": "coupe",
    "make": "subaru",
    "model": "brz"
}

Charts.js and Math.js

Likewise, the next thing on the list is Equation plotting, the cool thing about this is using built in libraries to graph charts in JavaScript. As there are many libraries out there you can use such as charts.js. You will also use a math library math.js to do most of the math for you. Who said as a computer scientist we must know math? Well, we just must understand the principles; unless you code video games. Equally similar is to make a simple animation such as a spirograph, you can do this any way you like, as it’s just mostly important to understand that you can build amazing animations on a web canvas.

Drag and Drop

Similarly, you will want to learn how to use drag and drop. Granted that you already learned how to make a canvas. Now it’s time to use the canvas to drag and drop items onto it. If you’ve gotten this far you can accomplish anything from making a game to making a drag and drop business application. As a web developer myself drag and drop is a powerful tool. You can even build a form builder once you get comfortable, store the html in a variable, then increment the element IDs by one using a for loop.

Find Your First Client

If you have made it this far it’s time to look for your first client! Hopefully, you have built a stunning website to highlight to your client your web development talent. Keep in mind that you don’t want to manage their site forever. A content management system like WordPress is great to start with. You can also build on top of WordPress with React by creating a headless CMS and using the WordPress API. In addition, do some research on which content management system is right for you or don’t use one at all. Also, use your coding skills to take advantage of the prebuilt templates to completely customize them. You don’t always have to start from nothing.

Leave a Reply
Previous Post
nmap commands

Port Scanning using Nmap Commands

Next Post

Understanding and Implimenting PKI

Related Posts
Skip to content
Share via
Copy link
Powered by Social Snap
Close Bitnami banner
Bitnami