DEV Community

jbrochu1
jbrochu1

Posted on

Puzzled About CSS HTML and JavaScript? How They Can Tie Everything Together

Learning JavaScript, HTML and CSS at the same time? Functions, loops, variables, arrays, objects, strings… the list goes on! Sounds pretty overwhelming as a beginner right?! Especially when most of it is like a foreign language! Guess what, they are languages! You are learning how to write the rules for the application to do what you are asking it to. How can you do this without understanding the basic groundwork? Also how can you make it look decent? Patience grasshopper!

While it may be overwhelming at times, hopefully it will bring you some comfort to know that they can all come together with some cohesion (once you get a more basic understanding of how they work individually). Let me try to give you a very brief high level understanding of what each does individually and then allow me to tie it together at the end. Full disclaimer: consider that this technical opinion is coming from a novice software engineering student.

HTML
This is the most basic and primitive outline of website. It gives a very rough layout of placeholders to display to the user. Think text, paragraphs, dividers, buttons, lists, images. You create and display all these items (and others) and define some of their styling in HTML but the process is very cumbersome.

Using HTML only is not easy on the eye these days without the help of other languages to tell them how to look (think CSS). Calculations, math, tasks? Also not so much, think of JavaScript for those items. So what is a good way to think about it? Maybe think of HTML as more of the skeleton or structure that a client interface is based on. While HTML does not do some things (well or at all) it can point to the items that can: JavaScript and CSS.

<html>
<head>
  <meta charset="utf-8" />
  <title>My Title</title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
  <script type="text/javascript" src="./src/index.js"></script>
</head>
<body>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

JavaScript
Need to do some math with variable? Or want to have something monitor for a mouse click and then perform a task? JavaScript to the rescue! Looping through and pulling data from an object with thousands of pieces of information? JavaScript is at your service! It could loop through with only a few lines of code. JavaScript can even create HTML elements with the data that you just looped through with a createElement method.

This JavaScript code is using the forEach method to cycle through all of the menuData items and automatically creating HTML data that will display on the website when the buildMenu function is called. This could be hundreds of lines of code that would need to be manually entered in HTML all in a half dozen lines in JavaScript.

function buildMenu(menuData) {
    let menuList = document.querySelector("#menu-items");
    menuData.forEach(item => {
        let menuListItem = document.createElement("span");
        menuListItem.textContent = item.name;
        menuList.appendChild(menuListItem);
    });
}
Enter fullscreen mode Exit fullscreen mode

How about if you had a comments section in your interface and wanted a user to be able to add those comments directly to the interface? JavaScript could be watching the “Post Comment” button for you to click on it after you have enter some text into the text entry form. It could store this data in a variable (or elsewhere) and tell the HTML to create a new paragraph with the text you just entered in the text entry form.

CSS
Opacity (transparency), grid alignment, assigning font families to particular regions of your page. Want your text boxes on the left half of the screen to have round edged borders? Let CSS easily tell the web browser how to display that.

While these properties would need to be manually entered to each item in HTML it can simplified into a few lines in CSS. One way to do that is to use a css selector to essentially filter all items of that type and assign the preferred visual characteristics. The CSS code here is selecting all p (paragraph) items and setting a handful of properties for them in a half dozen lines.

p {
      color: red;
      background-color: black;
      font-family: 'Times New Roman', Times, serif;
      font-weight: bold;
      border: #fff solid;
      border-radius: 5px;
    }
Enter fullscreen mode Exit fullscreen mode

Want to be able to scale items appropriately and dynamically as you resize a window? You suspected correctly, CSS has you covered. I’ll spare you the details on how to do that, just know CSS makes it possible.

Summary
Hopefully you were able to get a tiny taste of what each of the 3 can do individually and see that they can compliment the others nicely to create great looking and powerful tools.

Hopefully the takeaway is:

HTML: primitive backbone or structure
JavaScript: engine that can calculate and automate complex tasks (and more!)
CSS: the super styler
All 3: much more powerful and efficient when combined together

Top comments (0)