JavaScript Can Enhance Your Website

Getting started with coding a web page from scratch or editing an existing page can feel like a huge obstacle to overcome.  There are many languages, frameworks, and tools used by modern web developers and it’s hard to know where to begin. However, the core languages of the frontend of any web page have been the same for some time: HTML, CSS & Javascript. If you learn how Javascript can enhance your website, you can transform a simple web page into a dynamic one quickly.

To get started, it’s important to distinguish the difference between these three languages and the role they play on a web page.

The Structure – HTML

HTML or Hypertext Markup Language is a markup language that transforms plain text into code that a web browser can understand.  The role of a markup language is to tell the browser what content is loading into different areas of the page. For example. if you markup your paragraph text with a <p> tag, then the browser knows to treat all the paragraphs a certain way.  If you markup text with an ordered list tag or <ol>, then the browser treats the content much differently.

A great analogy for a web page is to think of the page like the human body.  The HTML is the body itself and tells the browser what structure is in place and what to expect.  The HTML describes and defines the content in a way that browsers and devices can clearly understand.

Like any language, the amount of terms and tags to learn is vast.  While the language is generally intuitive, there are certainly some caveats you have to know to use the language properly.  To get started with the foundations of web design with HTML & CSS, check out Digital Workshop’s HTML/CSS class that can be attended live in Fort Collins, Denver or online. 

Once you have the structure in place for your page, it’s time to style it with CSS.

The Style – CSS

CSS or Cascading Style Sheets provide the style to the page. Everything in style code from the text color to the position of elements on a page can be controlled via CSS.  By separating HTML (structure) from CSS (style), we are able to clearly define the styles for the entire site, be as efficient and consistent as possible with the look and feel of the site, and get creative with how to style specific elements when needed.

Again, comparing to the human body, the CSS code would be like the clothes you wear, the color of your eyes and hair, and the accessories you add.

On a modern web page, the CSS is often the trickiest piece of the site to get right.  If you need a specific look to an element of the page, you need to override existing styles and “cascade” the styles correctly so all browsers understand what you want.

Also, modern CSS now includes style effects like shadows, opacity, animation, and more. This adds a whole new level of fun to design a site that stays completely in code and keeps the load time of your site down. CSS is fun and is a part of creating a great user experience for your web pages.

The Behavior – JavaScript

JavaScript is a web-based language that allows your site to performs behaviors. When you interact with a site, and the site responds in some way, that is when JavaScript kicks in. Unlike a markup language like HTML or a style language like CSS, JavaScript is a true programming language.  It can include logic structures and variables to make the code more dynamic for your visitors.

In the human body analogy, JavaScript would be the actions that your body wants to take.  Anything from opening your eyes, to walking, to talking…these are all actions you could code with logic of when to decide to fire them.

It’s important to note that JavaScript is not the same as Java, which is a stand-alone programming language.  JavaScript is specifically for web browsers and devices which sets the two languages apart.

A popular JavaScript application that you may have used before is Google Maps.  You interact with that site to find a map or directions, and the site responds to you as you move.

JavaScript may seem more intimidating to get started because it involves more programming concepts than HTML or CSS. However, it is easy and fun once you dive in.  Check out a JavaScript beginners class or JavaScript Advanced class if you want to learn more.

Adding it All Together

When you combine HTML, CSS & JavaScript, you create a website with solid structure, style, and behaviors. You can learn to develop a website with these three core languages and create dynamic websites.  Anyone can learn these languages. It takes time and practice, but they are accessible if you want to try.

All three languages make up a set of tools used by Frontend Web Developers today.  To get started with a full range of frontend web development training, check out our Frontend Web Development Bootcamp.  In these classes, you will work closely with an instructor and mentor to master the languages you need to get started designing today.

If you have any questions on which class or program is right for you, contact us anytime and you can speak to a student advisor to design a training plan that works for you.