Skip to content

Latest commit

 

History

History
225 lines (142 loc) · 12.4 KB

README.md

File metadata and controls

225 lines (142 loc) · 12.4 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
    • Specificity
  4. Working with the browsers
    • What is a web browser?
    • Choosing the right web browser
    • How to use the inspector
    • Useful browser extensions

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.

Note for Windows users: Please install Git for Windows. It comes with an application called Git BASH which simulates frequently used CLI commands in Unix fashion. This aligns our work here in this course, as we can all use the same commands. But there is an even bigger reason: Being comfortable in the Unix Bash shell is very important for a web developer, as web servers usually run Linux.

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:

Specificity

As there are multiple ways to write your css code which leads to multiple rules applying to the same html element CSS needs to decide which rule to follow. In the simplest form, if we for example have the following HTML:

<p>This paragraph should be styled normally</p>
<p class="explanation">
  This paragraph should be styled differently as we add a class to the element
</p>

and the following CSS:

p .explanation {
  font-weight: 600;
}

p {
  font-weight: 400;
}

Then because the p .explanation rule is more specific than the p rule the font-weight of our second paragraph will be 600 even though the other rule was applied last. Read the following articles to learn more about how it works:

4. Working with the browser

What is a web browser?

You probably use it daily. Let's take a closer look at what it actually is.

A web browser is software that allows you to view webpages, either retrieved from the internet or loaded from your computer. The primary function of a web browser is to render HTML files: transforming all the code (HTML, CSS and JavaScript) as well as the references (images, videos, etc.) to display a page correctly.

For further study, delve into the following:

Choosing the right browser

As a web developer you will write code that will display in different browsers. As such it is important that you get familiar with most major browsers in use today. These are:

There are other browsers popping up, but they are mostly enhancements of the Chromium OS browser which is the basis of Chrome. This generally means that if it works in Chrome, it will work on those browsers too.

In your HackYourFuture journey you'll mainly be using Google Chrome when developing, as is has great developer tools that allow us to develop web applications in an easier and clearer way.

How to use the browser inspector

The inspector is a part of web browsers developers can use to take a closer look at the composition of the HTML elements. This makes it easier to write HTML and CSS code that works.

Watch the following videos and follow along:

Useful browser extensions

As web developers we'll be dealing with the browser all the time. Why not upgrade our browser so it can make our programming life easier?

A browser extension is a piece of software someone has written to increase the capability of the web browser. For example, if you hate receiving advertisements you probably use something like Adblock to block all the unwanted ads you might find in your webpages (if not, download it as soon as possible!).

The following is a list of extensions that have proven to be useful during web development. This list only applies for Google Chrome, so if you don't have it, install it.

Extensions:

  • Modify the technologies underlying each website, in real time, using Web developer
  • Expose what technologies a website is using with WhatRuns
  • If you ever wanted to know the exact color of any element in a page, you can now do so with ColorZilla
  • When developing you'll be using dummy text to populate your elements. Enter Loren Ipsum Generator

There are many more of these extensions and we encourage you to explore. See what fits your needs!

Finished?

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