Skip to content

ActivitiesΒΆ

  1. 401-html-css. Given the following html file HTML 5 and CSS 3 create an stylesheet in order to make the html file looks like the screenshot taking into account that the body width is 700px.

    After that, choose from Google Fonts:

    • a sans serif font for the headings
    • a serif font for the body.

  2. 402-html-css. Given the following html file HTML 5 and CSS 3 vs. 2 create an stylesheet in order to create a perfect match with the provided screenshot. Use the Firefox extension Pixel Perfect Pro.

    The required fonts are included in the HTML file and they are:

    • Noto Sans
    • Noto Serif
    • Noto Sans Mono.

    Upload the project in a zip file including a screenshot of the resulting page with Pixel Perfect Pro activated.

  3. 403-playing-with-boxes. Given the following html file Playing with boxes create an stylesheet in order to create a match as similar as possible with the provided screenshot. Use the Firefox extension Pixel Perfect Pro to compare.

    These are the basic requirements:

    • HTML file cannot be modified.
    • The body element will have a width of 700px.
    • The four div elements will have a width of 250px.
    • In the CSS file, add a comment, at the begining with your full name.
    • You have to deliver two files: an screenshot of the pixel perfect comparison and the css file.

  4. 404-landing-page. Given the following html file Landing page create an stylesheet in order to create a match as similar as possible with the provided screenshot. Use the Firefox extension Pixel Perfect Pro to compare.

    These are the basic requirements:

    • The HTML file can be modified to add images or class selectors.
    • You have to deliver a zip file with the entire website.

  5. 405-landing-page-columns. Modify the previous task in order to display the services in columns. Use Pixel Perfect Pro to compare the resulting page.

  6. 406-fundamental-layout-comprehension. Do the following task Fundamental layout comprehension resolving it using the Float and Flexbox.