Skip to content

Latest commit

 

History

History
111 lines (88 loc) · 5.82 KB

MAKEME.md

File metadata and controls

111 lines (88 loc) · 5.82 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: Give feedback

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.
  • In Trello, you are assigned to one of the cards of your fellow students (in the your class number Week0 HTML/CSS list). Give feedback on the application assignment of your fellow student. Please be critical but most of all give constructive feedback. If there are resources that you used and might be useful, share them.
  • revisit you own application assignment and improve it with the feedback and suggestions given by one of your classmates.

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.

  1. 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").
  2. Your hyf-html-css/week1 should now contain an index.html and a main.css file (and maybe a folder containing your images)
  3. Open the files in your folder to check if all of this worked.
  4. Now go to the settings of your repository:settings overview
  5. And go to Github Pages select "master" instead of "none"pages overview
  6. Now you can view your homework online at: https://hereyouplaceyourgithubusername/hyf-html-css/week1
  7. 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