The products of HTML and CSS comprise a two-thirds of what is called `frontend` (the final third is client-side JavaScript, which you will learn about in later modules). What is frontend? It's another word for the presentational part of a piece of software. In terms of web development we're talking about "what you see" when you go to any website.

Think of it like this: if a webpage were a person, the HTML would be the skeleton and CSS the skin and clothing!

In order to successfully complete this module you will need to master the following:

- Be able to write syntactically correct HTML and CSS

- Understand what is meant by "responsive" web development

- Practice navigation your computer using the command line interface (CLI)

- Learn about GIT and its basic usage

- Become familiar with Trello and GitHub as a way to submit your homework

- Explain your code by presenting what you've done

- Know your way around Visual Studio Code

- Feel comfortable working with your browser's inspector

This repository consists of 3 essential parts:

1. `Reading materials`: this document contains all the required theory you need to know _**while**_ you're coding. It's meant as both study material and as a reference to understand what you're doing.

2. `Homework`: this document contains the instructions for each week's homework.

3. `Lesson Plans`: this part is meant for teachers as a reference. However, as a student don't be shy to take a look at it as well!

After your first class you should start off with checking the `reading materials` for that week. At the beginning that would be the [Week 1 Reading](/Week1/README.md). Study all the concepts and try to get the gist of everything. After, you can get started with the `homework` for that week.

If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯, please ask/comment on Slack!

| Week | Topic | Reading Materials | Homework | Lesson Plan |

| ---- | ------------------------------------------------------ | -------------------------------------------------------------------------------------- | ------------------------------- | -------------------------------------- |

| 1. | Command Line Interface basics, HTML/CSS syntax | [W1 Reading](/Week1/README.md) | [W1 Homework](/Week1/MAKEME.md) | [W1 Lesson Plan](/Week1/LESSONPLAN.md) |

| 2. | Introduction to GIT, Responsive design | [W2 Reading](/Week2/README.md) | [W2 Homework](/Week2/MAKEME.md) | [W2 Lesson Plan](/Week2/LESSONPLAN.md) |

| 3. | GIT branches, CSS frameworks, Working with the browser | [W3 Reading](https://github.com/HackYourFuture/JavaScript/blob/master/Week1/README.md) | [W3 Homework](/Week3/MAKEME.md) | [W3 Lesson Plan](/Week3/LESSONPLAN.md) |

Have you finished the module? Great! Pat yourself on the back for the great work you've done.

If you feel ready for the next challenge, click [here](https://www.github.com/hackyourfuture/javascript1) to go to **JavaScript1**!

_The HackYourFuture curriculum is subject to CC BY copyright. This means you can freely use our materials, but just make sure to give us credit for it :)_

Hi new student, welcome to HackYourFuture! In this document you'll find all the instructions you need in order to prepare yourself for your upcoming journey in HackYourFuture, and beyond!

We'll discuss the following points:

- How do I communicate with everybody? Use communication tool Slack

- Where do I write my code? Inside a code editor called Visual Studio Code

- What's the way to submit my homework? Use planning tool Trello

- How do I put my code online? On software development platform GitHub

Slack is an application that allows us to communicate with others through (video) chat. It's used in most tech companies and is really easy to use. In order for you to get familiar we're going to use it as well!

Please download the app for on your desktop:

- [OSX](https://slack.com/downloads/osx)

- [Windows](https://slack.com/downloads/windows)

- [Linux](https://slack.com/downloads/linux)

And if you really can't go without your phone, you can also get it for mobile:

- [App store](https://itunes.apple.com/nl/app/slack/id803453959?mt=12)

- [Google Play](https://play.google.com/store/apps/details?id=com.Slack&hl=nl)

When it's all installed it's time to get into it! These are the first things to do:

- Add a (professional looking) profile picture

- Add a nice description about yourself

- Say hi to your classmates in the class channel

Done? This is optional, but for those who are curious:

- [Cheat sheet for basics and shortcuts](https://get.slack.help/hc/en-us/articles/217626358-Cheat-sheet-for-basics-and-shortcuts)

- [How to format your messages in Slack](https://get.slack.help/hc/en-us/articles/202288908-Format-your-messages)

Technically speaking, you can write code for the web in any application that allows you to write and save plain text files (such as Notepad or TextEdit). However a code editor is a tool specifically designed for editing code.

Depending on to the the programming language, the code editor highlights special keywords, give suggestions for some extent, adds automatic indentation and sometimes has an integrated command line interface (more on that in the next section) as well.

While your code editor does the basic job of allowing you to write code, it can always be improved to make our lives as programmers easier. In the following video you'll learn about the most useful code editor extensions you can install in order to make development a much richer experience:

Currently, Visual Studio Code is one of the top code editors on the market. As such, we have chosen it has our default code editor to use. We highly recommend you to use it as well:

- [Visual Studio Code](https://code.visualstudio.com/)

We can always improve what we have, including our code editor! We can add `plugins` to make our programming life much easier. Please install the following plugins as well and see for yourself!

- [Live HTML Previewer](https://marketplace.visualstudio.com/items?itemName=hdg.live-html-previewer)

- [Syntax Highlighter](https://marketplace.visualstudio.com/items?itemName=evgeniypeshkov.syntax-highlighter)

- [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)

- [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)

- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

For more specific information on how to setup your editor:

- [VSCode Tips](https://github.com/HackYourFuture/fundamentals/tree/master/VSCodeTips)

Trello is a planning tool that allows you to make todo lists in order to organize and prioritize your projects. In HackYourFuture we'll use it to submit your homework for the first module.

- [Register](https://trello.com/signup) for an account

- Get access to the `Feedback Assignments` board, by asking Wouter

- Create a card including a CodePen URL of your technical assignment

GitHub is a place where you can put your code online. Why? To safely store your code in case something bad happens to your computer (computer crash, virus, faulty files). You'll always be able to access this code from GitHub, using any other computer.

- [Register](https://github.com/join) for an account

- Put the URL for your account in the class channel

Let's make sure you have done everything necessary:

- Slack: downloaded, added profile and said hi

- Trello: registered and added a card with the CodePen URL in of your technical assignment

- Github: registered and put the URL of your account in the class channel

Have you finished with everything? Be proud of yourself, as you have optimally prepared yourself with all the tools needed to make your coding adventure a success!

Now, what will you be learning? Find out by clicking [here](https://github.com/HackYourFuture/curriculum).

The purpose of this class is to introduce to the student (1) the basics of working with the command line interface, and (2) basic HTML/CSS concepts:

FIRST HALF:

- Command line interface basics

SECOND HALF:

- Difference `<head>` and `<body>`

- Semantic HTML5

- The box model

FIRST HALF (12.00 - 13.30)

1. **Command line interface basics**

- The command line interface (CLI) is a way to navigate your computer by issuing direct commands

- Desktop application icons are visual shortcuts

- Commonly used commands

_Show students the most commonly used commands (`ls`, `pwd`, `cd`, `echo`, `cat`, `mkdir`, `touch`, `head`, `tail`)_

SECOND HALF (14.00 - 16.00)

2. **Difference `<head>` and `<body>`**

- The `<head>` holds all the page's meta-data: information about the complete webpage

_Show examples of what the `<head>` could hold and why: `<title>`, `<link>`, `<meta>`_

- The `<body>` holds all the elements that will be displayed in the browser

_Show examples of commonly used HTML tags: `<h1>`, `<a href="#">`, `<div>`_

3. **Semantic HTML5**

- In theory a page can be constructed using only `<div>`s

- Semantic tags make the code more comprehensible

- It helps organize the page

_Show examples of semantic HTML: `<header>`, `<footer>`, `<section>`_

4. **The box model**

- Everything is a box

- The "box" refers to the attributes universal to every element: `margin`, `padding`, `border`

- Every element pushes against one another

_Show example of the box model by using the browser inspector on various elements_