Ideas of modern
web design.

HTML describes a page using elements. This page includes a document type, a language attribute, a title, headings and an image.

Page structure

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Project 0 — Egor Vychov</title>
  </head>
  <body>
    <h1>Egor Vychov</h1>
    <img src="images/egor.jpg"
         alt="Egor Vychov">
  </body>
</html>

The browser represents these elements as a Document Object Model (DOM) tree.

CSS controls colour, alignment, backgrounds, spacing, borders and typography. The main design uses the external file styles.css.

style="color: blue;
text-align: center;"

<style>
.internal-example {
  color: #305e43;
  text-align: center;
}
</style>

<link rel="stylesheet"
      href="styles.css">

This example follows the lecture: pressing Go changes the first name from Ann to Alex through the DOM.

document.querySelector('#first-name')
  .value = 'Alex';

Resize your browser or open the page on a phone. Columns stack on narrow screens, images scale to their container, and the panel below changes colour at 600 pixels.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

@media (min-width: 600px) {
  .viewport-demo { background-color: #fae5a6; }
}
@media (max-width: 599px) {
  .viewport-demo { background-color: white; }
}

These six sample cards reproduce the Flexbox idea from the lecture. Toggle wrapping and resize the window to compare the layouts. They are layout samples, not links to completed projects.

Wrapping on: cards move to a new row when needed.

#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#container > div {
  width: 200px;
  margin: 20px;
  padding: 20px;
  background-color: lightgray;
  text-align: center;
}