Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
September 22, 2022 01:50 pm GMT

The Complete Guide to a Career in Web Development: HTML, CSS, Javascript and Web Servers

HTML

What is HTML?

HTML stands for Hypertext Markup Language and it is the building block of all content on the web, and even many web applications. It is a way to represent different types of content, for example headers, paragraphs, links, images, lists etc so that another tool (for example a browser) can display them in a way that is easy for a user to consume.

HTML is primarily concerned with the content its and not its visual style; however there is some overlap and browsers all have their own set of default styles they use when they render HTML content.

If we were to compare it to a house, HTML would be the foundation, the walls, the roof. Things like paint, trim, and even arrangement of the furniture would be someone else's job (for example the interior designer). Our job as HTML is to simply provide those building blocks to the designer.

HTML is a series of elements. An element is composed of three things:

  1. The opening tag - Contains the element name. For example a paragraph tag is <p>. That opening tag can also have attributes inside of it which we will get to in a moment.

  2. The content - Contains anything that goes inside the element. Can be just text, or another element, or multiple elements.

  3. The closing tag - Tells whatever is rendering your markup that this element is finished. Looks similar to the opening tag with a slash character, so a paragraph closing tag looks like </p>. All elements have a closing tag (with a few exceptions called void elements).

So taking what we know now, a paragraph element would look like <p>Hello everyone!</p> and would render on your wep page as simply text. Here's how it looks by default in Firefox:

Firefox Hello Paragraph

When we discussed the opening tag we mentioned the other important thing that an HTML elements can contain are attributes. An attribute provides additional information or identifying characteristics about that element.

A link for example which is defined by an anchor element uses the <a> tag. Of course a link is useless without specifying where you want it to go. The destination of a link is specified with the href attribute.

Attributes are always placed within the opening tag of an element, and follow the rule name="value" with the value in double quotes. So to set the href attribute on our anchor it would look like:

<a href="https://www.google.com/">Link to Google</a>

The content of the element will be the text of the link. When we place this below our paragraph tag, our page now looks like:

Firefox Link to Google

Click on that link will take our browser directly to Google.

Lastly let's take a look at the complete HTML content used to render these examples. The below code shows everything that is required to render out the most basic web page:

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <title>My First Project</title>  </head>  <body>    <p>Hello everyone!</p>    <a href="https://www.google.com/">Link to Google</a>  </body></html>

(Note that technically some of this could be removed and still rendered by the browser, when we say "minimum" we are referring to best practices of good HTML form, not the absolute minimum to get some content to appear)

You are already familiar with the <a> and <p> tags so let's look at the rest of the structure:

  • <!DOCTYPE html> - Simply informs the browser that you are writing valid HTML. This element used to provide more functionality than it does in modern times. Simply including it is sufficient.

  • <html> - This is the root element that wraps your entire page, simply specifying "this is where my HTML content can be found". The lang attribute specifies that the content we are writing is in English, this helps translation tools like Google translate know what language to start with when doing the translation.

  • <head> - This element wraps all the elements that provide information about your web page that don't actually contain any content that renders on the page itself.

    • <meta> - This is a general tag that provides meta information about your HTML, for example above we are telling the browser that our HTML is written using the UTF-8 charset so you can expect any valid character in that set to appear. There are many other meta elements you can use as well.
    • <title> - Provides the title of your web page, you can see this most commonly as the label of your browser tab. This is very important for SEO which we will get to later.
  • <body> - Contains the actual visible content of your site. Differentiate from the <html> element which contains both the visible body, but also the metadata in the <head>.

There is lots more to learn, but this covers the absolute fundamentals. Check out the where can I learn more section to dive deeper.

How do I use HTML?

Here we will look at how you can take your knowledge of basic HTML structure and use it to build something.

Presuming you followed the introduction about setting up VS Code, you are now ready to create your first HTML file.

Note that VS Code is not required for any of this, it's simply a text editor. If for any reason you prefer other code editors like Atom or Sublime they work just as well, and you can follow along exactly the same (just be aware the keyboard shortcuts and example images will not necessarily match up).

Begin by opening the sidebar (Ctrl + Shift + E) right clicking in it and selecting "New File". You can also press Ctrl + N to create a new file.

Our file will be called index.html. The html extension identifies that the file contains HTML, and the name index is also special too. index is the default filename a web server will look for when a browser makes a request. It's not required to name your file index.html, but if you don't then you would specifically need to tell your browser which file to get.

We'll cover this and more in the section on web servers ahead.

Once your file has been created you can copy & paste the code from the first section into it:

index.html

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <title>My First Project</title>  </head>  <body>    <p>Hello everyone!</p>    <a href="https://www.google.com/">Link to Google</a>  </body></html>

We were told this is valid HTML, but is there a way we can be sure? There is!

If you would like to validate your HTML to ensure it meets modern standards you can use W3's HTML validation tool.

Let's paste our code into it to be sure:

HTML Validation

Fantastic, we've verified everything is good to go.

Before we look at getting our code running in the browser, let's wrap up our discussion on HTML. Below are some great free resources for taking your HTML learning further, and I've also mentioned a few key topics you will want to learn more about as you build your skills.

What else do I need to know about HTML?

Semantic HTML is all about using tags that properly describe your content. For example using an <h1> for a header rather than putting your text in a <div> tag. This allows things like web screen readers to better understand that the text is meaning to tell the user. More information below:

Accessibility and Semantic HTML

SEO stands for Search Engine Optimization and it is the field of creating your site in such a way that search engines (mostly Google) can scan them automatically and increase their ranking when users search for relevant terms. Things like semantic tags, page speed, colour contrast, text content and much more are considered when deciding your SEO score. More information below:

SEO

What are the best free resources for learning HTML?

There are tons of great resources on learning HTML out there, and they're free!

  • MDN for a complete resource that covers everything you need to know about HTML

  • The Odin Project HTML foundations portion of the full stack curriculum

  • Codeacademy for a more academic "course style" approach to learning HTML

  • HTML Validator - The HTML markup validation service

  • HTML Can do that? - A great blog post on dev.to showing some amazing browser native features that can be accomplished in pure HTML without CSS or Javascript

Web Servers

Now we are ready to get back to the HTML code we wrote in the previous section. We would like to view the contents of that HTML file in the browser.

But how do we do that? Where exactly does the browser get the HTML code from to display it? We need a way to test and view the HTML we have written.

This section will teach you everything you need to know about how that code gets up and running in your browser. This is not specific to getting it running on our machine, the concepts you are going to learn are exactly the same concepts real web servers use that let us access real websites and web apps from the internet every day!

What is a Web Server?

(Note that although I would consider this sub-section to be extremely important for every aspiring web developer to understand, it's not required understanding to complete this tutorial. If you would prefer to skip understanding how a web page gets to to your browser, you can jump ahead to How do I run a web server?

That said I would highly recommend you at least briefly read through it if only to become familiar with the basic terminology.)

A web server is a fancy name for software on a computer that is connected to a network and has the ability to send content over a protocol called HTTP. Most commonly this is an HTML page, but a web server can serve up any type of data you like.

It can be something running on a farm of supercomputers across the ocean, handling millions of requests per second, or it can be something running on your own machine to practice writing HTML.

Our tutorial, to no one's surprise, will focus on the latter.

Before we get into how to run a web server, let's start with why we need one. A web server exists to provide data to your browser, so that you (the user) can request different web pages and data. The HTML file we created in the previous section is not really any different from a web page you would request on the internet. So how does a web server know which file to send to the browser?

What is a web request?

Domain

When you enter a URL into your browser and press enter, it makes what's called a GET request to a server. Let's pretend that address is https://www.google.com/. Presumably we are trying to get the Google homepage.

How does it know which server, of all the servers in the world, to get the Google homepage from?

A server is identified the same as any other computer, with an IP address. Notice we don't see any IP address in http://www.google.com/.

When a domain name is used, the IP address is acquired through a system called DNS which transforms the domain name into an IP address. There are DNS servers all over the world with giant address books of all the domain names and the IP addresses they are registered to.

Port

So now that we have identified the Google server, your browser makes an HTTP GET request to that server. In addition to the IP address, a request also always includes a port number which helps to identify which process (think which piece of software) that request should go to.

Imagine you are mailing a letter. Think of the IP address as the house your letter is addressed to, and the port as the name of the person inside the house that the letter is for.

HTTP requests by default use port 80, so you don't have to specify it manually. You can still specify the port manually with a colon and the port number. So a request to http://www.google.com/ is equivalent to a request to http://www.google.com:80/. Try it yourself! Anything other than port 80 should give you a timeout error because no process on the Google server is listening on that port (or if they are, they aren't listening for your type of request).

Path

The final part of the URL that is relevant to our example is the path of the data we are requesting. A similar term you might also hear in this context is the route. That's the part that tells the server what data or page specifically we are looking for.

In our example it is the / on the end of the URL which is often referred to as the root directory. Think of it similar to filers and folders on your computer. It represents a path on a file system where you cannot go "up" any further.

In the context of web servers, it typically represents the directory the server is running in. This way it provides a layer of security. If you run a web server in c:\Users\my-server then requests made it it will only be able to access files within that my-server directory (and directories inside of it). Users would not have access to anything in the c:\users directory or above.

Let's give an example. I create a directory (folder) called my-server on my computer, and run my web server software inside that directory. Let's say the IP address of my computer is 127.0.0.1 (this is a actually a special IP that always refers to your own machine, so this is a valid way to make requests to your own machine).

If I enter http://127.0.0.1/ into my browser, the web server will go looking in the root directory, which means the directory the server software was started in. In our example that is the my-server directory. By default most web servers will look first for a file called index.html and send it back to whoever is requesting (our browser in this example). If it finds that file, the browser will render it, if not, you'll likely get an error.

What if we make a request next to http://127.0.0.1/something-else ?

Our web server will now look for a directory called something-else inside of the root directory and follow the same behavior: look for an index.html file. This is how we can create routes on our website. Let's say we put relevant info about our business into an index.html file in our root directory. Then we create another index.html file with our business hours and phone # and put it in a folder named contact-us.

We can now access the main page at http://127.0.0.1/ and our contact info at http://127.0.0.1/contact-us

How do I run a web server?

(This section will cover the basics of how to run a web server on your own computer so that you may test your website/app while working on it. If you are looking for how to actually put your website/app somewhere so it can be accessed publicly by anyone, check out How do I put my website on the internet)

(Furthermore, if you are looking for more information about how to a production web server for a real world website or application that needs to handle both large amounts of traffic and guarantees about service & uptime, then you will want to reach more about a professional web server like Nginx rather than the more hobby-level approaches described below)

We've covered the basics you need to understand about what a web server is an what it does. At this point you should be able to comfortably run one yourself and explain in simple terms what it is doing.

Let's now look at how to run a web server yourself and get the HTML you wrote in the previous section to render in your browser on your machine.

In this section we are going to learn how to add some extensions to the tools you are already using (VS Code or Chrome) to serve up your web content and view it in the browser.

If you would like to learn how to run your own web server on your own machine (which is surprisingly easy) I have written a separate tutorial for this: (Note that this tutorial presumes you have a basic familiarity with the terminal on your machine, at least enough to be able to copy and paste commands)

If that sounds a bit beyond your understanding, then no problem at all! For this tutorial we are going to focus on the absolutely simplest way to simply get your content running in your browser. We will provide three options, choose the one that fits your situation best:

  • Option 1: Choose this option if you have installed VS Code on your machine

  • Option 2: Choose this option if you have installed Node.js on your machine, you understand how to install an NPM package and you want more control over your server than the VS Code extension provides.

  • Option 3: Choose this option if you are using the web version of VS Code, or any editor other than VS Code, or are on an OS besides Windows/Linux/Mac (a Chromebook for example)

  • Option 4: Choose this option if you are on a public computer like a school or library where you do not have permission to install software

Option 1: VS Code Extension

We are going to install the VS Code Live Server extension. Start by clicking the Extensions icon or pressing Ctrl + Shift + X.

Extension Icon

Next search for Live Server or the unique id of the extension: ritwickdey.liveserver and click it, then click install:

Install Live Server

(This is a reminder if you are using the web version of VS Code that this extension does not work, please use Option 2)

Once installed, a Go Live icon will appear on the blue bar at the lower right corner of VS Code:

Go Live Icon

(Another alternative option is to simply right click on index.html and select "Open With Live Server" which is a new option that will appear when the extension is installed)

Regardless of which method you choose, you will be able to view your web page at whatever port the server decides, the default URL being http://localhost:5500.

Local Web Server Live

If you have any difficulty you can refer to the full documentation here.

Option 2: HTTP Server

If you have Node.js installed on your machine and are familiar with the basics of the command line, you can get a simple web server up and running in a few seconds.

Navigate to the folder that has the web files you want to host (usually that means the directory with your index.html file) and run this command:

npx http-server . -p 8080

(Note there is a period character before the -p which indicates "this directory")

That will start the server running in the directory you are in and serve the files. The -p indicates the port which I've set as 8080 which is the default, but you can run your server on any port you choose.

You will be able to view your website's index.html file by visiting this URL:

http://localhost:8080

Obviously change the 8080 if you decide to use a different port. And remember that localhost is simply a special shorthand name for the IP address 127.0.0.1 also known as the home address.

When you are done with your server simply press ctrl+c to close it.

Option 3: Chrome Extension

(Reminder that you only need to choose one option, if you already have your HTML running in the browser then skip ahead)

If you are using the web version of VS Code or another editor and just want to get your code up in the browser, another easy option is the Chrome browser extension. This option requires you to use the Chrome browser.

(If you cannot use the Chrome browser, or would prefer to run your own on your own machine via the command line then jump ahead to option 3)

Start by installing the extension called Web Server for Chrome in your Chrome browser

Next navigate to chrome://apps/ in your Chrome browser. There you should see and be able to click on your new Chrome app.

Web Server for Chrome App

In the menu that appears select "CHOOSE FOLDER" and navigate to your project, the /my-project directory that contains your index.html file inside of it that you created in the first section.

Finally go to the URL that the extension shows in the menu, by default it is . If all goes well you will see your page!

My Page in Chrome Server

Option 4: No server at all

(Reminder that you only need to choose one option, if you already have your HTML running in the browser then skip ahead)

If you are unable for any reason to install software on your machine (or even extensions in your browser) then we still have an option for being able to write code and test it in the browser.

The title of "no server at all" is a bit of a misnomer as there is still a server; it's just being run by someone else and you are simply providing the code to be served.

This option would technically work even for a device like a phone or tablet.  Though I would not recommend trying to code on a small touch device; I will say that maybe a tablet with a big enough screen and a bluetooth keyboard you might be able to get yourself a viable environment for practicing (if you have no other alternatives).

In the first section of this tutorial we use Codepen to demonstrate how to quickly write some HTML, CSS and Javascript. Unfortunately Codepen does not provide an easy free way to mimic the file structure of a real project.

For this example we are going to use Replit. It's an absolutely fantastic tool that supports browser-based coding environments in all kinds of programming languages. It does require you to sign up however, but doing so will give you the big benefit of being able to save your projects, share them with others, and come back to them later.

Start by navigating to https://replit.com/ and creating an account. Once you are logged in you will see a Create option with a + button:

Replit Create Project

Click that button and you will have a number of templates you can choose from the dropdown. Select HTML, CSS, JS:

Replit Templates

At this point you will have your own web editor that looks quite similar to VS Code. On the left are all your files generated and setup for you, with default templates provided. GO ahead and replace the content of index.html with our example and press the Run button. You will see the same output that we have on our local server:

Replit Running Example

You now have an environment you can continue to follow along and write code in directly in your browser.

In future tutorials (and as you learn more and your projects get more complex) you will likely begin to run into limitations of what you can do with this tool, but if your goal is to learn the fundamentals of HTML, CSS and JS then this tool can easily take you the majority of the way if you need it to.

What else do I need to know about web servers?

Some topics related to web servers that are worth learning about as you build your skills:

What are the best free resources for learning web servers?

There are tons of great resources on learning HTML out there, and they're free!

  • MDN again is your best friend for learning the fundamentals.

  • When you are ready to learn how to configure your own real web server then I would suggest a Digital Ocean Droplet. That page might look overwhelming, but it's just a fancy name for remote access to one of their computers you can put your web content on, and let other people access. They have a great tutorial on setting up one of the most popular web servers called Nginx (pronounced engine-X).

CSS

At this stage of the tutorial we are operating under the assumption that you were able to successfully get one of the three options for running a local server up and running, and you have the ability to view your HTML in the browser.

In this section of the tutorial we will begin to learn about how we can style our content with CSS.

What is CSS?

CSS stands for Cascading Style Sheets and it represents a syntax for describing for HTML content should look. Someone who is well versed in CSS can take the same HTML content and make two completely different looking pages out of it, such that you might hardly recognize it comes from the same HTML source.

A great resource to demonstrate this idea is CSS Zen Garden. On the right side of the page are links you can click on to apply different CSS stylesheets to the site. The HTML content doesn't change, but with the power of CSS each design feels like an entirely different site!

Before we discuss the concepts, you should be familiar with the most basic syntax. Let's begin with a simple example of some CSS, and explain what it is and how it works:

p {  font-size: 18px;  color: green;}

Take a look at what happens when this CSS is applied to the HTML from the example in our previous section:

CSS Simple Example

(Note you don't need to create any files or do any coding along with this section, we are just using this as an example to learn the syntax, you will learn how to create your own .css files and add them to our project in the next section)

It should be fairly straightforward what has happened based on the example above. Our "Hello everyone!" text has been formatted with the styles we described in the CSS.

These style descriptions like color: green are calledCSS properties.

Properties

CSS properties are combination of a name (e.g. color) and value (e.g. green) separated by a colon that describe what styles to apply to the elements you have selected.

There are more properties out there than any one person is likely going to learn in an entire career. Fortunately you do not need to learn them all. Many of them are either not supported anymore, or their use is strongly discouraged.

Focus on trying to learn the core properties well rather than trying to learn a lot of different properties. Like many things in life you'll find than a small number of them end up comprising the vast majority of usage.

Here is a hand picked list of the most common properties you will encounter, and the most important ones to learn (the rest can be picked up as you encounter them):

  • display
  • position
  • box-sizing
  • width (including min-width and max-width)
  • height (including min-height and max-height)
  • margin
  • padding
  • border
  • color
  • background-color
  • background-image
  • font-family
  • font-style
  • font-weight
  • z-index

MDN also has a slightly larger opinionated list that you can use as a quick reference to learn about these and more.

Selectors, Combinators and Specificity

In our CSS example above, why did the styles apply to the <p> element and not the <a> element? The reason is CSS selectors.

In our example we are using a tag selector for the p tag. You can see that before the opening of the first curly brace p {. This will apply all styles in that block (between the curly braces) to all <p> elements on the page.

Selectors are one of the most basic features of CSS, they describe which specific elements that your styles should be applied to; but what happens if multiple selectors try and apply the same CSS property to an element?

The default is that the styles that come later would overwrite. So in the example:

p {  color: green;}p {  color: red;}

All <p> elements on the page with this CSS would render as red. This is where the concept of the cascade in Cascading Style Sheets comes from.

However this only applies if the selectors are exactly the same level of specificity. They are in this example because they are identical (each one is a tag selector for <p> tags.) There are many different kinds of selectors though, and ones that are considered more specific would take precedence even if they came earlier on the sheet.

Specificity is what determines which property gets applied to an element in a scenario where a property is set from more than one selector.

Let's take a look at each possible level of selector in order of specificity. This means that each one of the examples below is more specific than the last, so it would override those styles even if they appeared first on the style sheet:

Global Selector

* {  color: green;}

The asterisk is called the global selector and it targets every single element in your HTML. There are not many cases when you want to apply a style to every element in your page, so it doesn't get used too often.

It can be handy for debugging, for example to place a border around every element on your page to help quickly get a visual indication of the size of eah element.

Tag Selector

p {  color: green;}div {  width: 100px;}

The above example shows two tag selectors. It will apply a green color to all <p> elements on the page and a height of 100px to all <div> elements.

If you used the * selector to set the color of all elements, this would overwrite that color value for p and div tags.

Class selector

p {  color: red;}.example-class {  color: green;}
<p class="example-class">I will be green</p>

The class selector uses a period . before the term of your selector and will target all HTML elements with that term on the class attribute. In our example the term is example-class but that term can be anything you like.

The class selector is more specific than the tag selector, so green is applied.

ID Selector

.example-class {  color: red;}#example-id {  color: green;}
<p class="example-class" id="example-id">I will be green</p>

The ID selector uses a pound symbol # before the term of your selector and will target all HTML elements with that term on the ID attribute. In our example the term is example-id but that term can be anything you like.

The ID selector is more specific than the class selector, so green is applied.

Inline styles

#example-id {  color: red;}
<p id="example-id" style="color: green;">I will be green</p>

This is not a selector per-se, since it gets set directly on your HTML element as an attribute rather than within your CSS.

HTML elements all have an attribute called style that allows you to set CSS properties directly. These properties are so specific they will override even ID selectors.

It can be convenient to quickly set styles directly on the element, however you should be cautious as it is often considered a bad practice. The reason being that they are difficult to override elsewhere, and that they exist outside of your stylesheets. Having styles in more than one location can make it difficult to reason about how styles are being applied.

!important

#example-id {  color: red !important;}
<p id="example-id" style="color: green;">I will be red</p>

Often called the nuclear option when all else fails and you can't figure out why your styles are being overwritten, CSS supports a very powerful option called !important that essentially says this style cannot be overwritten.

Notice in our example it even takes precedence over inline styles.

!important is nearly always considered very bad practice for reasons that should be obvious. The entire concept behind cascading style sheets is that styles are designed to be overwritten at different levels of specificity. !important breaks that model entirely.

To give an example: consider a scenario where your downloaded a library of "cool buttons" that looked fantastic and fit the needs exactly for your clients product. Your client says "they're perfect, we just need them to be blue instead of green". You find out to your dismay the button library author used background-color: green !important; when styling them. There are ways around this, but your job has just become significantly harder than it needed to be.

In summary, avoid !important entirely unless you are absolutely sure you know what you're doing.

Multiple Selectors

You can combine styles together and apply them to more than one selector with a comma. For example:

h1,h2 {  font-weight: bold;}

Will apply the bold style to all h1 and h2 elements on your page.

Combinators

The last aspect of CSS we need to address before going into our example is combinators.

Combinators work in tandem with selectors. They allow you to chain multiple selectors together to get more specific. They are applied most often when dealing with nested elements. For example:

div {  background-color: black;}p {  color: black;}div p {  color: white;}div > p {  font-size: 20px;}
<p>I am black text</p><div>  <p>I am white text and 20px size</p>  <section>    <p>I am white text but regular size</p>  </section></div>

There are two combinators in this example:

  • div p
  • div > p

The first one uses the space combinator, a space between selectors means all children of elements targeted by the first selector. So styles in div p would apply to every <p> element that is a child of a <div> element.

In our example this is necessary. Since we gave our <div> a black background, the text in the <p> elements would be invisible if we did not set it to white.

The second one uses the angle bracket >, it means direct child of this element, so any <p> element that is a direct child of a <div> element will be targeted with the styles we write here.

Notice the word direct in this example only applies to <p> elements that have a <div> as a direct parent. Our first <p> has no parent and our third <p> element has a <section> as a parent, so only the second one has the font-size: 20px style applied.

You can find a great quick reference for selectors and combinators here.

Now that we have covered all of the basics, let's take a look at a real world example that we can continue to iterate on for the remainder of this tutorial!

How do I use CSS?

There are three primary ways to apply CSS to your HTML:

  1. Using the <style> tag
  2. Using the style HTML attribute
  3. Using a .css file

Option #3 is by far the most common and nearly always the best practice, however since we are here to learn we'll quickly begin by showing an example of options #1 and #2:

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <title>Example</title>    <style>      p {        color: green;      }    </style>  </head>  <body>    <p>I am green</p>    <p style="color: red;">I am red</p>  </body></html>

The above example demonstrates the use of the <style> tag in the header applying a green colour to all <p> elements.

Within the HTML itself the second <p> element has a style attribute which is setting the color property to red. This has more specificity than the tag selector, so the second paragraph element will render as red.

To demonstrate the third and most common option (a .css file) we are going to construct a more complex example and take the time to break each selector and property down to get some experience working with something that looks more like a stylesheet you might encounter in a real world site.

Begin by creating an index.html file in the root directory of a project (you can use the one you already created it you are following along) and paste the following code into it:

index.html

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <title>My Animal Blog</title>    <link rel="stylesheet" href="style.css" />  </head>  <body>    <header>      <h1>My Favourite Animals</h1>      <h2>Enjoy these furry friends</h2>    </header>    <main>      <article class="card">        <img          src="https://res.cloudinary.com/dqse2txyi/image/upload/v1657421273/blogs/intro-to-web-development/cat_k4fcww.png"          alt="Cat Playing Chess"        />        <div class="card__container">          <h3>Chess Cat</h3>          <p>He's planning his next move.</p>        </div>      </article>    </main>    <footer>      <p>&copy; 2022</p>    </footer>  </body></html>

The key line to look at in the above example is this one:

<link rel="stylesheet" href="style.css" />

This element tells your browser that you want to link an external stylesheet, and the filename is style.css. It looks in the root directory by default. As of right now, you do not have a style.css file in the root directory of your project.

Without any CSS at all, this page looks like:

Unstyled Page Example

Not too bad, but we can make it look a lot better. Create a new file in the root directory next to index.html and call it style.css.

Leave it empty to start. We're going to add some CSS little by little to clean it up a bit and give you an idea how to craft an extremely simple, but still modern and responsive page design. We'll also explain each piece in detail as we go.

So feel free to add each of these pieces to your style.css file as you read them, one after the other (it's not necessary though if you would prefer to just read, we'll post the full file contents at the end).

So let's begin styling our animal blog:

body {  color: #333333;  font-family: Helvetica, sans-serif;  margin: auto;  max-width: 800px;}

The body in HTML defines where all the content is. The body is inside the <html> element, which by default will span the entire width of the page.

Let's look at each property in the body tag selector, to see what they do and why we chose them.

max-width: 800px;

Typically in many modern web pages you'll find it common for the actual content not to span the entire width of a user's screen. People often use very wide monitors these days and it can be challenging to read content, particularly text that spans from one edge to the other.

For an easy example of this go to Google and search. You'll see that the search results only span a small portion of the screen before the text wraps (on my 1920px monitor the results are 600px wide).

We are doing something similar for our blog. Body content can only be a maximum of 800px wide, and will shrink down automatically on smaller screens.

margin-auto;

With only max-width our content will still be left justified on the page. We would like it to be centred. That's what having an auto margin does in this context.

On the top and bottom it will do nothing since the default height of <html> is only the height of our content; however the width is the width of thr full screen. The difference between that screen width and the 800px content will automatically become margin on the left and right.

This has the result of placing the content in the centre.

color: #333333;

Pure black text on a pure white background creates a fairly stark contrast. It's not terrible, but it's fairly common to use a not-quite-black color instead of black for text on a white background.

Here we have chosen a hex colour that is close to black, but not quite.

font-family: Helvetica, sans-serif;

After setting the color we are also setting the default font of our site. We've chosen Helvetica because it is one of the safe web fonts that are available on the majority of web browsers and operating systems.

The font-family property allows as many font names as you like separated by commas. It will chose the first one it finds from left to right that exists on a user's system. The final option sans-serif simply says worst case give me any sans-serif font you have.

Here's a look at what we have so far with our body styles:

CSS Example 1

main {  margin-bottom: 40px;}header,footer {  text-align: center;}h1 {  font-family: Arial, sans-serif;}h2 {  font-style: italic;  font-weight: lighter;}

margin-bottom: 40px;

We added this to give a bit of space at the bottom of all the main content before the footer, so the copyright symbol doesn't press up directly against the text.

text-align: center;

As described, this centre aligns the text in the header and footer. Since the header includes both an <h1> and <h2> element each one will automatically inherit that property.

font-family, font-style, font-weight

Each property sets the font properties as described.

Similar to the previous, but now our fonts are updated and our texts are centred:

CSS Example 2

.card {  width: 350px;  margin: auto;  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);  border-radius: 10px;  overflow: hidden;}

width: 350px;

We are going to set our card elements to be 350px wide. This is simply a value I have chosen based on common screen sizes. Very few modern smartphones have a width smaller than 375px, so setting our cards to 350px means they will fit nicely (without having to be shrink) on nearly every device.

margin: auto;

Used again for centring, this time to centre the card inside the <body>. Since the card is 350px and the body is 800px this will set margins on either side to fill the difference and centre the element.

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

Easily the most complex of all our properties, but a good example to break down because it will not be uncommon to encounter this type of property in your CSS journey.

First the property itself, box-shadow creates a shadow like effect around the edge of an element. The thickness of it depends on some numeric values. In this case it is the four numeric values you see 0 4px 8px 0

Whenever you see a CSS property with four consecutive numeric values it typically refers to the sides of a box in clockwise order from the top. This image from MDN illustrates:

CSS Four Side Properties

So in our example, there is no shadow on the top, 4px on the right, 8px on the bottom and no shadow on the left. In CSS when using the number 0 it is standard to leave off the unit.

The final fifth value on box shadow indicates the colour. For an rgba colour 0, 0, 0 is black and the final value is the alpha; think of as the opacity. That's what makes the shadow look more natural and diffuse rather than a solid black at 0.2.

If you managed to follow this one, well done! If not, don't feel bad about skipping over it. This type of syntax will grow on you naturally as you encounter it more often.

border-radius: 10px;

A border radius will give us rounded corners. The larger the value the more rounded. It's common to use this property to create circles by giving a radius of 50%. For our case 10px give a nice rounded edge to the card.

overflow: hidden;

This is necessary to keep the image from going over our rounded corners. Since the image has rectangular images and sits above the card <article> it would hide the rounded corners of the card.

Hiding the card's overflow keeps the image inside the card and the edges visibly round.

.card > img {  width: 100%;  height: auto;}

Setting the width of our image (using the direct child combinator) to 100% will stretch it to the edge of its part, the 350px card. Setting the height to auto ensures that the aspect ratio remains correct.

.card__container {  padding: 16px;}

For our class selector here we have used a common practice to help with CSS scoping. Imagine we had just called this class container. It's a pretty common term, what if we have a container somewhere else on the site? The styles of that container class would overlap and mix unintentionally with these ones.

I've chosen to prefix the class name with the name of the parent card with two underscores between. This is a common practice based on a methodology called BEM or block-element-modifier.

Essentially it's just a way of naming things to avoid unintentional collisions between unrelated elements. There are many different ways of doing this, you should choose whatever feels right to you as you gain more experience.

The property itself padding: 16px will create a buffer of space inside the border of the element. This keeps the text from pressing up against the edge of the box border, and makes things look a lot cleaner.

Now finally with all properties applied, or styling for this example is done. Take a look:

CSS Example 3

What else do I need to know about CSS?

The "cascade" is how CSS decides which styles actually get applied to an element when multiple different rules are applying values to the same property.

The box model describes the way every element in CSS is rendered on the page and all the factors (padding, margin, border) etc that go into deciding its size and how it flows with the rest of the content.

Flexbox is one of the most popular ways of laying out content on a web page. Modern browsers will support Grid which is even more powerful for full 2D layouts, but any modern CSS developer must understand Flexbox when contributing to web projects professionally:

Media queries are used to change which CSS styles are applied depending on what media the user is using to view it. Most commonly used to change styles for mobile devices.

There are many different units in CSS (px, em, rem, etc) and it's important to understand the difference between them.

What are the best free resources for learning CSS?

Javascript

What is Javascript?

Javascript is a programming language, originally developer to run code in web browsers to make pages more interactive. Since then its potential usages have expanded significantly, however for the purposes of this tutorial, web page manipulation is the use we are going to focus on.

How do I use Javascript?

There are a lot of ways to use Javascript. If you just want to write your very first code you can do so in a matter of seconds. THe quickest and easiest place to write and run Javascript code is directly in your web browser.

Hit the F12 button to open up the browser's development console (alternatively you can look for a "Dev Tools" option in your browser's settings menu).

It will open be an attached bar, on either the bottom or the right side of the browser window (depending on the browser). You will see a number of tabs across the top, these values will vary between browsers, but all the major ones (Edge / Firefox / Chrome) will have a tab called console as highlighted in the below screenshot.

Browser Console

Within the browser's console you can type and run any code you like. We'll begin by running the simplest possible Javascript code, the traditional "hello world!" program. Type the following into your browser's console and hit enter:

console.log("hello world!");

Your output should match what you see in the screenshot above. Below the code the text "hello world!" is printed out. Your code asked for the browser's console to use its log method and print out the "hello world!" string (a string is a sequence of text characters).

Strings are a primitive value in Javascript. A type of data that is built-in and supported by the language. Another example is the number data type. You can read more about primitive data types here if you like.

Now as you can probably imagine, very few people write their Javascript directly in the browser console. For many reasons, but the simplest of which is that the code is gone as soon as you close your browser. We'd like to be able to write some Javascript that sticks around! To do that we need the HTML <script> tag.

Before we return to our code from the previous section, let's use the simplest example we can. Create an index.html file that looks like the following:

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <title>My First Javascript Project</title>    <script>      console.log("hello world!");    </script>  </head>  <body>    <p>My Javascript Test Page</p>  </body></html>

Notice that we have included some Javascript code in the <script> tag? Try opening up your page on your local web server and checking your result. You should see the "My Javascript Test Page" text from the body as expected, but if you open your browser console again you will see your message.

Just as before, using the console.log function we have instructed out browser to print the "hello world!" string in the console.

Javascript Test Page

Great, but there's still one final step. Similar to CSS, although originally the standard was to write Javascript code directly in your HTML, at some point everyone realized that it made more sense to separate it into its own file. Let's look at how to load a Javascript file into our site.

Begin by creating a script.js file (again the filename doesn't matter, you can call it anything you like as long as it ends with a .js extension):

script.js

console.log("hello world!");

And then update your HTML file:

index.html

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <title>My First Javascript Project</title>    <script src="script.js"></script>  </head>  <body>    <p>My Javascript Test Page</p>  </body></html>

Notice how our <script> tag changed:

<script src="script.js"></script>

The src attribute is the filename and path of the file that you want to load.

Save both files and refresh your index.html page. You'll see once again that "hello world!" appears in the console, but this time the code is being loaded in from the .js file.

At this point you now have the knowledge of how to set up a working Javascript environment and run any code you like. Of course this is only the tip of the iceberg, the ocean of JS is very deep, but the wonderful thing is that you can even as a beginner you can accomplish a lot with just a little.

Teaching the Javascript language itself is beyond the scope of this tutorial (I would highly recommend MDN's tutorial as usual for that) but we will take the time to explore just a little bit deeper into some of the most common use cases.

One of the main usages of Javascript is for manipulating the DOM. The DOM is a term you will come across frequently in web development and it can be a little confusing at first, but we'll make sure to describe exactly what it is in the next section, and how you can use that knowledge to make your web pages more interactive.

The DOM

What is the DOM?

The DOM stands for Document Object Model and most simply put it just means the actual structure of the page built by your browser when following the instructions described by your HTML.

Think of your HTML file as the blueprints of a house, and the DOM as the house itself.

You can use a single set of blueprints (HTML) to build as many houses (pages in the browser) as you want. Maybe in one of those houses you might choose to change the colour of the exterior paint from white to blue. This change of paint colour would be analogous to what Javascript does.

When you change the paint colour of your house you change it on the house itself, you don't necessarily update the blueprints to say "all houses must be blue." Similarly, when you use Javascript to change the background colour of your page, you are changing it on the DOM and it's updating the background colour of the page in your browser. It's not changing the HTML file itself.

The DOM is represented in the browser as a tree structure. Don't worry if that looks confusing, you've already used the structure before when writing your HTML. Your elements have a hierarchy and elements can be nested inside of other elements. This represents the tree structure. All elements (except for the <html> element) have a parent element.

How do I view the DOM?

Browsers make it very easy to take a look at the DOM directly. Open up your web page again and right click on the "My Javascript Test Page" text. You will se an option to Inspect. This option is available on all browsers.

Browser Inspect

Inspecting the element will open up the dev tools console, but this time it will default to the DOM tab (it may be called "Elements" or "Inspector" depending on your browser.) Here you can see the DOM structure that has been built by your browser based on the instructions provided by the HTML.

DOM Example

With a simple page it is likely that the DOM structure will look identical to your HTML file. This isn't absolutely necessary though. We could have some Javascript that changed the DOM structure after it has built so that it no longer looks the same. Let's try that now.

Click on the Console tab of your browser's dev tools like we did before so that we can write some Javascript. This time, instead of using the console.log function we are going to call a different function.

All browsers provide Javascript with an interface for interacting with the DOM through code. You can change, add, remove, clone, and generally just do almost anything you can think of with the elements on the page.

First type the following code into the browser console and press enter:

document.querySelector("p");

When you hit enter you will see the result of your code directly below, it looks like a little <p> element.

Query Selector

Let's break this line down and see exactly what it's doing:

  • document - This is a Javascript variable provided by the browser. It represents a reference to the page you are currently looking at (for example in your current tab). You can use it to find out all kinds of information, for example the width of the user's page, the current URL, and many more. In this example we are using it so we know which specific page to search for the element we want to change.

  • querySelector - Is a function that exists on the document. It's an incredibly powerful function that allows you to use CSS Selectors that we have already learned about to target particular elements on our page with Javascript. It's great because it lets you leverage skills you already learned in CSS and apply them to Javascript.

  • "p" - in this context "p" is a Javascript string that represents our CSS selector. As you may remember, just p on its own is a tag selector. Our goal is to select the <p> element on our page. Although this is a very simple one, you can use any kind of CSS Selector you like. For example document.querySelector("#example") is a valid function that would get a reference to any element with id="example" that exists in the DOM.

So when you combine the three of these together you get a Javascript function that searches the DOM for a <p> element and returns it to you (if there is more than one <p> element on the page it will return the first one it finds, starting from the top and moving down the tree).

Once you have that reference you have the ability to modify it. As we mentioned before we just want to change the content that is inside of the tag, the text that says "My Javascript Test Page".

When you ran the querySelector function in your console you got that little <p> element returned on the next line. If you haven't done so already click on it. You might be overwhelmed at first by try not to be. There are far more options and bits of information on a DOM node than the average developer will ever need. Just let them wash over you like background noise.

Look for one called innerText that should have a string version of the text that we put inside of our <p> element. This is the one we are going to update to change our page.

(In case you are wondering why we chose innerText instead of innerHTML, which looks exactly the same at a glance, the answer is that if you are just working with text (like we are) rather than adding new HTML, then innerText is safer (though both would technically work). More information here if you are curious)

DOM innerText

So now that we know the element that we want to change, how do we change it? When we run our querySelector we get that <p> element back, but we don't know how to change it yet.

There are a number of options available, but this would be a good opportunity to introduce the concept of variables. You can use variables to store information in your program that you will need at a later time.

Let's demonstrate how to save a reference to our <p> DOM node in a variable:

var myParagraph = document.querySelector("p");

This is the same code as before, except this time we have declared a variable that we've named myParagraph and set it equal to the paragraph node in the DOM. This gives us an easy way to reference and make changes to that node.

To bring it all together, the code to update our paragraph node on our page looks like this.

var myParagraph = document.querySelector("p");myParagraph.innerText = "My Updated Javascript Test Page";

(If you're wondering about the name of the myParagraph variable, Javascript uses a naming convention called camelCase. This is not mandatory, but is considered a best practice.)

You can run it in the console yourself to see:

Updating the DOM

Now that we've seen how we can interact with the DOM, let's move this code over to our script.js file so that it runs every time we load the page. With this in place you will essentially never see the "My Javascript Test Page" text, since the script will run immediately on page load and replace it with the "My Updated Javascript Test Page" text.

There are two necessary steps. First, update your script.js file:

script.js

var myParagraph = document.querySelector("p");myParagraph.innerText = "My Updated Javascript Test Page";

And a reminder that your index.html should look like:

index.html

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <title>My First Javascript Project</title>    <script src="script.js"></script>  </head>  <body>    <p>My Javascript Test Page</p>  </body></html>

If you load the page now, even though this is the same code we used in the console, you'll notice that it doesn't work! Why not?

The reason it doesn't work in this case is because of the oder we are running it in. In the console we were running our document.querySelector function in the console after the page had finished loading.

If you look at our index.html file above, imagine you are the browser parsing the file from the beginning and working your way down. You will get to the <script> element and run that .js file before you've even reached and created the <p> element. So the querySelector runs, finds nothing, and then its done its job. Nothing is telling it to run again after the page has loaded.

There is a very easy fix for this, all we need to do is instruct out <script> element to hold off and wait to run that code until the page has finished loading. We use the defer attribute for this. Update your <script> element to:

<script defer src="script.js"></script>

And try refreshing the page again., you should see "My Updated Javascript Page" as expected as soon as the page is loaded.

At this point you now have a very basic familiarity with Javascript, including how to run your code and some of the ways it can be used to manipulate DOM nodes on your page (remember that _DOM nodes is just the term used to describe HTML elements that have been built into a page in the browser)_

The last section in our Javascript introduction will go through an example of using Javascript to solve a real-world problem you might encounter.

We'll continue where we left off at the end of the CSS section with our "Animal Blog" and the cool little card that we created.

How do I add Javascript to a website?

Let's say we've been tasked with adding some new functionality to our animal blog. We want people to be able to "like" the images of cats that we are adding to our blog. A user need to be able to interact and make a change to our element, so we recognize immediately that it's a perfect use case for Javascript.

First we will pull up our previous example. In case you don't have it handy, we need three files:

  • index.html
  • style.css
  • script.js

index.html

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <title>My Animal Blog</title>    <link rel="stylesheet" href="style.css" />    <script defer src="script.js"></script>  </head>  <body>    <header>      <h1>My Favourite Animals</h1>      <h2>Enjoy these furry friends</h2>    </header>    <main>      <article class="card">        <img          src="https://res.cloudinary.com/dqse2txyi/image/upload/v1657421273/blogs/intro-to-web-development/cat_k4fcww.png"          alt="Cat Playing Chess"        />        <div class="card__container">          <h3>Chess Cat</h3>          <p>He's planning his next move.</p>          <button onCLick="likeButton()">Like</button>        </div>      </article>    </main>    <footer>      <p>&copy; 2022</p>    </footer>  </body></html>

style.css

body {  color: #333333;  font-family: Helvetica, sans-serif;  margin: auto;  max-width: 800px;}main {  margin-bottom: 40px;}header,footer {  text-align: center;}h1 {  font-family: Arial, sans-serif;}h2 {  font-style: italic;  font-weight: lighter;}.card {  width: 350px;  margin: auto;  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);  border-radius: 10px;  overflow: hidden;}.card > img {  width: 100%;  height: auto;}.card__container {  padding: 16px;}

At the moment we don't have any content in our script.js file, leave it empty for now.

There is a single difference between this file and the final versions of the examples at the end of our CSS section, in index.html we have added a Like button inside the card:

<button>Like</button>

When you serve the page in your browser you'll see it rendered:

Animal Blog With Button

Of course at this point clicking it does nothing. In order to connect some Javascript to our button, first we have to write a Javascript function, give it a name, and finally attach it to our button.

A function is essentially a block of JS code that you don't want to run right away. Another common use for functions is to create blocks of code that you might want to run more than once. Both are great reasons to create a function.

There are a number of ways to create functions as the JS language has evolved over many years. Here for simplicity we will teach the traditional method that works in all browsers. Later as you get more comfortable you can learn about the various shorthand forms.

script.js

function likeButton() {  alert("Like button has been pressed");}

When you load your script.js file, the code inside of this function block (the code between the curly braces) is not run right away. You have to first call the function (sometimes called invoke) which basically means "run the code inside the function when i tell you to". The syntax in Javascript to call a function is the function name followed by open and closed parentheses.

So calling our likeButton function would look like:

likeButton();

The alert function is another built-in browser function like console.log, but this time instead of printing a string to the console, it pops it up in your face with one of those annoying pop up messages. Great for testing, but never ever use them for a real site.

So now that we have this function declared, we can update the <button> element in index.html to call the function whenever the button is click. We learned the syntax for calling the function, so the final thing we need to learn is how to connect them. We do that with the HTML onclick attribute.

The onclick attribute is available and most any elements in HTML, but for accessibility reasons you want to aim to use it primarily on elements that are designed to be click (like buttons or links).

We can tell our <button> in our index.html file to run the function when it is clicked by updating it like so:

<button onclick="likeButton()">Like</button>

As you can see, inside of the onclick attribute we can technically write any Javascript code that we want. Even as much as you want (separated by semicolons) although that gets very messy very fast, and is considered bad practice. If you want a button to perform multiple tasks, put them all into a function and simply call that function.

When we load our page and click the like button we are greeted with:

Press Like Button

Excellent! Our page is interactive now. If your button does not work try some common troubleshooting tips:

  • Verify your script.js is being loaded in index.html like <script defer src="script.js"></script>
  • Verify that you've saved all your files after editing them
  • Check your spelling and case. Javascript is case sensitive so onclick and likeButton are very particular.
  • Make sure you are calling the function: it's onclick="likeButton()" and not onclick="likeButton"

At this point we've verified that we can create a function, and call it by clicking a button. That's fantastic progress. The next step is to update the button to show it has been "liked".

Here is the code for your script.js file. Remove the old function and replace it with the following.

script.js

var likes = 0;// Adds 1 to the number of likes, and updates the text of the buttonfunction likeButton() {  likes = likes + 1;  var myButton = document.querySelector("button");  myButton.innerText = " " + likes;}

Let's break down each piece above to see what it does:

var likes = 0;

We create a new variable named likes that stores a number. This number keeps track of how many likes our animal picture has received so far. By default we will start at zero.

// Adds 1 to the number of likes, and updates the text of the button

This is something we haven't used yet, it's an extremely common part of programming called a comment. They are used to provide information to other team members (or yourself in the future) looking at your code to help explain what the code does.

You do not need to add comments for every line, the vast majority of code (if you use descriptive variable names like likes = 0 rather than x = 0) will be self-descriptive. Comments would only serve to add bloat. Reserve your comments for code that is less easy to understand fro ma quick glance, or to describe the entirely of what a function does as we have above.

Comments are supported in HTML, Javascript and CSS. Each one uses a slightly different syntax:

  • HTML <!-- This is a comment -->
  • CSS /* This is a comment */
  • Javascript // This is a one-line comment
  • Javascript /* This is a comment that can span multiple lines */

In the real world most developers, particularly senior level developers, will actually spend more of their time reading code than writing it, so good commenting and clean formatting are essential.

function likeButton() {

This creates a function called likeButton. The code inside the curly braces will not be run when the .js file is loaded, but we can call the likeButton() function at a later time to run the code when we choose.

likes = likes + 1;

This takes out likes variable and increments it by one. THe new value is equal to the current value plus one. The first time the button is pressed it will become one (0 + 1). The second time two (1 + 1) etc.

var myButton = document.querySelector("button");

As we learned in the introduction, document.querySelect uses CSS selector syntax to search for elements on a page. This will save a reference to the first <button> it finds, so it's operating on the very fragile assumption that we only have one.

If you were to add more buttons in the future you would need to return and refactor (update) this code. One option would be to add a class, say <button class="like-button">Like</button>. You could then target that specific button with the CSS class selector like so: document.querySelector(".like-button"). Notice the . prefix indicating it's a class selector.

For the moment however, the Like button is our only button, and this code gets the job done just fine.

myButton.innerText = " " + likes;

The final piece here is what updates the text inside the button itself. We update and replace the innerText of the button with a thumbs up emoji, then we use the + operator to concatenate the value of the likes variable onto the end of the string.

This can be a bit tricky for newcomers as the + operator is being used for something other than math. It depends on the context. If you have two numbers on either side like 1 + 1 then Javascript will evaluate that as a math operation and return a value of 2.

If either one of those values is a string (or both) then Javascript will instead treat them both like strings and concatenate them together. So "hello" + 1 would evaluate to "hello1". It's one of those fun quirks of the language that becomes second nature after awhile, but it certainly does cause some confusion when first learning. The best way to become comfortable with it is simply repetition and practice.

So for our example, if the button has been clicked once, then " " + likes will be the same as " " + 1 which will be evaluated as " 1" and that's the string that will be placed as the innerText of our button.

Of course we won't know until we try it out. Load the page with the updated Javascript, and start mashin' that like button!

script.js

var likes = 0;// Adds 1 to the number of likes, and updates the text of the buttonfunction likeButton() {  likes = likes + 1;  var myButton = document.querySelector("button");  myButton.innerText = " " + likes;}

Like Button Complete

How many likes can you get to before your hand gets tired? Congratulations, you've created the world's most uninteresting game.

At this point we will bring our discussion on Javascript to a close. We've only just scratched the surface of what's possible, but I hope you've got enough of an introduction and confidence to begin branching out and trying new things.

Remember don't be afraid to mess around. Copy and paste from the internet. Come up with crazy ideas and try to build them. Keep it small to start so you don't get overwhelmed, but don't be afraid to fail.

Javascript isn't something you just "learn" and then you're done. It's an ongoing process that will probably continue for your entire career. I've been writing Javascript for six years now, and I learned something new while writing this complete beginner's tutorial.

The best thing you can do in your development journey is keep your mind constantly open to learning new things and improving.

What are the best free resources for learning Javascript?

Kyle Simpson's digital book series You Don't Know JS is the gold standard for deep diving into learning all the ins and outs of the language. Highly recommend, and totally free to red online

Written by Douglas Crockford, creator of the JSON data format, this book distills all the important stuff about the Javascript language you need to know. This is the first book I ever read about JS, and I give it a lot of credit for helping teach me the fundamentals (ok I guess this one isn't free, but it's good):

For a quick reference for all things JS, there is no better resource than:

Node.js

What is Node.js

Node.js is a program that can run Javascript code outside of a browser.

It is one of the main reasons why Javascript has become one of the most popular programming languages in the world.

With Node, you are no longer restricted to requiring a web browser open to run your Javascript code. You can write Javascript for things like renaming photos on your computer, or sending automated emails, or even full blown desktop applications with tools like Electon.

To try Node yourself, simply follow the instructions on the site and download and install it. Once installed you should be able to open a command line terminal and type:

node --version

And get an output like v16.13.2 depending on what the latest version is when you installed it.

To you is you simply type node followed by a Javascript file. Here's a simple example, I'll create a file called script.js in the directory we are currently in:

script.js

console.log("Hello world!");

Now save it and run this command:

node script.js

You will see "Hello world!" appear on your terminal.

It's as simple as that. The applications just get bigger and more complex from there.

(Note that because your code isn't running in the browser, you will not have access to some of the common browser-specific APIs you might be familiar with. For example document.querySelector which returns a DOM node -- something that doesn't make much sense without the context of a browser)

One of the most common uses of Node.js is to build web servers. It's very popular because it allows you to write both your website (front-end) and web server (back-end) which provides the necessary data for the front-end both in Javascript.

Although you can write your whole web server entirely with code specific to Node itself, to simplify the process most people use a library like Express.

What are the best free resources for learning Node.js?

There are tons of great resources on learning Node.js out there, and they're free!

  • MDN will introduce you to Node and cover building a simple web server with a tool called Express

  • The Odin Project full free curriculum for teaching Node.js and Express

  • Node.js Crash Course great YouTube video series on Node.js from The Net Ninja


Original Link: https://dev.to/alexeagleson/the-complete-guide-to-a-career-in-web-development-html-css-javascript-and-web-servers-4f90

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To