IT Girls Challenge: Random Quote Web Site

Tuesday, August 02, 2016

Hi, this is your IT Girls challenge for this week. In this challenge you will need to make "Random Quote" website, based on HTML, CSS and JavaScript.

Note: This is blog post about HTML + CSS + JavaScript weekly exam for IT Girls project in Bosnia.

First of all: Hi, I am Almir Vuk, Developer and Microsoft Student Partner from Bosnia and Herzegovina. I am an author for this week challenge for IT Girls Bosnia Community. In this challenge we will make our "Random Quote" web site using HTML, CSS and JavaScript. HTML and CSS for look and feel and JavaScript for some functionality on web site.

To make this website you can use your knowledge on Web Design. This is final result that you need to have for full points on this challenge:

As you can see this very simple design is based on main tags that we have in HTML.

Design part

For this web site you can use tags: H1 for title, H2 for random quote text, you need to apply some basic style on < input type="button" ... , and for footer copyright text you can use H6 tag and make sure that you insert some url/link on your name. Whole site is organized with two divs, one for title (header) and one for quote and button (main).

Functional part

When user click on button the text of quote need to be changed with some random quote.

Little help and tip for you is to use an array in JavaScript to store the quotes, and when you or other user click on button, button than activate some of your function that will change text with another random quote from an array.

Here is tags explanation for you, if you can't recognize which tags are used in this image:

If you are not sure how to make this kind of web site, and how to get started... first make sure that you have similar web site design using HTML and CSS, each component of web site is scored so don't give up if your site is not 100% same and completely working. For text language in web site you can use your native language or english it is not matter for final result.

So with this challenge you can earn total of 10 points with these components done:

  • HTML = 2 points
  • CSS = 4 points
  • JavaScript = 4 points
  • Bonus for your creativity (custom fonts, similar colors...)

So you can win also by your creativity, but make sure and give your best to make sure that all does work and look like in our example... also make sure to follow main concept of the web site and than use your creativity.

Good luck everyone... and remember in process of development google (research) is your friend, just ask the right questions.

Best regards! Almir Vuk | AV Development

You Might Also Like