Web-design Module 2-H​TML, CSS, and Javascript for Web Developers Solved

Coursera course: H​TML, CSS, and Javascript for Web Developers Woo­hoo! You get to do some coding! Exciting!

Time to complete:​1­2 hours. It may take you less time than that if you’ve absorbed the material in this module well. A​sk questions in Discussions if you get stuck! We are all learning, and going through getting stuck and then unstuck (even with someone’s help) can be a very valuable learning experience!

Don’t get scared by the number of points below. It’s really not so much. I just wanted to explain everything as clearly as I could and break it down into smaller steps.

Here is what you will need to complete the assignment:

1. (Ifyouhaven’talready)CreateaGitHub.comaccountandarepositorythatyou will use for this class.
2. (Ifyouhaven’talready)FollowtheDevelopmentSetupVideo(beginningof Module 1) instructions on how to create a repository and set it up such that you can host and view your finished web pages on GitHub Pages, i.e., GitHub.io domain name. You will need to provide that URL for your peer review.
3. Createafolderinyourrepositorythatwillserveasacontainerfolderforyour solution to this assignment. You can call it whatever you want. For example, ‘module2­solution’ or ‘mod2_solution’, etc. Create an ‘index.html’ file inside the solution container folder, e.g., ‘module2­solution/index.html’.

4. Theimplementationofthepageyouwillbecreatingshouldfollowthemockup illustrations shown below. You are provided 3 mockups: desktop, tablet, and mobile. Your implementation has to be JUST 1 page, NOT 3 pages. In other words, you will be creating a single, responsive page.
5. YourpagemustincludeaCSSfile.Noinlinestylesallowed.YourCSSfile should be placed into a ‘css’ folder under the solution container folder, e.g., ‘module2­solution/css’.
6. YouareNOTallowedtouseanyCSS(orJavascript)frameworkforthis assignment, including Twitter Bootstrap CSS Framework. No framework CSS files should even be referenced in your index.html, even if you are not using them. H​owever, you MAY use the simple responsive framework we developed in Lecture 24 as a starting point for this assignment.
7. Youmustimplementthefollowingbreakpointsthatwillbeconsidereddesktop, tablet, and mobile. 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.
8. Yoursiteisverysimple.Itconsistsofapageheadingand3sections(allinone row in the desktop view). Each section contains some text. You can make it dummy text/”lorem ipsum”, it doesn’t matter. How the sections are laid out on the screen depends on the width of the browser window. (H​int: use media queries discussed in Lecture 23.)​
9. Layout:​Inthedesktopview(992pxandabove),eachofthe3sectionsshould take up equal amount of space on the screen. As you make the browser window wider or narrower, each section should become wider or narrower. (H​int: use percentages to define width and use the ‘float’ property. See Lecture 24)​. For a

visual reference of this view, see the desktop mockup illustration below.

10.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.

11.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.

12.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., C h i c k e n , B e e f , S u s h i ) o r c o m e u p w i t h y o u r o w n . ( H​ i n t : u s e r e l a t i v e a n d absolute positioning and offsets as discussed in Lecture 22.)​

13.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. (H​int: use margins and padding and use border­box as your box­sizing as discussed in Lecture 19.)​

14.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. W​arning: While not specifying borders

and colors according to the requirements does not hurt your grade so much, not doing so will make it much harder for your classmates to peer grade the rest of your assignment, possibly resulting in a much lower grade.

15.(OPTIONAL) Y​ou will NOT be graded on this,​but 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. Your final result should look very close to this mockup.

Here is the mockup illustration of the tablet version of the site. Your final result should look very close to this mockup. Note that in this view, the 3rd section takes up the entire row.

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