Lecture 1


Homework before the lesson

  1. Go to Codecademy and create an account..
  2. Go to http://www.codecademy.com/en/tracks/web/ and finish 'HTML Basics'.

Exercise 1.1

  1. Make a folder and name it 'lecture1'.
  2. Open your favorite text-editor and make an html page with 3 headlines and 3 paragraphs of text. UseLorem Ipsum text. save it with the name index.html in your lecture1 folder.
  3. Check it in your browser.
  4. Validate your html at W3C's HTML Validator.

Exercise 2.1

  1. Make another webpage. This time with 1 headline and 1 paragraph of text. Save it as page2.html.
  2. Add the photo below (right click and 'save as...' in a folder named images inside your lecture1 folder.
  3. Make a link to your index.html page.
  4. In your index.html page make a link to page2.html.
  5. check it in your browser.
  6. Validate.
2240797534_39434b3e53_m.jpg
2240797534_39434b3e53_m.jpg


Lecture 2

Exercise 2.1


  1. Create a folder named Lecture2.
  2. Create an html page with 3 headlines, 3 paragraphs of Lorem Ipsum text, 1 list and 2 photos (choose your own).
  3. Create an internal stylesheet in the head section of your html file.
  4. Use CSS to make the background blue and the text white.
  5. Check every change in your browser.
  6. Make your photos aligned to the left.
  7. Validate your HTML
  8. Validate your CSS

Exercise 2.2

  1. Change your internal stylesheet from 2.1 into an external stylesheet.
  2. Check every change in your browser.
  3. Use a class selector to make 2 of your headlines brown.
  4. Use an ID selector to make 1 of your photos float right.
  5. Give both of your photos a:
    1. 1 pixel white border.
    2. background color of black.
    3. padding of 10 pixel.
    4. margin of 5 pixel.
  6. Validate your HTML
  7. Validate your CSS

Exercise 2.3

This is a challenge!
  1. Figure out how to have a 0 margin on the left side of the left floating photo and on the right side of the right floating image.
  2. Use html comments and CSS comments to explain your code.
  3. Validate your HTML
  4. Validate your CSS
  5. Go to https://gist.github.com
  6. Create an account and save your code as a Gist.
  7. Go here and enter your name and the link to your gist!

Homework after the lecture

Go to Codecademy and finish the section "INTRODUCTION TO CSS".

Lecture 3

Exercise 3.1

Create the following layout with HTML and CSS:
  • Use float: left; on all yellow and red boxes.
  • Use an external stylesheet.
  • Use http://www.dirtymarkup.com to clean up your HTML and CSS.
  • Validate your HTML and CSS
  • Upload a screenshot of your page to Fronter (46h DK2014E>Interaktion>Exercises>Exercise 3.1.). Deadline Sunday 21st of September.
boxes.png

Exercise 3.2

Create the following layout with HTML and CSS:
  • Use an external stylesheet.
  • Use http://www.dirtymarkup.com to clean up your HTML and CSS.
  • Validate your HTML and CSS
  • Upload a screenshot of your page to Fronter (46h DK2014E>Interaktion>Exercises>Exercise 3.2.). Deadline Sunday 21st of September.
generic_page_layout.png


Lecture 4

Exercise 4.1

Transfer Mockup 'Chokoladeshoppen' from PSD to HTML and CSS.
  1. Analyze layout: What columns and/or rows does the layout contain and what are the main 'boxes'.
  2. Build structure: Form the main boxes in your html and style the layout in CSS.
    1. Use the 960 12 column png as background in body and center it.
  3. Analyze layout for css: What can be done with CSS. Do as much as possible with CSS.
  4. Create all none Photoshop CSS
  5. Analyze the graphic/photo parts of the layout: what should be backgrounds and what are image tags.
  6. Export graphics and photos and add them to your code.
  7. Clean your code in dirtymarkup.com.
  8. Validate your HTML and CSS.
  9. Make a screenshot of your finished page and hand-in in Fronter. Deadline Sunday September 21st.



Exercise 4.2 - Extra Challenge

  1. Delete your css from Exercise 4.1 and start over with the 960.gs framework.
  2. Upload your HTML and CSS to Gist and hand in the link in Fronter. Deadline Sunday September 21st.
Here is the css framework file:
Here is a tutorial:
Prototyping With The Grid 960 CSS Framework

Lecture 5

Deadline for exercises are Sunday October 5th.

Exercise 5.1

  1. Get HTML and CSS code from here.
  2. Use a reset stylesheet.
  3. Set the base-font to 16px (body font-size).
  4. Give headline h1-h5 font-weight: 700, top padding 1em and bottom padding 0.5em
  5. Gieve headline h1-h5 the sizes 2em, 1.6em, 1.4em, 1.2em and 1em for the last.
  6. Use your Web Inspector to find the computed sizes of your headlines in pixels and put them in your HTML table.
  7. Change the base-font to 20px.
  8. Use your Web Inspector to find the computed sizes of your headlines in pixels and put them in your HTML table.
  9. Change the base-font to 12px.
  10. Use your Web Inspector to find the computed sizes of your headlines in pixels and put them in your HTML table.
  11. Take a screenshot and upload to Fronter under Interaction>Exercises>Exercise 5.1

Exercise 5.2

Use http://cssfontstack.com/ to find a sans-serif font family and insert it in the CSS from exercise 1.

Exercise 5.3

  1. Use your files from exercise 1.
  2. Find a Google webfont you like and link to it in your document.
  3. Use the font in your document and check that it works.

Exercise 5.4

  1. Complete this tutorial: http://www.smashingmagazine.com/2011/03/14/technical-web-typography-guidelines-and-techniques/
  2. Take a screenshot of your finished page and upload to Fronter.

Lecture 6

Exercise 6.1

  1. Create an HTML file with this content.
  2. Optimize the HTML for search engines. Consider:
    1. Meta tags
    2. Title tags
    3. Image tags
    4. Title attributes in anchor tags
  3. Switch code with the person next to you and check each others code.
  4. Take a screenshot of your improved HTML and highlight the changes in Photoshop or other program.
  5. Upload to Fronter

Exercise 6.2

  1. Take the Google Webmaster Course.


Lecture 7

Exercise 7.1

Complete the following tutorial: http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

Exercise 7.2

Complete the following tutorial: http://www.creativebloq.com/responsive-web-design/build-basic-responsive-site-css-1132756

Lecture 8

Exercise 8.1

Recreate the script from the video:

Exercise 8.2

Create an account at JSFiddle and Implement the script from 8.1.

Exercise 8.3

Sign up at Codeacademy and do the course in Javascript section: "Getting Started with Programming".