DEV Community

Cover image for This is How Your Parents Used CSS and JavaScript
Nikola Brežnjak
Nikola Brežnjak

Posted on

This is How Your Parents Used CSS and JavaScript

Originally published on my blog.

TL;DR

This is the second part of the "This is How Your Parents Used to Build Websites". The first blog post is here.
Now, if you thought our HTML journey was exciting, buckle up! We’re about to dive into the world of CSS and JavaScript. These are the tools that will transform your static HTML pages into vibrant, interactive experiences.

Ready? Let’s go!

Part 1: CSS - Making Your Website Stylish

Basic Concepts of CSS

This is how a simple CSS statement would look like: p { color: blue};.

There are three basic concepts of CSS:

  • Selectors:
    • Think of them as the 'who' in styling.
    • For example, p { } targets all <p> elements.
  • Properties and Values:
    • The 'what' and 'how'. They go withing the {} brackets.
    • Like color: blue; – this tells the paragraph text to be blue.

Incorporating CSS into HTML

There are three ways you can add CSS into HTML:

  • Inline Styles: Directly in an HTML tag, like <p style="color: blue;">.
  • Internal Styles: Inside the <style> tag in the HTML head.
  • External Stylesheets: A separate .css file, linked in the HTML head with <link rel="stylesheet" href="style.css">.

Exploring Common CSS Properties

Color and Fonts

body { color: #333; font-family: 'Arial', sans-serif; }
Enter fullscreen mode Exit fullscreen mode

Font Size, Weight, and Style

p {
  font-size: 16px;
  font-weight: bold;
  font-style: italic;
}
Enter fullscreen mode Exit fullscreen mode

Text Alignment and Decoration

h1 {
  text-align: center;
  text-decoration: underline;
}
Enter fullscreen mode Exit fullscreen mode

Margin and Padding

.content {
  margin: 20px;
  padding: 15px;
}
Enter fullscreen mode Exit fullscreen mode

Borders

.box {
  border: 2px solid #000000; /* Solid black border */
  border-radius: 10px; /* Rounded corners */
}
Enter fullscreen mode Exit fullscreen mode

Styling Links

  • Hover Effect
a:hover {
  color: #ff0000; /* Red color on hover */
  text-decoration: none;
}
Enter fullscreen mode Exit fullscreen mode
  • Link Visited State
a:visited {
  color: #800080; /* Purple for visited links */
}
Enter fullscreen mode Exit fullscreen mode

Layout with Flexbox

  • display: flex; enables a flexible box layout.
  • There are games that explain flexbox, so if you're curious go check them out.

Responsive Design Basics

In order to adapt the site to various screen sizes and make sure it looks good on an iPhone as well as on your laptop, we can use the so-called media queries:

@media (max-width: 600px) { body { background-color: lightblue; }}

This changes the background color on screens smaller than 600px.

Advanced Selectors

  • Pseudo-classes
    a:hover { color: red; } changes link color on hover

  • CSS Transitions
    transition: background-color 0.5s ease;

  • CSS Animations

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
div {
  animation-name: example;
  animation-duration: 4s;
}
Enter fullscreen mode Exit fullscreen mode

Advanced CSS

If you're curious enough, please explore SASS (CSS with superpowers) on your own.

Part 2: JavaScript - Bringing Interactivity to Your Website

JavaScript is the scripting language that lets you create dynamic content.

Basic Syntax and Concepts

Variables
let message = 'Hello, world!'; - with this we defined the variable called 'message' and saved in it the string 'Hello, world!'.

You may come across the keyword var, but that was an old keyword that is no longer suggested to be used because of the unintended consequences.

Functions

function greet(name) {
  alert('Hello, ' + name);
}
Enter fullscreen mode Exit fullscreen mode

With this we created a function called greet that takes a parameter called name and outputs Hello name via an alert (OFC, name is replaced with whatever you pass into the function as a parameter).

Events
<button onclick="greet('Alice')">Greet</button>

With onclick we define what function is going to be run when the button is clicked.

DOM Manipulation

  • Change text
document.getElementById('myText').innerHTML = 'New Text';
Enter fullscreen mode Exit fullscreen mode
  • A button that changes a theme color
<button onclick="changeColor()">Change Theme</button>
<script>
  function changeColor() {
    document.body.style.backgroundColor = 'lightblue';
  }
</script>
Enter fullscreen mode Exit fullscreen mode
  • Changing styles on hover using JavaScript
document.getElementById('myElement').onmouseover = function() {
  this.style.color = 'red';
};
Enter fullscreen mode Exit fullscreen mode
  • Interactive portfolio enhancements
document.getElementById('project1').onmouseover = function() {
  this.style.transform = 'scale(1.1)';
};
document.getElementById('project1').onmouseout = function() {
  this.style.transform = 'scale(1)';
};
Enter fullscreen mode Exit fullscreen mode
  • Handling a click event
document.getElementById('myButton').addEventListener('click', function() {
  alert('Button clicked!');
});
Enter fullscreen mode Exit fullscreen mode

Advanced topics

Using fetch to load data

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));
Enter fullscreen mode Exit fullscreen mode

I wrote a three series blog post on doing so-called AJAX calls (fetching data from some API), check them out here:

JavaScript ES6
There are some awesome things that have been added to the 'new' flavor of JavaScript, called ES6. I won't go into the details here, but use Google (or ChatGPT, or Bard, or ...) and look into these topics:

  • Arrow Functions: const add = (a, b) => a + b;
  • Template Literals
const greeting = `Hello, ${name}!`;
Enter fullscreen mode Exit fullscreen mode

Conclusion

And that's a wrap! We've just scratched the surface of the amazing world of CSS and JavaScript. Remember, practice is key, and the web is your canvas. Go out there and create something awesome!

In the next blog post we'll cover frameworks for CSS and JavaScript, pick one for each and create a Giphy search application.

Top comments (0)