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 teststo navigate to the tests directory - Use
lsto list the contents of a directory - Use
mkdir empty-directoryto create an empty directory - Use
cd empty-directory - Use
touch empty-file.htmlto 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.htmland edit it in Atom - ✏️ Write some HTML in
basic-image.html - Open
basic-image.htmlin 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
DOCTYPEdeclaration - ✏️ 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 video clips - ✏️ 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:
colortext-aligntext-transformationline-heightletter-spacingfont-familyfont-sizefont-stylefont-weightbackground-colorbackground-imagelist-style-typewidthandheight(using an<img>tag)marginpaddingborder
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
classattributes 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
classattribute 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-fluidinside 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
.containerunderneath 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: github.com/username/learn-html-css-milestones with your Github.com/repository url.
- ✏️ Replace this: username.github.io/learn-html-css-milestones with your repo's Github Page url.
Rubric
See Moodle
This assignment was adapted from milestones-html, created by Jesse Farmer for the DIG 245 Liberal Arts in Silicon Valley curriculum.