Giter Club home page Giter Club logo

ui-basic-first-test's Introduction

UI-Basics Test: First Test

General Instructions

  • Work from the index.html file and a CSS stylesheet.

  • You can use google, but you cannot ask your teacher/s or your classmates for help.

  • Good luck!

Test Instructions

Starting Up

  • Make and link a CSS stylesheet and work from there.

  • Use positioning to fix the header to the top of the page. It should take up 100% of the available space and not cover any of the content below. Give the header a background color of cyan.

Starting Up

Content Styling

  • In the "List" section, change the color of the second list item to blue.

  • In the "Images" section, make all of the images appear side-by-side.

  • Give three h3 elements in the html document the same class.

  • Using the class you gave to the elements, change the color those three h3 elements to orange using rbg. The size of the text should be 2em. The text should appear as uppercase. However, you shouldn't manually uppercase these. You should Google to find and use the CSS property that allows you to specify how to capitalize an element's text.

  • Select all descendant links in the footer. Change the links' color to green on visited and red on hover.

Content Styling

Box Model

  • In the "Box Model" section, add 5 pixels of padding to the section element that contains a paragraph and an image.

  • In the "Box Model" section, make sure the margins of the section element which contains a paragraph and an image is 10% of its parent's width.

Box Model

Images & Links

  • In the "Link" section, insert a link that redirects the user to an image of your favourite book cover. Make sure that the image opens in a new tab.

  • In the "Images" section, add the image tree.jpg from the image folder. Make the image appear circular. Add this link to the tree.jpg image.

Images and Links

Hierarchy

  • Move the <footer> element in the HTML file to the bottom of the document.

Hierarchy

ui-basic-first-test's People

Contributors

github-classroom[bot] avatar ahmadsheerazsaeed avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.