Lecture 1

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
Hansom dude


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
  9. Upload a screenshot of your CSS validation in Exercise 2.1 in the Interaction folder in Fronter

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

  8. Upload a screenshot of your CSS validation in Exercise 2.1 in the Interaction folder in Fronter

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 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 to the exercise in Fronter and hand in the link to your gist!

Homework after the lecture

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

Lecture 3

Exercise 3.1.a

Use flexbox to create this layout:
flexboxa.png

Exercise 3.1.b

flexboxb.png

Exercise 3.1.c

flexboxc.png

Exercise 3.2

Make a menu with flexbox.
  • Don't use classes or ID's
  • Use the following HTML:
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Lecture 4

Exercise 4.1

Make a responsive layout with the following breakpoints.
  • Don't add images yet.
  • Use the HTML below.
  • Hint to hide the aside in the mobile layoute: display
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="Jan Ingemansen" name="author">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <link href="css/default.css" rel="stylesheet" type="text/css">
 
    <title>Responsive</title>
</head>
 
<body>
    <div id="pagewrap">
        <header>
            <h1>Header</h1>
        </header>
 
        <article>
            <h2>Article</h2>
            <p>Well, the way they make shows is, they make one show. That
            show's called a pilot. Then they show that show to the people who
            make shows, and on the strength of that one show they decide if
            they're going to make more shows. Some pilots get picked and become
            television programs. Some don't, become nothing. She starred in one
            of the ones that became nothing.</p>
 
            <p>Normally, both your asses would be dead as fucking fried
            chicken, but you happen to pull this shit while I'm in a
            transitional period so I don't wanna kill you, I wanna help you.
            But I can't give you this case, it don't belong to me. Besides,
            I've already been through too much shit this morning over this case
            to hand it over to your dumb ass.</p>
            <!-- please do not remove this line -->
 
            <div style="display:none;">
                <a href="http://slipsum.com">lorem ipsum</a>
            </div><!-- end slipsum code -->
        </article>
 
        <aside>
            <h3>Aside</h3>
            <p>Look, just because I don't be givin' no man a foot massage don't
            make it right for Marsellus to throw Antwone into a glass
            motherfuckin' house, fuckin' up the way the nigger talks.
            Motherfucker do that shit to me, he better paralyze my ass, 'cause
            I'll kill the motherfucker, know what I'm sayin'?</p>
        </aside>
 
        <footer>
            <h3>Footer</h3>
        </footer>
    </div>
</body>
</html>


Mobile

resp_320.png

Tablet

resp_700.png

Computer Screen

resp_960.png

Lecture 5

Exercise 5.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

  1. Switch code with the person next to you and check each others code.
  2. Take a screenshot of your improved HTML and highlight the changes in Photoshop or other program.
  3. Upload to Fronter

Exercise 5.2

  1. Take the Google Webmaster Course.


Lecture 6


Exercise 6.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 1rem and bottom padding 0.5rem
  5. Gieve headline h1-h5 the sizes 2rem, 1.6rem, 1.4rem, 1.2rem and 1rem 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 6.1

Exercise 6.2

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

Exercise 6.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 6.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 7

  1. Selectors: check our the selectors at CSS selector tester..Try them out and compare to the W3school's jQuery selector Tester.
  2. Read http://www.w3schools.com/jquery/jquery_selectors.asp finish the 6 exercises at the bottom of the page!.
  3. Follow and implement How jQuery works (stop at "Callbacks and functions"). use Dreamweaver.
  4. Go to jsfiddle.net and create an account
  5. Copy the code from this example http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_sel_this and make it into a JSFiddle.
    1. Make some more <p> elements and make them disappear when clicked on. What does this $(this) mean?
    2. update the fiddle and save the link in Fronter under exercise 7.5

Lecture 8

  1. Implement some jQuery on a webpage. Use this page: .
    1. Add and image and make it fade in slowly when the page loads.
    2. Use jQuery to add 3 headlines with 3 paragraphs underneath.
    3. Make the paragraphs into slidepanels like these when you click on the headlines.
    4. add a small image (logo) to the header. Animate it to move in from the left all the way to the right and back to center.
    5. Make three buttons where the user can choose between three different combinations of background and text color.
    6. Make a form in the aside where the user can put in a headline and a paragraph. When they fill it out and click the button the headline and paragraph should be added to the main content of the page (beneath the other text).