mahmoudbd / html-css

If you are following the HackYourFuture curriculum we recommend you to first take a look at the complete curriculum, which you can find here.

Please help us improve and share your feedback! If you find better tutorials or links, please share them by opening a pull request.

Module #1 - HTML, CSS and GIT (Frontend)

Welcome to the wonderful world of web development! In this module you will learn the basic building blocks of the web: HTML and CSS. HTML gives us the power to add text, images and videos to a page. CSS gives us the power to organize these parts and make it look nice.

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!

You'll also be learning GIT, software that will allow you to save your folders and files in case they accidentally get deleted or end up corrupt. It can do much more and you'll learn all about that starting from week 2!

Learning goals

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

How to use this repository

Before you do anything, first go here.

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. 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!

Planning

Week	Topic	Reading Materials	Homework	Lesson Plan
0.	Quick Start!	W0 Reading	-	-
1.	Command Line Interface basics, HTML/CSS syntax	W1 Reading	W1 Homework	W1 Lesson Plan
2.	Introduction to GIT, Responsive design	W2 Reading	W2 Homework	W2 Lesson Plan
3.	GIT branches, CSS frameworks, Working with the browser	W3 Reading	W3 Homework	W3 Lesson Plan

Finished?

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 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 :)