Skip to content

MAKEME.md

Latest commit

 

History

History
119 lines (86 loc) · 5.35 KB

MAKEME.md

File metadata and controls

119 lines (86 loc) · 5.35 KB

Homework Week 1

Here you find the readings you have to complete before the second lecture.

Learning goals for this week:

 • The division of labor between HTML and CSS
 • Introduction to HTML:
    • Parents, children, attributes
    • Indentation
    • Semantic elements
    • Paragraphs, links, images, lists
 • Introduction to ARIA:
    • What is ARIA and why is it important?
    • Using ARIA in HTML
    • Validating ARIA
 • Introduction to CSS:
    • Where can we write it and what difference does that make?
    • Selectors (id, class, element type), properties
    • How to structure a CSS file
    • Naming things
 • External files: relative and absolute paths
 • Getting to know your text editor

Step 1: Read and watch

Good learning practices

Before you start check out this video and/or this article about good learning practices.

HTML5

Read about HTML5

CSS:

Step 2: Upload to GitHub

Deadline Monday

  • Please create a repository on Github, call it hyf-html-css.
  • Inside this repository create a folder week0.
  • Use the code of the application assignment you have made(in codepen.io), copy and paste the html in a index.html file and the css in a style.css file and upload it to github in the week0 folder.
  • For better instructions on how to do this please check the how to hand in homework down below.

Don't forget, you can always revisit Khan Academy: Into to HTML/CSS: Making web pages if you are stuck and need a reminder

Step 3: Assignment

Deadline Saturday

  • Make your own web resume:
    • One page
    • Two files: HTML and CSS
    • Include the following:
      • Your personal info
      • A picture
      • A few lines about who you are
      • Education
      • Work experience
      • Please do not include your current address, phone number and mail address, your CV will be hosted on Github
    • Include the following:
      • Different types of headings (<h1>, <h2>)
      • A list (<ul>). In this list include the learning strategies you used making your resume. Also include some of the resources/references, this can be documentation/video etc, that where helpful.
      • Another list (<ul>). In this list you include the most important platforms/resources where you can find all hyf related information.
      • <img>
      • <p>
      • Some CSS properties: margin, padding
      • Make sure that you page looks nice, and that your text is readable & accessible (ARIA)
    • BEFORE you hand it in, read the Style guide and check your files (you can also use the HTML validator).

How to hand in Homework:

Steps:

  1. In your newly created Github account search for the invitation from the HackYourFuture organization to you join your classes team.

  2. Create a new repository (name it something like hyf-html-css) make sure you select the option: initialize with README.

  3. Inside your new repository create a folder called "week1". If you have trouble finding out how to create a folder in Github check this Stack Overflow question

    Tip: you can also create a "week1" folder on your local computer that contains you files and upload the entire folder to Github.

  4. Upload the files you created on your computer (step 3 of the homework) inside this folder, write a description for this “commit” (for example: "homework week1").

  5. Your hyf-html-css/week1 should now contain an index.html and a main.css file (and maybe a folder containing your images)

  6. Open the files in your folder to check if all of this worked.

  7. Now go to the settings of your repository:settings overview

  8. And go to Github Pages select "master" instead of "none"pages overview

  9. Now you can view your homework online at: https://hereyouplaceyourgithubusername.github.io/hyf-html-css/week1

  10. Please upload a link to your homework in Trello.

Here is an example of how your homework repository should look:

Fun to check out:

Shapes of CSS

Tools for testing accessibility:

Chrome: Accessibility for developer

Software

Step 4: Prepare for next class

Deadline Sunday morning

Go trough the reading material in the README.md to prepare for your next class