Name: Mehmet Acikgoz

Student Id: 01

Lesson Overview:

Bootstrap, JavaScript

It covers Bootstrap's basics, especially the Grid Layout in Bootstrap, the fundamentals of RWD (Responsive Web Design), and some JavaScript.

BootStrap

Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.

• Developed at Twitter and open sourced in 2011
• HTML, CSS, and JS framework for developing responsive, mobile first projects on the web
• Grid view in bootstrap CSS is the same as in normal CSS except that we have predefined class names.  

There are two ways to start using Bootstrap on your own web site.

• Download Bootstrap from https://getbootstrap.com/
• Include Bootstrap from a CDN

Detailed info

Javascript

• HTML and CSS are used to define the content and layout of web pages 
• JavaScript is to program the behavior of web pages
• It can change HTML content, attribute, style of any element
• JavaScript was invented by Brendan Eich in 1995 and became an ECMA standard in 1997.
• ECMAScript (ES) is the official name of the language.

ICP Challenge 1 : Rock Paper Scissors

1. Rock-Paper-Scissors Game:

Information about the game https://en.wikipedia.org/wiki/Rock–paper–scissors

Please click on the this link to check out the source code

• Find below images showing the html code for the web page of the game.
• The stylesheet style.css has been applied and referenced in the html document.
• The scipt game.js has been loaded at the end of the html.

Logic:

There are 3 choices for the user to select. As the user clicks a button, an event listener from the script is called. There is a result division which holds a message at start and then updates it according to the game results between computer and user.

Please see below the javascript main function which calculates the game results.

The random choice generator generates a number between 0 and 3 which is the computer's choice in the game. The numbers are representing the choices like rock, paper, and scissors. According to the result it prints out the winner in the screen.

Styling:

Please find below the extra styling options in addition to the bootstrap code in the html.

User Interface

Find below the user interface for the game. It is responsive too when screen size changes.

ICP Challenge 2 : RWD Task

• Create a page that looks like the below mockup
• Download the starter code(source code)
• Follow the TODO instructions in the 'input.html' file
• Make the page responsive and check its responsiveness as the screen size increases or decreases
• The font in the mockup looks different from what we have in the code now
• Find the closest possible font to the one in the mockup and replace the existing font with it (Hint: Visit https://fonts.google.com/ and look for "Play," "Rambla," "Lato," "Orbitron." One of them might be the font we need!)
• Two colored squares and their respective hexadecimal numbers are given on the left side serve as only a reference for the colors used for the text content in the mockup
• They are not a part of the final page that we build. Make the page as close as possible to the mockup. You can use your images, though.

Please click on the this link to check out the source code

The following image shows the usage of container-fluid class. The first div uses only 2 columns in which an image of specific size is displayed and name and description is printed respectively. We see that both the image and title are on the same row next to each other, which is a bootstrap functionality. Also, the font family Rambla has been used for the text.

Then we have one row which contains the body image.

Then we have another div which contains the "Features" which is in h2.

Then we have a row which contains 3 columns. Each of which contains the name of the picture and link.

Here we have the style.css which is used for extra styling in the web page. Default styling is implemented by bootstrap.

Find below the images for the user interface which is responsive when the screen size changes.

When we click on any of the link at the bottom of the page, we have a new tabs pops out as seen in the picture below.

The responsive pages ...