Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Exercises for adapting with Emmet (Ex Zen-coding) CSS-style selector
1) Look up on the internet the simple code for generating the base html5 structure;
2) What would be the code for generating the following structure:
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
3) What would be the code for generating a table with 10 rows and 2 columns?
4) Create a code for generating the following structure:
<html>
<head>
<title></title>
</head>
<body></body>
</html>
5) Create a code for representing an 8x8 checkers board, such that a td which would represent a black cell has the class "black", and the same logic for the white cells.
6) Explain (with words, briefly) what the following code would generate:
table>tr*3>td*5
7) Create a webpage with a 5*5 table with the background color teal and the rows counting one through five;
8) Create an ordered list of 12 images, such as their source images would be inside the "img" folder, and were called image[1-12].png, and having the alt with their respective order;
9) create the code for a yellow table the shape of an "L" (the table has to have "border" enabled).
10) Join the results of the previous two exercises by pointing each of them in a different div, and both at the same level;
11) Create a webpage consisting of three parts:
* Banner: Will be an image stored inside "img" folder, called "banner.jpg"
* Content: will have a list of 10 posts (such as a blog), and will be positioned to the left, and beneath the banner. The posts will have the following structure:
- title (h3, centered);
- content (paragraph, justified);
- caption for "add comments";
- textarea for comments;
- submit button with form action to "comment.php" and method = post;
- link for the respective comments page (up to you, just need to have a link beneath);
* Sidebar: will have a list of links to previous pages, numbered 1 through 10;
(Whether you add the styles to keep the content and sidebar side by side from an external file or using the style property of the divs is up to you);
//ANSWERS BELOW
Obs: Some of these answers may not be the best practices, but instead are used for educational purposes (sometimes overcomplicated on purpose)
1)
html:5
2)
div>ul>li*3
3)
table>tr*10>td*5
4)
html>(head>title)+body
5)
table.board>((tr>(td.black+td.white)*4)+(tr>(td.white+td.black)*4))*4
6) A table with three rows and 5 columns;
7)
html:5>table[style="background-color: teal"]>tr*5>td{$}*5
8)
ol>(li>a[src="img/image$.png"][alt="Image $"])*12
9)
table>(tr*10>td[style="background-color: yellow"]*5)+(tr*5>td[style="background-color: yellow"]*15)
10)
(div>(ol>(li>a[src="img/image$.png"][alt="Image $"])*12))+(div>table>(tr*10>td[style="background-color: yellow"]*5)+(tr*5>td[style="background-color: yellow"]*15))
11) Answer using an external css file called css/style.css (which is left as further exercise to create)
html:5>(link[rel="stylesheet"][type="text/css"][href="css/style.css"]>)+div#wrap>(div#banner>img[src="img/banner.png"]>a[href="home.php"][alt="Blog"])+(div#content>div.post*10>center>(h3{This is post $})+p{This is a default text, acting as a placeholder for post $.}+br+p{Please comment!}+form[method="get"]>(input[name="comment"][type="text"])+input[type="submit"][value="Submit"])+(div#sidebar>ul>(li>a[href="page$.php"]{Page $})*10)
@malcolm-kee

This comment has been minimized.

Copy link

malcolm-kee commented Feb 10, 2019

Thanks for creating this! I'm using it to teach junior developers on emmet.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.