Week 1

Welcome to this programming course! It’s fantastic that you joined! Over six weeks, we’ll explore the world of HTML, CSS and JavaScript. You do not need any previous knowledge. We’ll start at the beginning with foundations. But also, keep in mind that you will need to keep learning after these six weeks if you want to take it to the next level.

Programming and Lego Building Blocks

How does it feel when you think about playing and building with Lego? Just with a few blocks you can already start building - it's fantastic!

If all of us had an identical starter set in front of us, it’s very likely everybody’s creation would look different. With just a few different types of blocks we can build the world.

![Simple Lego Builds][https://images.brickset.com/sets/large/11002-1.jpg?201812041022]

The basic form of a Lego gives you the freedom to be creative, build something small or big, recreate architecture, or old game consoles in as much detail as possible. Due to its form and connectors, we can use it in whatever way we like. Connecting it with another brick works in many different ways. That's the genius of it.

Did you know the same is true for programming languages? Most modern languages have tons of different keywords and features. But to build something, you only need a few essential building blocks. While each language has different building blocks, the underlying concepts are the same or similar.

Writing computer code, no matter if it's HTML, CSS, or JavaScript works exactly the same way. We're using different building blocks to build a website.

What is Web Development?

We're using websites every day in our daily lives, for instance, at work, reading the news or do online banking.

The question is: How hard is it to start building something yourself? What do you need to know to get started?

To create a new website, all we need is a web browser and a text editor. Both come free of charge. With the text editor, we create HTML files the browser uses to render a website.

Web Development is one the more accessible disciplines. You don't need a special kind of computer (like a Mac to create iPhone applications). Also, there's tons of free knowledge available on all web technologies.

The Web Browser is its own small operating system, understanding three languages:

• HTML (Hyper Text Markup Language)
• CSS (Cascading Stylesheets)
• JavaScript

With these three languages, we can build anything from a static "Hello World" Website up to Google Maps or Facebook.

Our Tools

To write any kind of software, we need some tools. As mentioned above, for web development you need a browser and a text editor.

We'd like to avoid spending time on local installation and opt for a browser-based development. Therefore, meet Glitch.com! It's free of charge for hobby projects and provides us with everything we need to get started.

Open glitch.com in your browser and click on "Create new Project". It'll present you with a variety of options, select glitch-hello-website. It might take a second until Glitch has created a new project for you.

Glitch brings together a few different things:

• A Text Editor, specialized on HTML, CSS and JavaScript
• A project view
• A built-in Preview Window
• A Url where we can host our websites for free

Any program, no matter if it's a website or a command-line application consists of several files. A website usually consists of at least one HTML document (index.html), and optionally of a stylesheet (style.css) and a JavaScript file (script.js).

The text editor is the place where we spend most of our time, reading and writing source code; that's what it is optimized for.You might notice how it highlights certain words in different colors. This helps us to read source code, but also spot mistakes faster.

The Preview Window is a feature specific to Glitch.com. Its purpose is to show us how the website will look like when the browser renders it. Whenever we make changes to our HTML or CSS file, the preview will automatically reload and show us the final result.

Whenever we click this button, we'll see our website in a new browser window, rendered independently from our development tools.

Another Glitch-specific feature: Each of our web projects will have a domain right out of the box.

If you look at the address bar in the screenshot above, you'll notice the url (https://panoramic-iced-dish.glitch.me). Glitch automatically assigned this name to our project. We can change it later on if we like. But most importantly, we can copy and paste the url and send it to a friend, allowing them to view our brand-new website!

Creating our first website

In your new Glitch project, open index.html and delete everything. After that, paste in the following Code:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Hello World!</title>
</head>

<body>
  <h1>Hello World</h1>
</body>

</html>

HTML files follow a strict schema. This is good, because it allows us to start with a scaffold where we fill in the blanks. An empty scaffold looks like this:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>
    <!-- Your Site Title goes here -->
  </title>
</head>

<body>
  <!-- Your Content goes here -->
</body>

</html>

You might notice the odd-looking <!-- --> notation. These are comments, allowing you to add additional context to your code. The browser will ignore these lines, so they won't be visible in the rendered website.

The two places we need to fill out are the title as well as the body. title holds the text that you see in your browser window's title bar or in the tab.

body holds all our HTML code that describes the website.

You also notice a lot of angle brackets (< >). These are special characters, because they describe the opening and closing tag. A tag for instance is <body></body> or <title></title>. Everything that goes between <body> and </body> will be part of our website and visible in the browser. A tag tells the browser how to render or paint a piece of content (like, "This is a headline", here's an image, ...).

There are plenty other tags, and you'll find a list of them here.

Your first Task

In your index.html file, use an <h1> Tag to create a headline that says Hello World. Also, use a <p> tag to add some text like:

Hello! 
This is my first website!

Question: What are the differences between <h1> and <p>?

Advanced Tasks

Create a new Glitch.com project as shown above. Then, open index.html and replace the file's content with:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>
    <!-- Your Site Title goes here -->
  </title>
</head>

<body>
  <!-- Your Content goes here -->
</body>

</html>

We want to create the above fold layout for a newspaper. Below, you'll find three different content examples. Choose one of them, copy the text and paste it into your website's body. Then, look at the preview window. What do you notice?

Experiment with the tags from the HTML Reference to create a basic layout. Don't worry if items are not aligned correctly or seem out of place.

Tip: Use the following tags:

• Headline
• Paragraph

What is missing to make the website look more like an actual newspaper layout?

Content Examples:

• Harry Potter

Gringotts Break-In Latest

Investigations continue into the break-in at Gringotts on 31 July, widely believed to be the work of Dark wizards or witches unknown. Gringotts goblins today insisted that nothing had been taken. The vault that was searched had in fact been emptied the same day. "But we're not telling you what was in there, so keep your noses out if you know what's good for you," said a Gringotts spokesgoblin this afternoon

Source: https://harrypotter.fandom.com/wiki/GRINGOTTS_BREAK-IN_LATEST

• Avengers

Who is the Iron Man?

https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSaP1sgb_NkcqWgL41gItRMMHud_JmszsAk2w&usqp=CAU

• Regular News

Can TV Get Big Again?

After “Game of Thrones,” many said the blockbuster series was dead. Maybe not — but the future of TV epics may look more like the movies’ recent past.