###Introduction

In this module you will learn to write and understand basic HTML(5) and CSS syntax.

Also we will go into the DOM and file structure. There will be time spent on why and how you use different programming languages (like CSS and HTML). When it comes to CSS you should understand how CSS decides which rules are applied, also you should have an understanding what is meant by elements and attributes. Making responsive websites is an important part of front-end programming. You will learn how to make your websites responsive by using media queries using a “mobile first” approach. Also you will get familiar with developer tools that help make this process easier. During this entire module you’ll (learn to) work in a text editor. It’s expected from you that your code is properly styled using the style guide for HTML/CSS. You’ll be introduced to the inspector that helps you debug and understand you code better.

* Introduction HackYourFuture

* Hello new students and mentors!

* HTML syntax (How to work in a text editor, make a zip file)

* CSS syntax

* Linking to external files

* DOM structure

* [What Is a Front-End Developer?](https://www.frontendhandbook.com/what-is-a-FD.html)

* [Part I. The Front-End Practice](https://www.frontendhandbook.com/practice.html)

###Watch these videos:

* [How the Internet Works in 5 Minutes](https://www.youtube.com/watch?v=7_LPdttKXPc)

* [How Web Browsers Work](https://www.youtube.com/watch?v=WjDrMKZWCt0)

* Khan Academy: [Into to HTML/CSS: Making webpages](https://www.khanacademy.org/computing/computer-programming/html-css#concept-intro)

* Make your own web resume:

..* One page

..* Two files: HTML and CSS

..* Include the following:

...* Your personal info (name, place of birth, etc.)

...* A picture

...* A few lines about who you are

...* Education

...* Work experience

..* Include the following:

...* Different types of headings (h1, h2)

...* A list (ul)

...* img

...* p

...* Some css properties: margin, padding

...* Make shore that you page is nice to read

..* upload in a zip

* Next week reading/ practice (these topics will be discussed next week but If you want to read ahead):

..* Next week we will talk about media queries, if you already want to start reading about this subject check out this link:

* Repeat/explain how HTML is structured, go through the entire html structure, explain all different elements etc

* CSS

* Media queries

* Understand why/ how to use which language

* How to work with the inspector

* Resume presentations

* [Introduction to media queries](https://teamtreehouse.com/library/css3/media-queries/introduction)

* [More about media queries](https://css-tricks.com/css-media-queries/)

* [HTML syntax](http://www.w3schools.com/html/html5_syntax.asp)

* [Article about mulitiple ways to select classes and id's](https://css-tricks.com/multiple-class-id-selectors/)

* [Read about nice color combinations](http://www.colorcombos.com/index.html)

* Udacity: [Responsive web design fundamentals](https://www.udacity.com/course/responsive-web-design-fundamentals--ud893)

* Remake an existing website: choose one of the following

..*

..*

..*

* It should have an external CSS file

* BEFORE you hand it in, read the [Style guide](http://www.w3schools.com/html/html5_syntax.asp) again and check your files

* Presentations of students website remakes

* Repeat topics of last two weeks:

..* Understand why/ how to use which language

..* Media-queries

..* DOM

..* File structure, external links

* How to find information on the web

* Task: find some info about a certain topic in groups of 2, present to each other

* Sizes in CSS: relative and absolute sizes

* Choose one of the following subjects, look up how it works and implement it in a webpage

..* CSS transitions

..* CSS animations with keyframes

..* SVG

..* Dropdown menu in CSS?

..* Using external fonts or icon packs?

..* Bootstrap

..* [more options?]