In this video, put the previous two lessons to use.
(gentle whooshing)…- [Man] Okay, now it's your turn.…Here's a challenge involving image resizing,…spacing, alignment, and floating.…In the exercise files for this video…you'll find the files you need for this challenge.…The original sizes for each image is listed here.…The HTML file I've provided you…has comments that tell you what needs to be done.…The heading on lines 17 to 21…will have the flags of Germany and Munich…on either side of the text,…vertically aligned with the middle of the text.…
The main text on lines 22 to 33…will have the image of the museum clock at the left,…and the view from the top of the museum on the right.…The paragraph on lines 39 to 42,…giving information on how to get to the museum,…must appear below both pictures, not between them.…Here's what the result should look like.…Your webpage might not look exactly like this,…depending on the font size and screen width you use,…but you will have to make the width and height of the flags…smaller than their normal size to get the right proportions.…
AuthorJ. David Eisenberg
- Using the img element
- Resizing images
- Obtaining images for your website
- Image formats and when to use them
- Styling images with CSS
- Adjusting borders, margins, and padding
- Adding background images
- Testing screen resolutions
- Autonumbering figures with CSS
Skill Level Intermediate
Design the Web: Responsive SVG Imageswith Chris Converse22m 46s Beginner
1. Image Essentials
2. Image Formats
3. Images and CSS
4. Responsive Images
Next steps1m 19s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.