Fashion Institute of Technology http://www.iraworks.com/fit Introduction to Web Design / CT244 Instructor: Ira Epstein iraepst@gmail.com Class 9 / 4-3-18 1) Attendance and Announcements... 2:10-2:20 a) IMPORTANT: Restaurant Menu Final Due Date is next Tuesday, 4/10 b) SUBMIT your draft now: with all elements in a folder named, CT244-class8-FirstnameLastname c) Download this week s assets folder 2) Recent Subjects a reminder... 2:20-2:30 a) Information on the 3 subjects below can be found in our last handout of 3/20. Visit http://www.iraworks.com/fit/class8-ct244.pdf i) Responsive Columns & Grids ii) Google Fonts iii) Background Photos 3) Advancing Responsive Web Design... 2:30-3:10 a) Setting the Viewport i) The viewport is the user's visible area of a web page. Essentially, this is defined by the size of the browser window inside the size of the specific screen. A small cell phone would have the smallest Viewport ii) The code below ensures that your phone will not automatically zoom out, so that there will be no need for visitors to pinch or reverse-pinch your site. The following code is placed Between <head>.</head> on every HTML page <meta name="viewport" content="width=device-width, initial-scale=1.0"> iii) For more on Viewport, see https://www.w3schools.com/css/css_rwd_viewport.asp b) Using box-sizing:border-box reviewed i) CSS styles that set a width will bloat up if you add padding or a border! That makes sizing confusing. Add the below to your style sheet, which sets all block level elements (at once) to maintain their widths (including all padding & borders) *{ box-sizing:border-box; ii) For more on box-sizing, see https://www.w3schools.com/css/css3_box-sizing.asp 4) Break... 3:10-3:35 5) Advancing Responsive Web Design part II... 3:35-4:40 a) Using Media Query & Breakpoints i) A Media Query is code that established what styles need to change for specific screen sizes. In general, many of your elements will change without the query; for example, DIVs that have used percentages for sizing will adjust properly. But your font sizes will not (unless otherwise instructed). ii) The CSS code below would shrink a larger <h1> to a more manageable size for a cell phone. I recommend putting it at the bottom of your style sheet @media only screen and (max-width: 600px) { h1{ font-size: 16px; b) Media Query, Cell Phones, & Collapsing Multiple Columns i) Cell Phones may not be able to accommodate multiple column layouts. To collapse your grid into 1 column, we use a Media Query to reset your DIVs classes (like.col) to a width of 100%. We ll also reset the float to none. As follows:
@media only screen and (max-width: 600px) {.col{ width:100%; float: none; 6) TWO Samples... 4:40-4:45 a) The HTML SAMPLE i) Note the Meta/Viewport code in the head section (line 4) ii) Note how all the <div> containers use the class called col iii) Note also, how each row follows the same precise pattern b) The CSS SAMPLE i) Note how.col gets defined with width, margin, & float ii) Also, see (line 62) how Media Query makes necessary changes for smaller screens menu.html 1 <html> 2 <head> 3 <title>the Soup Store MENU</title> 4 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 5 <link href="https://fonts.googleapis.com/css?family=great+vibes Montserrat:400,500" rel="stylesheet"> 6 <link href="foodmenu.css" rel="stylesheet" type="text/css"> 7 </head> 8 9 <body> 10 <h1>the Soup Store</h1> 11 <span class="slogan">we're Souper Duper!</span> 12 <hr> 13 <!-- Row 1 start --> 14 <div class="col"> 15 <h2>spinach Soup</h2> 16 Milk, eggs, spinach, garlic, onion, potato, chicken stock, lemon 17 </div> 18 <div class="col"> 19 <img src="images/soup1.jpg" alt=""> 20 </div> 21 <div class="col price"> 22 $15.00 23 </div> 24 25 <!-- Row 2 start --> 26 <div class="col"> 27 <h2>tomato Soup</h2> 28 Fresh tomatos, garlic, onion, potato, oregano, lemon 29 </div> 30 <div class="col"> 31 <img src="images/soup2.jpg" alt=""> 32 </div> 33 <div class="col price"> 34 $15.00 35 </div> 36 </body> 37 </html>
foodmenu.css 1 body{ 2 margin: 5% 15% 35% 15%; 3 font-family: 'Montserrat', sans-serif; 4 background-image:url("images/white-setting-background.jpg"); 5 background-repeat:no-repeat; 6 background-size:cover; 7 background-color: #d3d3cd; 8 9 *{ 10 box-sizing:border-box; 11 12 h1{ 13 font-family: 'Great Vibes', cursive; 14 font-size: 100px; 15 color:#5e4363; 16 margin-bottom: 0; 17 18 hr{ 19 margin-bottom: 100px; 20 border: 0; 21 border-bottom: 1px dashed #cccccc; 22 background: #999999; 23 24 h2{ 25 font-family: 'Great Vibes', cursive; 26 font-size: 30px; 27 color:#6f5075; 28 margin:0 0 5px 0; 29 30.col{ 31 width:31%; 32 height: 125px; 33 float:left; 34 margin:1%; 35 padding: 2px; 36 /* h-offset, v-offset, blur, spread, color */ 37 box-shadow:10px 25px 50px 3px #d3d3cd; 38 39 img{ 40 max-width: 100%; 41 height:auto; 42 display: block; 43 margin: auto; 44 padding-top: 10px; 45 46.price{ 47 font-family: 'Great Vibes', cursive; 48 font-size: 32px; 49 color:#6f5075; 50 text-align: center; 51 padding-top: 90px; 52
53.slogan{ 54 font-family: 'Great Vibes', cursive; 55 font-weight: 500; 56 font-size: 48px; 57 color:#6f5075; 58 margin-left:100px; 59 60 61 /* URGENT: sets changes for "viewports" UNDER 700px */ 62 @media only screen and (max-width: 700px) { 63 h1{ 64 font-size: 38px; 65 66.slogan{ 67 font-size: 18px; 68 69 hr{ 70 margin-bottom: 42px; 71 border-bottom: 1px solid #5e4363; 72 73 h2{ 74 font-size: 24px; 75 76.col{ 77 /* new width forces the DIVs into 1 column */ 78 width:100%; 79 /* assures that they fall BENEATH each other*/ 80 float:none; 81 /* the shadows looked weird in 1 column */ 82 box-shadow:none; 83 84.price{ 85 font-size: 32px; 86 padding-top: 0; 87 /* in 1 column I preferred to use a bottom border as a "separator" */ 88 border-bottom:dashed.5px; 89 height: 40px; 90 margin-bottom: 35px; 91 92 img{ 93 padding-top: 0; 94 95 7) FOR NEXT CLASS see CHECKLIST on the next page... 4:45-5:00
DUE: Tuesday 4/10 The Responsive Restaurant Menu Project By next week your goal is to have a completed page in HTML with an External Style Sheet & images, creating an original 1-page menu for an imaginary restaurant of your invention As follows: 1. Your page must establish the type of food sold & the name of your imaginary restaurant 2. Your simple working layout will include a. The restaurant s name & a slogan b. At least 5 different dishes with names, descriptions, images, and prices c. Optionally, a logo d. The use of 1 or 2 Google Fonts 3. Responsive requirements a. The final version will be completely responsive for all devices b. Your design should use percentages to accommodate most screens (even without the Media Query) c. Media Queries are required to accommodate other changes for the smallest viewports such as cell phones. I expect your <h1> to need it and probably more! d. Additionally, include: i. VIEWPORT / the HTML (see #3a, Advancing Responsive Web Design ) ii. BOX-SIZING / the CSS (see #3b, Advancing Responsive Web Design ) 4. Your folder will include: a. Your index.html, your working style sheet, & a complete images folder 5. Name and submit your folder a. Name your complete (tested) folder: CT244-class9-FirstnameLastname b. Drop it into to my Transport/Dropbox (at the beginning of next class) c. Also save a copy for yourself very important, you will need it in class For samples see the class 7 handout at- http://www.iraworks.com/fit/class7-ct244.pdf Ira Epstein 2018