Browse Source

Some tweaks after teaching the HTML and CSS introduction class

tags/v0.2.1
Peter J. Jones 1 year ago
parent
commit
87234bc06d
Signed by: Peter Jones <pjones@devalot.com> GPG Key ID: 9DAFAA8D01941E49

+ 3
- 1
content/css/footer.md View File

@@ -1,7 +1,9 @@
# CSS Resources {.unnumbered}
# HTML and CSS Resources {.unnumbered}

## Official Documentation {.unnumbered}

* HTML Living Standard: @WHATWGHTML5

* CSS 2.1 Specification: @W3CCSS21

* Selector Specification: @W3CSel

+ 1
- 0
content/css/style.md View File

@@ -5,6 +5,7 @@
~~~ {.css}
html {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
~~~


+ 5
- 0
content/html/basics.md View File

@@ -92,6 +92,11 @@ Also known as: nodes, elements, and tags:
~~~ {.html insert="../../src/examples/html/simple.html"}
~~~

### HTML Parsed into a Tree Structure

![](../../diagrams/html/tree.dot)\
<!-- Placeholder -->

### Exercise: Writing Some HTML

#. Open the following file:

+ 1
- 1
default.nix View File

@@ -37,7 +37,7 @@ in

pkgs.stdenv.mkDerivation rec {
name = "webdev-${version}";
version = "0.1.0";
version = "0.1.1";
src = builtins.fetchGit ./.;

# Specifically don't want fixups for this package:

+ 14
- 1
metadata/citations.bib View File

@@ -1,8 +1,16 @@
% ==============================================================================
%
% Web Sites and Online Articles.
% Standards.
%
% ==============================================================================
@online {WHATWGHTML5,
title = "HTML Living Standard",
url = "https://html.spec.whatwg.org/",
year = 2018,
editor = "WHATWG",
publisher = "WHATWG"
}
@online {W3CCSS21,
title = "Cascading Style Sheets Level 2 Revision 1",
url = "http://www.w3.org/TR/2011/REC-CSS2-20110607/",
@@ -29,6 +37,11 @@
publisher = "W3C"
}

% ==============================================================================
%
% Web Sites and Online Articles.
%
% ==============================================================================
@online {W3CCheat,
title = "W3C Cheat Sheet",

+ 7
- 1
src/www/css/selectors/part-01.css View File

@@ -14,7 +14,7 @@
Select paragraphs that are direct children of the article tag and
change the font family to fantasy.

Hint: font-family: fantasy;
Hint: {font-family: fantasy;}

Hint: Paragraphs inside tables should not be affected.
*/
@@ -27,6 +27,8 @@
left border on the paragraph that is 3 pixels wide, solid, and
green.

Hint: {border-left: 3px solid green;}

Hint: Other paragraphs should not be affected.
*/

@@ -37,6 +39,8 @@

Select paragraphs that are inside a table and remove all margins
and padding.

Hint: {margin: 0; padding: 0;}
*/


@@ -48,4 +52,6 @@

Hint: Other paragraphs should not be affected (i.e. the p tags
inside ol tags).

Hint: {padding-left: 1.5em;}
*/

+ 6
- 1
src/www/css/selectors/part-02.css View File

@@ -14,6 +14,7 @@
Select form inputs that have the keyboard focus and place a blue
border around them.

Hint: {border: 2px solid blue;}
*/


@@ -22,7 +23,7 @@

Select disabled form inputs and put a line through their text.

Hint: text-decoration: line-through;
Hint: {text-decoration: line-through;}
*/


@@ -33,6 +34,8 @@
change the first letter of text so its font size is 2em.

Hint: Paragraphs inside tables should not be affected.

Hint: {font-size: 2em;}
*/


@@ -44,4 +47,6 @@
color should be #fff.

Hint: Only style the user selection if it's in a paragraph.

Hint: {background-color: #009; color: #fff;}
*/

+ 3
- 0
src/www/css/selectors/part-03.css View File

@@ -16,6 +16,7 @@
In the section with the ID of "products", select the first <ul>
element and place a black 1 pixel border along its bottom edge.

Hint: {border-bottom: 1px solid black;}
*/


@@ -26,6 +27,7 @@
In the section with the ID of "products", select the last <p>
element and change the text color to brown.

Hint: {color: brown;}
*/


@@ -36,4 +38,5 @@
In the section with the ID of "products", select the first <p>
element and change the text color to green.

Hint: {color: green;}
*/

+ 13
- 4
src/www/css/selectors/part-04.css View File

@@ -13,6 +13,8 @@

Select every other table row (even rows) and change their
background color to #eee.

Hint: {background-color: #eee;}
*/


@@ -22,6 +24,8 @@

Select the last three table rows and change their font weight to
bold.

Hint: {font-weight: bold;}
*/


@@ -36,6 +40,8 @@

2) Change the background color for the last four list items to
orange.

Hint: {background-color: color;}
*/


@@ -46,6 +52,8 @@
For every list in the HTML (ul or ol), select every third list
item, starting with the first item, and make the text color red.
Lists with a single list item should not be affected.

Hint: {color: red;}
*/


@@ -53,9 +61,10 @@
/*############################################################################*/
/* Exercise 5:

Select the first column in every fourth table row and align the
text to the right. Also add the following property to each
selected column:
Select the first column in every fourth table row, and:

* Align the text to the right
* Add a black right border

border-right: 1px solid black;
Hint: {text-align: right; border-right: 1px solid black;}
*/

+ 7
- 0
src/www/css/selectors/part-05.css View File

@@ -20,6 +20,8 @@

2) Select form inputs that are number inputs and change their
width to 5em.

Hint: {width: size;}
*/


@@ -33,6 +35,8 @@
1) The mouse is hovering over the link.

2) The href attribute for the link starts with a hash (#).

Hint: {color: orange;}
*/


@@ -43,6 +47,7 @@
Select all links whose href attribute contains the substring
"salesforce" and make their background color darkblue.

Hint: {background-color: darkblue;}
*/


@@ -53,6 +58,7 @@
Select all elements that have a "data-product-id" attribute and
change their font weight to bold.

Hint: {font-weight: bold;}
*/


@@ -64,4 +70,5 @@
"hot" listed in the "data-keywords" attribute. Change the
background color of matching elements to "hotpink".

Hint: {background-color: hotpink;}
*/

Loading…
Cancel
Save