Maku-shimo / my_coursera_practice_2

My coursera practice assingment

Module 2 Coding Assignment

Coursera course: HTML, CSS, and Javascript for Web Developers

The assignment:

1. The implementation of the page should follow the mockup illustrations shown below: desktop, tablet, and mobile. The implementation has to be JUST 1 page, NOT 3 pages.

2. The page must include a CSS file. No inline styles allowed. The CSS file should be placed into a css folder under the solution container folder, e.g., module2-solution/css.

3. NOT allowed to use any CSS (or Javascript) framework for this assignment, including Twitter Bootstrap CSS Framework. No framework CSS files should even be referenced in index.html.

4. The browser should display a desktop version of the site when the width of the browser window is 992px and above. Tablet view should appear only if the width of the browser window is between 768px and 991px, inclusively. Mobile view should appear only if the width of the browser is equal to or less than 767px.

5. The site consists of a page heading and 3 sections (all in one row in the desktop view). Each section contains some text. Text doesn't matter. How the sections are laid out on the screen depends on the width of the browser window.

6. Layout: In the desktop view (992px and above), each of the 3 sections should take up equal amount of space on the screen. As one makes the browser window wider or narrower, each section should become wider or narrower. For a visual reference of this view, see the desktop mockup illustration below.

7. Layout: In the tablet view (between 768px and 991px, inclusively), the first 2 sections should be in the first row and be of equal size. The 3rd section should be in the second row and take up the entire row by itself. For a visual reference of this view, see the tablet mockup illustration below.

8. Layout: In the mobile view (equal to or less than 767px), each section should take up the entire row. For a visual reference of this view, see the mobile mockup illustration below.

9. Section title region: Each section should have a section title region that is always positioned at the top right corner of the section no matter the view (desktop, tablet or mobile). Copy the titles from the mockup illustration (i.e., Chicken, Beef, Sushi) or come up with your own.

10. Spacing: Pay attention to the spacing shown in the mockup illustrations. Note the spacing between sections (both horizontal and vertical). Note the horizontal spacing between the edges of the section and the edges of the browser window. Also, note the spacing between the dummy text in each section and the edges of the section. Lastly, make sure the dummy text is "pushed down" enough so it doesn't overlap the section title region.

11. Borders and Colors: Each section should have a background color set to some color (of your choosing). Set the background color of each section title region to some unique color (of your choosing). Make sure that the background color still allows the user to view the text in the section and section title regions. Depending on the color you choose, you may want to change the color of the text so it can be easy to read. Set a black border on both the section and section title region that is 1px thick.

12. you may want to explicitly set a font-family for the text in your page, so you are not stuck with the default browser font family. Also, set the font size of the heading and section title to be 75% larger and 25% larger (respectively) than the font size of the dummy text.

Here is the mockup illustration of the desktop version of the site. Final result should look very close to this mockup.

Here is the mockup illustration of the tablet version of the site. Final result should look very close to this mockup.

Here is the mockup illustration of the mobile version of the site. Final result should look very close to this mockup.