| summary | time | deliverables | download |
|---|---|---|---|
Create a card interface with a toolbar of actions using <img srcset> and SVG icons. |
1.5 hours |
1 HTML file, 4 CSS files, images |
- Fork this repository.
- Export the icons from the Illustrator file as SVGs and use Spritebot to create a sprite sheet.
- Export the image from Photoshop twice, once for retina (
975pxwide) & once for non-retina images (480pxwide). - Create the responsive action card as shown in the screenshots.
- Use the
<img>tag with thesrcset&sizesattributes—for when it’s exactly the same image presented in different resolutions. - Some of the HTML is already started, just a basic grid wrapper.
- Text can be found inside the
content.txtfile. - Run it through Markbot and make sure it passes all the checks.
- Typefaces:
Mukta Mahee(normal, bold) — Already in the HTML - Colours:
#fff,#000,#333,#555,#e2e2e2 - Button padding:
.3em - SVG icon sizes:
.i-1(Sized based on type, not pixels) - Expected class names:
.action-card,.action-btn,.action-tools-top,.action-tools-bottom - Expected image filenames:
icons.svg,blue-bolt-480.jpg,blue-bolt-975.jpg
There’s an HTML tag that’s expected in this assignment that you’ve likely never used before: <menu>—it denotes a grouping of <li> tags that represent a toolbar of actions. It’s kinda like HTML’s fourth list type specifically for application toolbars.
Use 2 <menu> tags: 1 to represent the top toolbar & 1 for the bottom toolbar.
Visually match the images in the “screenshots” folder and create the interaction shown in the linked video.
- Final screenshots in the “screenshots” folder.
- Watch this video to see how it interacts.
Drop this folder into your Markbot application. Make sure to fix all the errors. And submit for grades using Markbot.