Web development is one of the hottest jobs you can get right now! A career as a web developer turned out to be quite resistant to the pandemic troubles and made it even more desirable. Everyone is talking about IT, and everyone wants to be that guy that says: “I’m a software developer! I make a buck load of money, work from home whenever I want, and play table tennis on my breaks!”
But how to do it? How to cross a barrier to the promised land? That is what we are here to explore. Getting started isn’t easy, and if you are nubby, you will for sure have trouble even understanding what job descriptions mean. The good news is, there are a lot of niches in the software development industry, and you don’t need to know all of them. Web development is a great starting point, and learning a couple of technologies can be enough to get you on the right track.
Let’s take a look at a couple of technologies you will need to get a handle on to make a good start.
These will be necessary for every path you decide to take in web development. The next step would be to learn ReactJS, Angular, or Vue, but taking these steps without the HTML, CSS, and JavaScript would be confusing, unpleasant, and very messy.
To make it as simple as possible:
- HTML creates construction to hold pieces of the web pages
- CSS defines what colors, shapes, and animations will look like
- JavaScript adds dynamic content and usability
These sentences can seem simple to a software developer, but for rookies they are too abstract to comprehend. Online tools can help you put these statements in action because practice makes it perfect (for now, we can settle for understandable). The one I prefer is JSFiddle.
Let us start with a simple example:
You can type this example as is in the JSFiddle and try it out by yourself. Now, let us explain what all this means.
HTML tags are <html>,<head>, <style>, <body>, <h1>, <button> and <p>.
Inside <style> are CSS elements. They will tell us that <body> will have lightblue background colour, <h1> will be white, and paragraph <p> will use font Verdana and its size will be 20px.
Tag <button> has its type (type=“button”; there can be some others) and onclick which tells us what will happen when button is clicked. And what will that be? Some JS will be triggered. Let us take a closer look on the inside of ‘document.getElementById(‘demo’).innerHTML = Date()’.
Date() is a JS constructor and will figure out and return current date and time. This result will be placed somewhere on the web page. Where will that be?
JS has the object document that represents your web page. This means it represents all the HTML tags in the page.
Peace of code document.getElementById(‘demo’) will find the tag with id equal to demo, and innerHTML will place result of this JS code inside the tag. Notice that paragraph is marked with demo and ‘<p id=“demo”></p>’.
Best advice I can give you is to try this out for yourself. Go to JSFiddle and play with this code, make something fun and enjoy yourself. Next time, we will explore details of JavaScript, Visual Studio Code (one of the most popular code editors), and we will explain how ReactJS, Angular and Vue continue the story of the Web development.
One thought on “Nerds of the rocks: Getting a handle on the web development basics”