We want to help you become a front-end developer, if you want to know how, read on or join us at our meetups in the National Museum of Computing in Bletchley Park.
Every website today uses the following three technologies: HTML, CSS and Javascript, so you should start with these. You should approach learning these languages in the following order:
If you want to jump straight into action and see how these 3 technologies interact, checkout this beginner friendly tutorial on the basics of HTML, CSS and Javascript (and how the three interact in a single website), on youtube here. The entire tutorial is about an hour long.
As a web developer you will be responsible for building and maintaining content for the web. These includes different devices such as desktop, tablets and smartphones.
Front-end developers work with languages that render (to render means to apper on screen) in the browser (also called a client). Google Chrome, Mozilla Firefox, Safari and Internet Explorer are all clients. HTML, CSS and Javascript are all front-end technologies.
Some websites require a special server (a big computer that serves information), because certain content has to be customized for each user based on their data (for example, if the user is logged in or not). To develop that you will need to become a back-end developer (because most of the action is happening at the back, you can’t see it, unlike front-end, where any changes can be seen in the browser OR client:).
Those who work with both front-end and back-end technologies, are called full-stack developers. A stack is simply the set of tools (both front-end and back-end) that a company uses to build its website.
You aren’t expected to know all of the technologies and programming languages out there, but not matter what you’ll be doing in the future, you should know the basics of HTML, CSS and Javascript.
HTML stands for HyperText Markup Language. It describes the content of the website as well as its structure (what is a title, what is a paragraph and what is a list, etc). HTML is the nouns of the website.
HyperText means that you can jump from one document to the other, or from one part of the website to the other (think Wikipedia), by clicking links.
Markup language means that you need to use a set of tags to define the structure of the language. Tags look like this < > with some text in between. HTML files are saved in a file ending with .html.
HTML looks like this:
<h1>My Super Personal Web Diary</h1>
<p>Dear Diary, today was a really sucky day.</p>
You can start learning HTML for free now on FreeCodeCamp. Another resource is Codeacademy, you can start learning HTML on Codeacademy here.
CSS stands for Cascading Style Sheet and is the design of the website. CSS is the adjectives of the website. With CSS you can set the background colour, create a specific layout (columns) and even do some fancy animation. Like HTML, CSS has a specific syntax (or rules), but instead of tags < > you will use a lot of curly braces { }. CSS files end with .css.
So, if HTML is the content, the words of the website, CSS will determine how the website looks like stylistically. To see some impressive examples of CSS, checkout CSS Zen Garden - you’ll see websites using the exactly same HTML, but different styles or CSS.
CSS looks like this:
h1 {
color:pink;
font-size: 44px;
}
You can learn CSS on FreeCodeCamp (after the HTML chapters), or on Codeacademy.
Now on to Javascript. Javascript is responsible for managing interactions within a browser. It is the verbs of a website. Javascript is not just for front-end developers, even 50% of back-end developers say they use some form of it daily. Javascript helps you load and unload media, create & modify & delete elements on the page and more! Javascript files end with .js.
This is how Javascript looks like:
var title = document.getElementByQuerySelector("h1").color = "blue"
// this will change the color of our header to blue (from pink).
You can learn Javascript on FreeCodeCamp (after the HTML and CSS chapters), or on Codeacademy.
We want get into back-end technologies too much here. If you want to learn more you can either ask one of our coaches or do a quick search online. A good way to start is a learning PHP (server-side scripting) and SQL (database language).You can also use Javascript on the back-end with node.JS. Checkout NodeSchool for free tutorials.
Editor: there’s two main types of editors. IDEs (Integrated Development Environment) or text editors. IDEs give you a ton of functionality that you as a beginner won’t need. Instead, equip yourself with a text editor, they are much faster and can be customized with plug-ins. Popular and free text editor are Sublime Text and Atom. Terminal: for taking care of common tasks and navigation. You can learn the basics of using the terminal and the command line on Codeacademy. Browser: the browser is used to test what you’ve created in your editor and they also help you debug (solve problems) your HTML, CSS and JavaScript. I recommend that you use Google Chrome, the most commonly used browser among web developers.
Other tools: