To become a front end web developer you need to know three core things.
1. HTML – Easy
2. CSS – Moderate
3. JavaScript – Hard – Easily the most important
You then combine those three things together and implement a 4th component which is a JavaScript framework.
Essentially, a JavaScript framework is a set of pre-created tools that you interact with by utilizing your already understood skills in JavaScript to enhance writing JavaScript code
Once you know these fundamentals you can get an entry level Web development job..
One of the main points of confusion is that there are multiple JavaScript frameworks, a few examples include 1. Angular, 2. React, and 3. Vue.
These three frameworks accomplish the same goals and you only use one of them at a time
You only need to know One JavaScript Framework in order to get a job.
My approach is attempting to become
a 3/10 skill level at HTML and CSS
a 6/10 Level at JavaScript // JavaScript Libraries.
.
A Second point of confusion – is between front and back end languages. You don’t need to know any Python, Ruby, or Regular Java to get a front end job, those are all back end languages.
Regarding back end Java – JavaScript & Java are entirely different languages for different purposes you can get a job in one without ever knowing the other.
The jobs are in high demand and the money is good but it is difficult to learn so depending on the person a programming boot camp and in person instruction could be valuable.
It is possible to get a job in 4-12 months depending on the amount of time you put in.
Moving on to a summary of the 3 pillars of web development. HTML, CSS, and JavaScript
HTML
HTML is the layout in Web Development It’s used to organize the page in a block like format and add in things such as areas a user can type text into
<p> <—Tag 1, opening tag p stands for paragraph
You would add tags similar to the ones above and below to mark a paragraph of text in HTML. This text you are reading is the block of text inside of those paragraph tags.
</p> <—Tag 2, closing tag. Notice that the / signifies that it is the closing tag
CSS
CSS styles the HTML
By “styling” the code you’re essentially doing the same kind of stuff you can do in Microsoft Word with a few added steps.
How to we grab the opening and closing <p> </p> tag shown in the HTML section and “style” the text?
*** Inside the first p tag you can see the “Class” Name, this is the link point between the styling we want to do and the block of text. The names must match ***
<p class=”exampleTextClass>
Example paragraph 1
</p>
.exampleTextClass{
color: blue;
font-size: 37px;
}
JavaScript
JavaScript is where you write the core logic for your program and “add functionality”.
This is what most people will tell you and it comes across as very vague. Let me give you a more specific example.
A standard project to do when you first start programming is to create a temperature converter.
The data flow is very simple. It looks like this
user input > formula > output answer to user
All you need to do is-
1. get what the user types into an input box,
2. let the user click a button to execute the temperature conversion and finally
3. output the answer on the screen.
This is where JavaScript comes in.
When you are building a house you use tools that already exist. In contrast, when you write JavaScript you need to build your own tools, these tools you build are called “functions”.
So we need a function, a.k.a. a tool, that converts the temperature.
a bare bones JavaScript function looks like this
function(userInput){
return userInput
}
Right now the function will simply return whatever we enter into it. But-
***we want to return a modified version of the data we entered in***
a.k.a. the converted temperature.
To start, let’s look at the formula for Fahrenheit to Celsius
T(°F) = T(°C) × ( 9/5 ) + 32
So we need to multiply the Celsius temperature by 9 divided by 5 and then add 32 to that, then we get the degrees in Fahrenheit.
one more detail is we need to store the converted number into a ‘variable’ you mark a variable in JavaScript by putting “var” in the code and then immediately after “var” write a name for the variable.
To combine everything, in a JavaScript function the temperature conversion would look like this-
function(userInput){
var convertedTemp = userInput * (9/5) + 32;
return convertedTemp;
}
1. We’re taking that initial, “userInput” and executing the formula onto it.
2. The answer is then dumped into the variable “convertedTemp”
3. this variable is then returned from the function now that the math has been executed and the function has generated the answer.
A finished build of an application would look like what is shown in the link below.
https://www.rapidtables.com/convert/temperature/celsius-to-fahrenheit.html
Hopefully this helps to make sense of what need JavaScript is fulfilling.
To some things up, at its core every webpage is built with HTML CSS and JavaScript. There have been some fancy tools introduced to make these things easier but at the core these are the three main ingredients that come together to get a working website.
What is the best way to learn more?
- www.freecodecamp.org – this is a good site to learn by coding within the browser. I would recommend spending 1-1.5 months doing exercises here.
- www.udemy.com – This site sells more in depth courses on the topics you’ll get introduced to on freecodecamp After that initial month using only freecodecamp I’d recommend spending $50 on a few courses.
- The last piece of advice I want to offer is to not get stuck on any one course or site. There has been times when hearing something described by a different person was extremely helpful on getting the concept to “click” for me.
- It’s always best to practice in small blocks of time, don’t study for 5 hours once a week, instead, study for 20 minutes a day.
Thanks for reading & I hope you’re successful!
1 Thessalonians 5:11
Therefore encourage one another and build each other up, just as in fact you are doing.
This post is related to learning a new subject so the link in to this bible verse is very straightforward. But I also just wanted to say that for some time now I have gotten in the habit of praying frequently for other to win.
Even on days where something frustrating happens and I feel like I got the short end of the stick I still try to do this. Just because I had a bad day doesn’t mean I should be any less enthusiastic about wanting others to succeed.
I want to see people learn new skills that can provide them an easier life, I want others to be encouraged to try to expand their God given minds in the same way I am motivated to, I want others to get excited about new information and making new connections.
It doesn’t need to be learning programming, there’s no one subject that is for everybody. But please, just get excited and interested about something. Building up knowledge about a subject or learning to do something cool will make you feel good about yourself, it will give you something to say to others in conversation, and by learning you are using the mind that God gave you in a productive way. I want the best for you, I want to see you win, I want to see you have a better tomorrow. 🙂 <3