Below is a list of tasks. By mid-semester, everyone should...
- Understand what the task is asking
- Be able to do the task
- Make it clear through your actions you understand what's happening
FOR THE LOVE OF MONKEYS, read the Instructions first.
- Instructions
- Demonstrations
- Resources
- Development Environment
- HTML Fundamentals
- CSS Fundamentals
- CSS Frameworks
- Publishing
- Grading
- Fork this repository
- Complete and check off each of the tasks below, creating files and adding content where prompted with โ๏ธ or ??
- After you finish, celebrate your HTML and CSS proficiency! ๐
- RTM - Sometimes I give the command you need and sometimes you have to read the documentation to find it.
- Details - Following the instructions. Use the filename suggestions and avoid putting everything in one giant file. It will make it hard for you to figure out what's going on.
- Sources - If you copy code from somewhere else, include the URL in a
<!-- comment -->
to reference it later.
The best demonstrations show and tell. Every possible way someone can interact with your code will be useful. Meaning...
- When viewed in a browser, the page includes snippets of HTML
- When viewed in a browser, there is text describing the snippets
- When viewed in a code editor or via View Source, the HTML reflects what is being described
Here are some popular tutorials/guides. You should still look for other ones that you might like better!
- Shay Howe's Learn to Code HTML & CSS
- Oliver James' HTML & CSS Is Hard (But Doesn't Have To Be)
- Jessica Hische and Russ Maschmeyer's Don't Fear The Internet
Here are some more reference-like resources. These might be slightly technical, but they're accurate and comprehensive. Learning to read technical reference material is its own (very valuable) skill.
- w3schools HTML and CSS
- MDN's HTML: Hypertext Markup Language
- MDN's CSS: Cascading Stylesheets
- HTMLReference.io
- CSSReference.io
You should be able to...
- Open this repo on the command line (Bash or Terminal) from within Github Desktop
- Use
cd tests
to navigate to the tests directory - Use
ls
to list the contents of a directory - Use
mkdir empty-directory
to create an empty directory - Use
touch empty-file.html
to create an empty file - Use
cd ../
to navigate back up to the root directory of the repo - Use
Atom .
to open the current directory in your code editor
- โ๏ธ Create a new (empty) HTML file named
basic-image.html
and edit it in Atom - โ๏ธ Write some HTML in
basic-image.html
- Open
basic-image.html
in your browser and test it locally - Use "Inspect Element" to open the developer tools and view the HTML and CSS for areas on your web page
- โ๏ธ Add an image to the project
assets/img/
directory and display it on the webpage using the<img>
tag
Let's make sure we have the basic structure of an HTML page down. Don't worry too much about the content, here.
โ๏ธ You should be able to create a file called basic-structure.html
that contains the following, structured correctly:
- โ๏ธ A
DOCTYPE
declaration - โ๏ธ A
<html>
tag, containing...- โ๏ธ A
<head>
tag, containing...- โ๏ธ A
<title>
tag with a title of your choosing
- โ๏ธ A
- โ๏ธ A
<body>
tag containing...- โ๏ธ One top-level
<h1>
header - โ๏ธ A few paragraphs of text in
<p>
tags - โ๏ธ A second-level
<h2>
tag - โ๏ธ A few more paragraphs of text in
<p>
tags
- โ๏ธ One top-level
- โ๏ธ A
โ๏ธ You should be able to create a properly structured HTML document named basic-snippet.html
that talks about the following snippet:
<p>
Want to search the web?
Try <a href="https://google.com" id="the-best-link" class="banana" target="_blank">Google</a>!
</p>
In basic-snippet.html
, you should be able to:
- โ๏ธ Name the tags in the snippet
- โ๏ธ Link to 2-3 online references that describe each tag, give examples, etc.
- โ๏ธ Describe the relationship between the tags in terms of nesting ("X is a child of Y")
- โ๏ธ Explain the relationship between
<p>
and</p>
- โ๏ธ List some of the attribute names on the
<a>
tag - โ๏ธ For each attribute on the
<a>
tag, name its value - โ๏ธ For each attribute/value pair on the
<a>
tag, describe its purpose and effect
Using a single-column layout, create a page called basic-tags.html
that contains the following sections. There should be a single <h1>
tag for the entire page and a single <h2>
tag for each section.
Each section should be contained in its own <section>
tag. Do not use any CSS to style the appearance of the page. Focus just on the HTML. We will create a styled copy later that we can compare side-by-side with the unstyled copy.
You should be able to create sections that demonstrate...
- The following block-level text containers:
- โ๏ธ The paragraph
<p>
tag - โ๏ธ The blockquote
<blockquote>
tag - โ๏ธ The pre-formatted text
<pre>
tag
- โ๏ธ The paragraph
- Inline text styling using the following tags:
- โ๏ธ
<em>
and<i>
- โ๏ธ
<strong>
and<b>
- โ๏ธ
<code>
- โ๏ธ
- โ๏ธ The
<a>
tag - โ๏ธ The
<img>
tag - โ๏ธ The different header tags
<h1>
,<h2>
,<h3>
, etc.
Building on basic-tags.html
, you should be able to do the following:
- โ๏ธ Create multiple unordered lists using the
<ul>
and<li>
tags - โ๏ธ Create multiple ordered lists using the
<ol>
and<li>
tags - โ๏ธ Include other HTML inside the list item (
<li>
) tags, e.g., paragraphs, images, links, etc. - โ๏ธ Nest lists within each other
Building on basic-tags.html
, you should be able to create tables of varying sizes:
- โ๏ธ Create a 3x3 table using the
<table>
,<tr>
, and<td>
tags - โ๏ธ Add headings using the
<th>
tag - โ๏ธ Create two more tables of different dimensions
โ๏ธ Create a page named basic-multimedia.html
in which you:
- โ๏ธ Use the
<video>
tag to embed one or more videos - โ๏ธ Use the
<audio>
tag to embed one or more audio clips
โ๏ธ You should be able to create a page called basic-css.html
that demonstrates the following CSS properties by using a <style>
tag to include the CSS:
color
text-align
text-transformation
line-height
letter-spacing
font-family
font-size
font-style
font-weight
background-color
background-image
list-style-type
width
andheight
(using an<img>
tag)margin
padding
border
In basic-css.html
, you should be able to demonstrate the following html inside the body to use the above CSS:
- Selectors...
- โ๏ธ Type / tag selectors
- โ๏ธ Class selectors
- โ๏ธ ID selectors
- Combinators...
- โ๏ธ Descendant combinator
- โ๏ธ Child combinator
โ๏ธ You should be able to create a copy of basic-tags.html
called basic-tags-styles.html
and do the following:
- โ๏ธ Give each section its own distinct
id
- โ๏ธ Use a class selector to change the color of some (but not all) of the text on the page. You will need to add
class
attributes to various elements. - โ๏ธ Change the text color of the
<h2>
header in the first section using an id selector, tag selector, and child combinator - โ๏ธ Add borders to some (but not all) of the sections. Consider giving the sections you want to have borders the same
class
attribute and then using a class selector.
โ๏ธ You should be able to create a new file called index.html
and do the following:
- Implement a CSS framework like Bootstrap
- โ๏ธ Find and add the Bootstrap starter template to
index.html
- โ๏ธ Add a "full width" section using
.container-fluid
inside the top of<body></body>
element
<div class="container-fluid"> <div class="row"> Add any horizontally-oriented image here </div> </div>
- โ๏ธ Add a new "regular width" section using
.container
underneath the full width section
<div class="container"> <div class="row"> </div> </div>
- โ๏ธ To the regular width section, add HTML and Bootstrap's built-in CSS classes to display a one column layout (mobile) and a three column layout (in large displays and above).
- โ๏ธ In the first column in the above section, add a link to each of the above html files.
- โ๏ธ In the second column in the above section, add a selection of form elements that use Bootstrap classes.
- โ๏ธ In the third column in the above section, copy your favorite quote from any of the readings thus far in this class.
- โ๏ธ Find and add the Bootstrap starter template to
You should be able to...
- Use Github Pages to publish this project to the web
- Validate your HTML and CSS
- โ๏ธ Replace this: https://github.com/emilywschmitt/learn-html-css-milestones with your Github.com/repository url.
- โ๏ธ Replace this: https://emilywschmitt.github.io/learn-html-css-milestones/ with your repo's Github Page url.
- Points:
20
-
2
Development Environment -
7
HTML Fundamentals -
7
CSS Fundamentals -
2
CSS Frameworks -
2
Publishing
-
This assignment was adapted from milestones-html, created by Jesse Farmer for the DIG 245 Liberal Arts in Silicon Valley curriculum.