This is How Your Parents Used CSS and JavaScript
Tags: css, javascript, beginners
Published: 2023-12-20 16:44:27

---
title: This is How Your Parents Used CSS and JavaScript
published: true
description: This is How Your Parents Used CSS and JavaScript
tags: css, javascript, beginner
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eirbfigqm1scno7lushu.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-12-20 16:42 +0000
---

_Originally published on [my blog](https://nikola-breznjak.com/blog/javascript/this-is-how-your-parents-used-css-and-javascript/)._

### TL;DR
This is the second part of the "This is How Your Parents Used to Build Websites". The first blog post is [here](https://nikola-breznjak.com/blog/javascript/this-is-how-your-parents-used-to-build-websites/).
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; }
```

**Font Size, Weight, and Style**
```
p {
  font-size: 16px;
  font-weight: bold;
  font-style: italic;
}
```

**Text Alignment and Decoration**

```
h1 {
  text-align: center;
  text-decoration: underline;
}
```

**Margin and Padding**
```
.content {
  margin: 20px;
  padding: 15px;
}
```

**Borders**
```
.box {
  border: 2px solid #000000; /* Solid black border */
  border-radius: 10px; /* Rounded corners */
}
```

**Styling Links**
- Hover Effect
```
a:hover {
  color: #ff0000; /* Red color on hover */
  text-decoration: none;
}
```

- Link Visited State
```
a:visited {
  color: #800080; /* Purple for visited links */
}
```

**Layout with Flexbox**
- `display: flex;` enables a flexible box layout.
- There are games that explain flexbox, so if you're curious go check [them](https://www.google.com/search?q=games+that+teach+you+flexbox) 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;
}
```

#### Advanced CSS
If you're curious enough, please explore [SASS](https://sass-lang.com/) (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](https://stackoverflow.com/questions/762011/what-is-the-difference-between-let-and-var).

**Functions**
```
function greet(name) {
  alert('Hello, ' + name);
}
```

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';
```

- A button that changes a theme color
```
<button onclick="changeColor()">Change Theme</button>
<script>
  function changeColor() {
    document.body.style.backgroundColor = 'lightblue';
  }
</script>
```

- Changing styles on hover using JavaScript
```
document.getElementById('myElement').onmouseover = function() {
  this.style.color = 'red';
};
```

- Interactive portfolio enhancements
```
document.getElementById('project1').onmouseover = function() {
  this.style.transform = 'scale(1.1)';
};
document.getElementById('project1').onmouseout = function() {
  this.style.transform = 'scale(1)';
};
```

- Handling a click event
```
document.getElementById('myButton').addEventListener('click', function() {
  alert('Button clicked!');
});
```

#### Advanced topics
**Using `fetch` to load data**
```
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));
```

I wrote a three series blog post on doing so-called AJAX calls (fetching data from some API), check them out here:
- [Making AJAX calls in pure JavaScript](https://nikola-breznjak.com/blog/javascript/making-ajax-calls-pure-javascript/)
- [Making AJAX calls using jQuery](https://nikola-breznjak.com/blog/javascript/making-ajax-calls-using-jquery/)
- [Making AJAX calls using the Fetch API](https://nikola-breznjak.com/blog/javascript/making-ajax-calls-using-jquery/)


**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}!`;
```

### 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](https://nikola-breznjak.com/blog/javascript/getting-started-vue-js-3-building-giphy-search-application/) we'll cover frameworks for CSS and JavaScript, pick one for each and create a Giphy search application.