Git Product home page Git Product logo

html-css's Introduction

DEPRECATED - HTML-CSS

This module has been reorganised:

  • The HTML and CSS is now in the explore module, find it here
  • The CLI and Git is now the CLI-Git module which you can find here

Module 1

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 navigating 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
  • 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.

Repository content

This repository consists of 3 essential parts:

  1. README: this document contains all the required theory you need to understand while working on the homework. It contains not only the right resources to learn about the concepts, but also lectures done by HackYourFuture teachers. This is the first thing you should start with every week
  2. MAKEME: this document contains the instructions for each week's homework. Start with the exercises rather quickly, so that you can ground the concepts you read about earlier.
  3. LESSONPLAN: this document is meant for teachers as a reference. However, as a student don't be shy to take a look at it as well!

How to study

Let's say you are just starting out with HackYourFuture. This is what you do...

  1. The week always starts on Wednesday. First thing you'll do is open the README.md for that week. For the first week of HTML-CSS, that would be Week1 Reading
  2. You spend Wednesday and Thursday going over the resources and try to get a basic understanding of the concepts. From the second week on, you'll also implement any feedback you got on last week's homework
  3. On Friday you start with the homework, found in the MAKEME.md. For the first week of HTML-CSS, that would be Week1 Homework
  4. You spend Friday and Saturday playing around with the exercises and write down any questions you might have
  5. DEADLINE 1: You'll submit any questions you might have before Saturday 23.59, in the class channel
  6. On Sunday you'll attend class. It'll be of the Q&A format, meaning that there will be no new material. Instead your questions shall be discussed and you can learn from others
  7. You spend Monday and Tuesday finalizing your homework
  8. DEADLINE 2: You submit your homework to the right channels (Trello/GitHub) before Tuesday 23.59. If you can't make it on time, please communicate it with your mentor
  9. Start the new week by going back to point 1!

In summary:

Weekflow

To have a more detailed overview of the guidelines, please read this document or ask your mentor/class on Slack!

Video lectures

For each module HackYourFuture provides you with video lectures. These are made by experienced software developers who know what they're talking about. The main teacher for this module will be Arco Mul: an experienced video game and web developer!

You can find out more about him here:

Learn from Arco in the following playlist of videos he has made for you! (Click on the image to open the link)

HYF Video

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

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

html-css's People

Contributors

alevtinaleytland avatar allhandsondeck avatar anis790615 avatar arcomul avatar chrisowen101 avatar cristi-maco avatar dine avatar ekocibar avatar elias011 avatar fedefu avatar georgiosgoniotakis avatar gijscor avatar ivanasetiawan avatar johanf85 avatar kelleyvanevert avatar mkruijt avatar nhoening avatar noergitkat avatar philiiiiiipp avatar remarcmij avatar robvk avatar thomvangessel avatar tjebbee avatar tomasvanrijsse avatar unmeshvrije avatar wouterkleijn avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

html-css's Issues

Week-2 Homework | Git Branching Homework

Git branching homework:
• Ask your teacher to create a repository on her/his Github account https://github.com/<TEACHER_NAME>/hyfclass.git for this homework.
• Send the teacher your Github user name so that (s)he will give you write access to the repository.
• You will receive an email notification when (s)he adds you as a collaborator.
• Accept the invitation for collaboration.
• Clone the repository (Google how to clone a repository). ### [this step can be removed from second step to here for going step by step.]
• ### Create a new branch on repo and switch to that branch, do not make changes or merge to master branch. ### [this step can be added for protecting master branch.]
• Create a file YOUR_NAME-commands.txt ### inside week2 folder in your local repo. ### [just a reminder]
• Add bash commands that you like. Add description for commands.
• Then git add, commit and push the file.
• Add more files if you want to and practice with git log and git pull.
• You should observe that you can see changes from your fellow students.
• Do not merge the changes to master branch.
• Do not make any changes to master branch.

Add details to lesson plan

@NoerGitKat @Tjebbee I think it would be useful to add some more details to the lesson plan of week 3. I really liked the discussion of the homework Sander did of week 2 (drone assignment), then discussing border-box, clearfix, float and then flexbox. See the video of his lecture for inspiration.

Trello into

Have a list of resources and video's about how to use trello

Follow up list

We have many documents to study but it is not easy to follow it up.

HYF may introduce something work done table then when anybody study or read or do any task, just that person will tick the table

For us sometimes we forget what we did not study from the previous weeks, with this way we may aware of our gaps and when we had a time, then we can go back and do it.

It may be an easy online excel sheet as a starting point.

May be monty the one who did more work will get a small price.

Visit to IT Companies

We visited Booking.com with HYF and it really broaden my knowledge. If we can add to our curriculum a title of visiting IT companies, may be 3 visit within 6 months. If it is possible even we may have a class in those companies that will motivate us more. With the same aspect our lecturer may give us time to time career talk.

Github intro

list of Github resources/video's about what Github is

Lynda.com playlist

References to additional Lynda.com playlists that can be used for further elaboration on certain concepts

Slack intro

have a list of Slack into rescues or and video's for new students

Sketch week3

Make Sketch about how homework week3 should look (two separated sections made with floats and flexbox), causes confusion among students.

Should include:

  • mobile sketch
  • tablet sketch
  • desktop sketch

GIT is easier to learn without the CLI

Most people I know don't use GIT on the command line.
And I think that using a visual representation works better didactically.
I'd would argue that it makes more sense to start talking about the CLI once the students start to work with NPM.

Gitkraken is the GIT client I would advise because:

  1. It is free
  2. It is available on all platforms
  3. It has a nice graph view of the commits ( you can easily demonstrate branches and merging )
  4. They have a lot of tutorials that are pretty good.

Board not found

Feedback Assignments board not found on Trello. Any help?

Link doesn't work

File HTML-CSS/Week3/MAKEME.md have unexisting hyperlink.

>[Here](https://github.com/HackYourFuture/JavaScript/blob/master/Week0/README.md) you find the readings you have to complete before your first JavaScript lecture

#26
Seems that it was fixed at the footer, but missed at the header.

Broken link

The link to the JavaScript Week 0 README in the main README for week 3 is broken, or rather the JS Week 0 README no longer exists.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.