Skip to content

Latest commit

 

History

History
137 lines (84 loc) · 7.29 KB

README.md

File metadata and controls

137 lines (84 loc) · 7.29 KB
Raw

Reading Material HTML/CSS/GIT Week 1

Agenda

These are the topics for week 1:

  1. What is the command line interface (CLI)?
  2. Introduction to HTML:
    • Crash course
    • The most commonly used tags
    • Semantic HTML
  3. Introduction to CSS:
    • Crash course
    • Where to write it?
    • The box model
    • The cascading effect

0. Video Lectures

Your teacher Arco has made video lectures for this week's material. You can find them here: Videos 1 - 6

HYF Video

1. What is the command line interface (CLI)?

The Command Line interface (also known as CLI or shell) is a way to navigate through your computer's content (media, folders, applications, etc.) without a visual user interface. It allows you to type text commands to perform specific tasks. Since you can directly control the computer by typing, many tasks can be performed more quickly, and some tasks can be automated with special commands that loop through and perform the same action on many files.

As a beginning developer it's important to get familiar with it, as it will teach you how computers work: as tools that you give instructions to. This is not any different from programming for web development; but instead of writing instructions to the computer directly, you write instructions for browsers to execute!

The first thing you'll notice is that once you type in a command, the computer doesn't always give back feedback. This is completely normal. Most of application development goes like that, and it's good to get used to it.

Please install Git for Windows which comes with an application called Git BASH which simulates frequently used CLI commands.

For more information, check the following resources and code along:

2. Introduction to HTML

Crash course

HTML is the foundation of web development. It is an acronym for HyperText Markup Language. It is used to structure content on a webpage. What do we mean by content? Plain text, images, videos, links to other websites, etc. The structure gives content meaning by defining that content as, for example, headings, paragraphs, or images.

In order to learn HTML properly it's important to know what is is. Go through the following resources to learn more about it:

The most commonly used tags

If at any point you came to believe you would have to learn a whole list of tags by heart in order to write great HTML, you are in luck: that's not needed.

The most important thing to know is that the tags are used to structure content, or in other words: to decide how each part is organized in order to more easily understand what the page is trying to communicate.

It's useful to memorize this list, but don't feel like you have to learn and memorize every HTML tag. Once you understand the basics, you can easily look up which tag you need.

Check out the following article to find a list of the most commonly used tags: The Most Commonly Used Tags

Semantic HTML

Semantic HTML are HTML tags that introduce meaning to the web page rather than just presentation. For example, a <p> tag indicates that the enclosed text is a paragraph. A <nav> tag indicates a navigation menu of some kind. Both examples show meaning and structure, in this way it's easier to understand for both the browser and the developer.

This leads to the following insight about writing code: while code is written to produce working software, it should also be written so other developers can easily read and understand it. That's why it's so important to write meaningful code: if somebody else can read it and understand what you meant you did a great job!

Take a look at the following resources to learn more about semantic HTML:

3. Introduction to CSS

Crash course

CSS is just as important as HTML. It is an acronym for Cascading Style Sheets. It is a language created to change the appearance of content. By referring to the HTML tags you can style it in various ways: change the font-size, increase the height or attach a background-image to it.

Go through the following video to get a firmer grasp of the fundamentals of CSS:

Where to write it?

There are 3 basic ways to write CSS:

  • In an external stylesheet: a .css file, that is linked to a .html file using the following tag:
<link href="/path/to/style.css" rel="stylesheet" />
  • In the <head> of a .html file. This is done using the <style> tag. This is called an internal stylesheet:
<head>
  <style>
    body {
      background-color: blue;
    }
  </style>
</head>
  • As part of the attribute style inside any HTML tag. This is called inline styling:
<div style="background-color: blue;">HackYourFuture is cool!</div>

In practice, you'll always write your CSS in separate .css files. This is because you want to make sure every file has a single purpose: an HTML file should only contain the content and structure of a page, while a stylesheet should only contain styling rules that apply to a page.

This is a software design principle called separation of concerns.

The box model

"In CSS, everything is a box". This phrase summarizes a central concept in HTML/CSS: the box model. When building a web page each element can be considered a box that has the following properties: margin, border, padding and content. Starting from the first element within the <body>, everything that comes after will be pushed down (thanks to these 4 properties).

To learn more about the box model, go through the following:

The cascading effect

The first C in CSS stands for Cascading and it's crucial to learning how to use CSS correctly. Essentially, it means that it matters (1) in which order and (2) how specific you write CSS rules.

Read the following articles to learn about it:

Finished?

Are you finished with going through the materials? Nice job!!! If you feel ready to get practical, click here.