|
32 | 32 | <!-- REQUIRED TOOLS --> |
33 | 33 | <div class="info-required">Required Tools: Google Chrome and a text editor</div> |
34 | 34 | <!-- INTRODUCTION --> |
35 | | - <div class="info-intro">In the spirit of Valentine's Day, you will be building a very basic webpage with HTML, CSS and images.</div> |
| 35 | + <div class="info-intro">Today, we'll be learning how to place, position, and space HTML elements. We'll explore different CSS styles, such as margin, padding, border, and position. You'll create a photo gallery similar to Instagram, but better: Canadagram.</div> |
36 | 36 | </div> |
37 | 37 | </div> |
38 | 38 | <div class="body"> |
|
44 | 44 | <!-- Use UL LI Tags for each lists --> |
45 | 45 | <!-- Use P Tags with "caption" class for paragraph captions (60% opacity) --> |
46 | 46 | <!-- Use IMG Tags for assets/images --> |
47 | | - <p>Time to put the HTML you learned to use! For this hands-on, we will be making a simple registration page for a dating site.</p> |
48 | | - <img src="assets/images/handson.jpg"> |
49 | | - <p>At the end of this hands-on, you should have something like the page above.</p> |
50 | | - <div class = "body-header">Step 1: Set Up HTML</div> |
51 | | - <p>Every HTML file should have the following basic structure: |
52 | | - <br> |
| 47 | + <p>At the end of this hands-on, you should have something like the page below.</p> |
| 48 | + <img src="assets/images/handson.png"> |
| 49 | + <div class = "body-header"><br>Step 1: Set Up HTML</div> |
| 50 | + <p>We're going to write all the HTML elements with classes first, then style. Let's begin by making a "container" div inside <body>. Make sure you put all the other HTML tags inside this container. You'll see later on why we do this, but in a nutshell, container divs make it easy to move large blocks of HTML around the page.</p> |
53 | 51 | <b> |
54 | | - <!DOCTYPE html> |
55 | | - <br> |
56 | | - <html> |
57 | | - <br> |
58 | | - <head> |
59 | | - <br> |
60 | | - </head> |
61 | | - <br> |
62 | 52 | <body> |
63 | 53 | <br> |
| 54 | + <div class="container"> |
| 55 | + <br> |
| 56 | + </div> |
| 57 | + <br> |
64 | 58 | </body> |
65 | 59 | <br> |
66 | | - </html> |
67 | 60 | </b> |
68 | 61 | <br> |
69 | 62 | </p> |
70 | | - <div class = "body-header">Step 2: Add Content</div> |
71 | | - <p>Start making your registration page by giving it a heading. Then, using <b><input></b> and <b><select></b> tags, provide the user with space to <em>type</em> their first name, and <em>choose</em> their gender, their gender preference, and their country using a dropdown menu. Put these options in a cohesive sentence like in the example page above. Lastly, make a "Submit" button using the <b><button></b> tag.</p> |
72 | | - <div class = "body-header">Step 3: Image and Style</div> |
73 | | - <p>Add an image before your text to spice this page up. |
74 | | - <br>If you refresh your page, you'll likely see that your image is HUGE. Fix this by adding some CSS.<br>Create a new file and call it "style.css". Link to this file in your html using:<br><br><b><link rel="stylesheet" type="text/css" href="(path to style.css file)"></b><br><br>Put this inside the <b><head></b> tag of your HTML file. <br>Then, select the image and change its height to be around 300px. |
| 63 | + <p>Our website needs a title, description, and sign-up button! Using <b><h1></b> and <b><h4></b>, give your site a name and description. Also, make another div with the class "button". We'll style this later to look like a button. </p> |
| 64 | + <p>Your HTML should look something like this:</p> |
| 65 | + <img src="assets/images/example1.png"> |
| 66 | + |
| 67 | + <p>Next, let's create the HTML for the images. We'll make one image for now, then just copy and paste the code after we finalize the design.</p> |
| 68 | + |
| 69 | + <p>Create a <b><div></b> with class "image-container", and inside "image-container", create an image tag. It's good practice to put your <b><img></b> inside <b><div></b>. Use any image you like.</p> |
| 70 | + |
| 71 | + <p>Updated code screenshot!</p> |
| 72 | + <img src="assets/images/example2.png"> |
| 73 | + |
| 74 | + <div class = "body-header"><br>Step 2: Make it Pretty</div> |
75 | 75 | <br> |
76 | | - </p> |
| 76 | + <img src="assets/images/screenshot2.png"> |
| 77 | + <p>Canadagram looks a bit ugly now - but don't worry! With a bit of CSS, we can easily make it pretty.</p> |
| 78 | + <p>Give your entire website a font facelift by using targeting body in your CSS. Additionally, let's style .container accordingly:</p> |
| 79 | + .container { |
| 80 | + <br> background: #eee; |
| 81 | + <br> text-align: center; |
| 82 | + <br> width: 700px; |
| 83 | + <br>} |
| 84 | + |
| 85 | + <p>Refresh the page and you'll see a gray box with the title centered. The photo is still too big, so let's fix that. We can select all <b><img></b> tags and style:</p> |
| 86 | + img { |
| 87 | + <br> height: 200px; |
| 88 | + <br> width: 200px; |
| 89 | + <br>} |
| 90 | + |
| 91 | + <p>Oh no - The images are distorted! That's because you're manually setting the width <em>and</em> the height of the image. The image will be resized to fit your dimensions, causing it to warp. Usually, you'll only want to set either the height <em>or</em> the width - not both. But in this case, we want our images to be square. How can we fix that? <b>Use this nifty style: object-fit: cover</b></p> |
| 92 | + img { |
| 93 | + <br> height: 200px; |
| 94 | + <br> width: 200px; |
| 95 | + <br> object-fit: cover; |
| 96 | + <br>} |
| 97 | + |
| 98 | + <p>You can read more about this nifty trick <a href="https://medium.com/@chrisnager/center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87">here</a>. Basically, object-fit: cover centers the photo within the 200 by 200px square, and <em>automatically crops</em> any part of the image that falls outside of the square - without distortion.</p> |
| 99 | + |
| 100 | + <div class = "body-header"><br>Step 3: Positioning and Spacing</div> |
| 101 | + <p>Let's copy and paste the .image-container divs to add a few more photos on the page. These are <b><div></b> tags, so recall that they stack <em>vertically</em>.</p> |
| 102 | + <br><img src="assets/images/screenshot3.png"> |
| 103 | + <p>Fix this by adding <b>display: inline-block</b> to <b>.image-container</b>. The images are pretty close together, so let's give them some margin. Add <b>margin: 10px</b> to <b>.image-container</b>. This adds a 10px margin to every side of each <b><div></b> with the tag .image-container. Finally, add <b>border: 5px solid white</b>.</p> |
| 104 | + <p>Notice that the edge of the gray box is very close to the text and images. Instead of fiddling with the width and possibly messing up the layout, let's just use <b>padding</b> to "push" the edge of the box out. Add <b>padding: 30px</b> to <b>.container</b>. This adds 30px of space along the inner edge of your gray .container.</p> |
| 105 | + |
| 106 | + <div class = "body-header"><br>Step 4: Final Touches</div> |
| 107 | + <p>Your website looks pretty nice! (I hope). However, the content isn't centered. To fix that, add <b>margin: auto</b> to <b>.container</b>. Now you see why we put everything inside <b>.container</b> - it makes it easy to move all the elements, including centering them!</p> |
| 108 | + <p>Finally, let's make the button pretty. Add the following styling to <b>.button</b>:</p> |
| 109 | + .button { |
| 110 | + <br> background: #517fa4; |
| 111 | + <br> color: white; |
| 112 | + <br> margin: 20px auto; |
| 113 | + <br> padding: 10px 15px; |
| 114 | + <br> width: 200px; |
| 115 | + <br>} |
| 116 | + <p>Play around in web inspector to see what each one of these styles do, and try making your own button.</p> |
| 117 | + |
77 | 118 | </div> |
78 | 119 | </div> |
79 | 120 | </div> |
|
0 commit comments