In this exercise, which we will do in class, we are going to make a responsive single-page resume of the brilliant American filmmaker Jim Jarmusch.
First please download the (updated) starter files.
Inside the ZIP file you download is an index.html file, a folder with two images of Jim Jarmusch, and a folder of screenshots.
Inside the screenshots folder are three images. Open them up and think of how to code your content. The screenshots are of the small, medium, and large responsive states.
Start by marking up the HTML in a logical, semantic, and consistent manner. Use the multiple-selection capabilities of your editor to make the markup fast and consistent.
At regular intervals, validate your HTML.
Then start writing your CSS.
Begin by writing the CSS that is common to all responsive states. Then use a series of escalating min-width media queries: build up, not down.
In other words, use a Mobile First approach:
- your phone view should be the default code. It will come before your media queries.
- your medium view should be your first query. Determine the size that’s needed by resizing your browser. (If you open the Inspector, the browser width and height will be revealed in the top right corner of the browser.)
- your large size query should come after your medium query
About The Contact Section
If we have not yet covered Font Awesome in class, you do not have to include the three icons in the Contact Section. If you already know how to use Font Awesome, feel free to include the icons, of course.
Note that the text (and icons if included) is vertically and horizontally centered in the circular container they reside in.
If you need to review any grid properties, the CSS Tricks guide to grid is a good place to start.
Things to Remember
- Responsive images code (max-width: 100%; height: auto;)
- The html and css validators are your friends