Day 1: What websites are made of

Browsers talk HTML

<!DOCTYPE html>
<html>
<head>
<title>My first website</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is my first website</p>
</body>
</html>

Adding style

<head>
<title>My first website</title>
<link href="style.css" rel="stylesheet">
</head>
@import url(http://fonts.googleapis.com/css?family=Lobster);body {
font-family: 'Lobster', cursive;

background:#444;
text-align: center;
}
h1 {
margin-top: 50px;
font-size: 50px;
color: #222;
text-shadow: 0px 2px 1px #777;
text-shadow: 0px 2px 1px #777, 0px -4px 2px #000;
}
p {
width: 40%;
margin: auto;
padding: 30px;

font-size: 20px;
color: #fff;

border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
}

Adding behavior

<head>
<title>My first website</title>
<link href="style.css" rel="stylesheet">
<script src="script.js"></script>
</head>
var paragraphElement = window.document.createElement("p");
var paragraphText = window.document.createTextNode("This paragraph was created by JavaScript");
paragraphElement.appendChild(paragraphText);
window.document.addEventListener('DOMContentLoaded', function() {
window.document.querySelector('body').appendChild(paragraphElement);
});

The right tools for the job

--

--

--

Master in Biology, freelance Web Developer, open to new challenges…

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

A not amazing history about how I wanted and learned Kubernetes

EA’s View — Let us Win Business Stakeholder support!

CS373 Fall 2021: Nathan Eisenberg

LeetCode][python3]Day24. LRU Cache (30-Day LeetCoding Challenge)

Launching Our Super Affordable Student License

How to Make Money with API (2022)

Integrating Traditional Cloud Development With Salesforce

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Frederic Aerts

Frederic Aerts

Master in Biology, freelance Web Developer, open to new challenges…

More from Medium

Styling Nav-Bar

How to Truncate Text using CSS

An example of truncated text. It shows “hello w…”.

How to make a light and dark mode button in HTML, CSS, and JS!

5 Things to Know Before Starting React ⚛