A Series of Short Videos
To learn about the Emmet commands and concepts you need to do this exercise, you can use either of the following resources:
- My Emmet “Cheatsheet”
- My “Emmet Basics” Loom video series (skip number 7)
The video series goes into more detail, but either resource should be sufficient to do the tasks in this exercise.
Make sure that you keep a copy of the equations: I want the equations, not the HTML that’s produced.
Five Emmet Tasks
For each of the following conditions, make an emmet equation to produce the described markup. Be sure to test each equation, look at the resulting code and test it in a browser to see if works as intended.
Remember, though, that you will handing in the emmet equations, not the compiled html.
- Make a list-based navigation menu with 12 testing (#) links, with text that increments by one with each link. The clickable text must say Link 1, Link 2, Link 3, etc. Make each link also have a class of menu-item1, menu-item2, menu-item3, etc.
- Make three sections with classes of row and article-group-wrapper.
Each of these sections will have 4 articles inside.
Each article will have:
– an h2 element with 3 words of lorem ipsum inside it,
– one paragraph element with 12 words of lorem ipsum inside it,
– an h3 with the exact phrase hotpink rubber chicken inside it: each h3 must be a link to langara college’s website.
– and a paragraph element with 17 words of lorem ipsum. - Make a table with
– a caption that says “Bus Schedule”
– one table header row with 3 header cells (1 word of lorem ipsum inside each)
– 4 rows with 3 cells each. Each cell will have the phrase cell + the number of the cell in the row.
If you haven’t done tables yet in class, here’s the basics.
Note: you do not need to style the table, in case you’re wondering how to put the caption at the bottom (that’s done with css).
4. Using this link for additional information, generate six unique random images in the webp file format. Each image must be 600 by 400 px dimension.
5. Examine the following graphic. This is an HTML fieldset.
Using this MDN page and that MDN page as references, make an emmet equation that makes a fieldset with the following characteristics:
- the phrase Graphic Equalizer appears first, in the top left as in this screenshot. This is an HTML legend element.
- each label (100k, 200k, etc) is associated with its associated input ID via unique for attribute value
- each input has a unique name and id. In HTML, each ID attribute can appear only once per page. Each input’s ID and name can match, however.
- each input can have a possible range of values from -15 to 15.
- the slider moves in increments of 7.5 (so there are five steps in each slider)
- finally, make sure that each label and input combination is inside a div with a class of label-input-wrapper.
When done, make an HTML file called emmet-equations-your-name.html
Files not named correctly will not be marked.
In between the opening and closing body tags, put each of your four completed equations on a separate line. Do not expand them by pressing tab: as noted above, I want the equations, not the markup.
Please also put a few empty lines between each equation.
After saving the file, put it in a folder with your name on it, then zip the folder.
Finally, hand the zip into our course folder.
At Langara, that’s Brightspace. At Emily Carr, that’s our Moodle course shell.