Skip to content

Commit e236557

Browse files
NateWrNateWr
committed
Fix CodeYourFuture#4 Update semantic elements and remove details contained in the syllabus
1 parent 35b147f commit e236557

File tree

2 files changed

+5
-181
lines changed

2 files changed

+5
-181
lines changed

‎week-1/3-semantic-html/readme.md

+4-110
Original file line numberDiff line numberDiff line change
@@ -2,118 +2,12 @@
22

33
There are no semantic tags or attributes being used in the messages for this example. Let's improve it by changing the tags and attributes to semantic HTML code, so that computers can understand what kind of information is being presented. Complete the following changes in the `index.html` file:
44

5-
1. Replace an existing tag with the `<header>` tag to specify the site's header area.
6-
2. Add the `role="main"` attribute to an existing element to specify the main content on the site.
5+
1. Replace an existing tag with the `<header role="banner">` tag to specify the site's header area.
6+
2. Replace an existing tag with the `<main role="main">` tag to specify the main content on the site.
77
3. Replace existing tags with the `<article>` tag to group information relating to a single message.
8-
4. Extra challenge: use the `<time>` tag with the `datetime=""` attribute to specify the time of each message.
8+
4. Extra challenge: read [this article about the `<time>` tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time) and the `datetime=""` attribute. Use this to specify the time of each message.
99
5. When you are finished, use git to add, commit and push your changes.
1010

1111
_Hint: To complete this exercise, you should modify the HTML elements that are already there. You don't need to create any new elements._
1212

13-
If you are having trouble, review the following information about semantic HTML code.
14-
15-
## What is semantic HTML code?
16-
17-
"Semantic HTML is the use of HTML markup to reinforce the semantics, or **meaning**, of the information in webpages and web applications rather than merely to define its presentation or look." [Wikipedia](https://en.wikipedia.org/wiki/Semantic_HTML)
18-
19-
We use specific _tags_ and _attributes_ in our HTML code to identify what kind of information is being presented.
20-
21-
### <header> and <footer>
22-
23-
At the top of most websites, you will find a logo and a navigation menu. No matter what page we visit on the site, this logo and navigation menu will stay the same. This is what the header looks like on [GitHub](https://github.com).
24-
25-
![Screenshot of GitHub.com with header indicated](/images/3-header.png)
26-
27-
We use the `<header>` tag to identify this part of a website.
28-
29-
```
30-
<header>
31-
<img src="/logo.png">
32-
<nav>
33-
<a href="/">Home</a>
34-
<a href="/">News</a>
35-
<a href="/">About</a>
36-
</nav>
37-
</header>
38-
```
39-
40-
At the bottom of most websites, you will often find additional information, such as links to other pages on the site and contact details. We use the `<footer>` tag to identify this part of a website.
41-
42-
```
43-
<footer>
44-
<a href="/">Contact Us</a>
45-
<p>© CodeYourFuture, 2018</p>
46-
</footer>
47-
```
48-
49-
### <nav>
50-
51-
Most websites include a navigation menu, which contains links to the _main sections_ of the website. We use the `<nav>` tag to identify the website's general navigation menu.
52-
53-
```
54-
<nav>
55-
<a href="/">Home</a>
56-
<a href="/">News</a>
57-
<a href="/">About</a>
58-
</nav>
59-
```
60-
61-
### role="main"
62-
63-
Most pages on a website have a section which is the main purpose of that page. On the BBC's website, the article is the main content on each article page.
64-
65-
![Screenshot of BBC article with main section indicated](/images/3-main.png)
66-
67-
The other articles on the right are not part of the main article, so we use the `role="main"` attribute to identify the main section on the page.
68-
69-
```
70-
<div role="main">
71-
<h1>Learn how to write HTML</h1>
72-
<p>This course teaches you how to write HTML code.</p>
73-
<p>Start out with tags, then try attributes.</p>
74-
</div>
75-
<div class="side-bar">
76-
<h2>Top Stories</h2>
77-
<a href="/">Man Bites Dog</a>
78-
<a href="/">Cat Stuck in Tree</a>
79-
</div>
80-
```
81-
82-
### <article>
83-
84-
Information on a website is usually grouped together. For example, a single article may contain a title, author and description. A message might contain the sender, the message, and the time it was sent.
85-
86-
We use the `<article>` tag to identify separate tags that should be grouped together. The `<article>` tag is used as a _parent_, which identifies all of its _children_ as related to each other.
87-
88-
```
89-
<div role="main">
90-
<article>
91-
<h1>Learn how to write HTML</h1>
92-
<p>This course teaches you how to write HTML code.</p>
93-
<p>Start out with tags, then try attributes.</p>
94-
</article>
95-
</div>
96-
<div class="side-bar">
97-
<h2>Top Stories</h2>
98-
<article>
99-
<h3>Man bites dog</h3>
100-
<p>Dog in hospital after attack by brutal, untrained man.</p>
101-
<a href="/">Read More</a>
102-
</article>
103-
<article>
104-
<h3>Cat stuck in tree</h3>
105-
<p>"Not coming down," says cat.</p>
106-
<a href="/">Read More</a>
107-
</article>
108-
</div>
109-
```
110-
111-
### Other semantic HTML tags and attributes
112-
113-
Want to learn more? Read about these semantic HTL tags and attributes:
114-
115-
- [`<aside role="complementary">`](http://html5doctor.com/understanding-aside/)
116-
- [`<time datetime="2017-04-13 06:23"`](https://css-tricks.com/time-element/)
117-
- [`<address>`](http://html5doctor.com/the-address-element/)
118-
- [`<abbr>`](http://html5doctor.com/the-abbr-element/)
119-
- [`<blockquote>`](http://html5doctor.com/blockquote-q-cite/)
13+
If you are having trouble, you can review [read this guide to the semantic tags](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantic_elements).

‎week-1/4-links-scripts/readme.md

+1-71
Original file line numberDiff line numberDiff line change
@@ -5,77 +5,7 @@ This site is missing the CSS styles. It's also missing JavaScript code that will
55
Your colleagues have already written the .css and .js files. Complete the following steps to get this site working:
66

77
1. Add a `<link>` element that includes the `missing-styles.css` file in this exercise's directory. This should be placed in the `<head>` element.
8-
2. Add a `<script>` element that includes the `convertUrls.js` file in this exercise's directory. This should be placed at the end of the `<body>` element.
8+
2. Add a `<script>` element that includes the `convertUrls.js` file in this exercise's directory. This should be placed right before the end of the `<body>` element.
99
3. When you are finished, use git to add, commit and push your changes.
1010

1111
_Hint: When you are done, the messages should have the colours and layout like other exercises, and you should be able to click on the URLs ("http://") to go to them._
12-
13-
If you are having trouble, review the following information about including resources into an HTML page.
14-
15-
## Separation of Concerns
16-
17-
When building applications for the web, we separate content, presentation and behaviour.
18-
19-
- **Content** is the raw material of the website. It may be an article, a message, a video, or a list of links.
20-
- **Presentation** is the way that material is displayed. It controls the colours, typography and layout of the content.
21-
- **Behaviour** is anything that reacts to what the user does. When you type a message on Facebook and hit Send, the website is reacting to your behaviour.
22-
23-
To keep our projects organised, we separate these concerns and store them in different files. The content is written in HTML code and saved in .html files. The presentation is written in CSS code and saved in .css files. The behaviour is written in JavaScript code and saved in .js files.
24-
25-
## Linking a CSS file
26-
27-
HTML allows us to link a CSS file, so that we can apply presentation styles to our raw content. We use the `<link>` tag to do this:
28-
29-
```
30-
<link rel="stylesheet" href="style.css">
31-
```
32-
33-
This example has two attributes. The `rel` attribute indicates that our link is to a "stylesheet", a common name for a .css file. The `href` attribute points to the file.
34-
35-
This `<link>` tag goes into the `<head>` element of our HTML page:
36-
37-
```
38-
<html>
39-
<head>
40-
<title>Example Page</title>
41-
<link rel="stylesheet" href="style.css">
42-
</head>
43-
<body>
44-
<p>My page content.</p>
45-
</body>
46-
</html>
47-
```
48-
49-
## Linking a JavaScript file
50-
51-
HTML allows us to link a JavaScript file, so that we can react when viewers do something on our website. We use the `<script>` tag to do this:
52-
53-
```
54-
<script src="postMessage.js"></script>
55-
```
56-
57-
This example has one attribute. The `src` attribute points to the file.
58-
59-
Usually, the `<script>` tag appears near the end of the `<body>` element of our HTML page:
60-
61-
```
62-
<html>
63-
<head>
64-
<title>Example Page</title>
65-
</head>
66-
<body>
67-
<p>All of my page content.</p>
68-
<script src="postMessage.js"></script>
69-
</body>
70-
</html>
71-
```
72-
73-
## Linking to the right file location
74-
75-
When linking a CSS or JavaScript file, you must provide the correct path to the file. In this exercise, `missing-styles.css` is placed inside of a directory called `css`. Your `<link>` must point to the file inside of that directory:
76-
77-
```
78-
<link rel="stylesheet" href="css/missing-styles.css">
79-
```
80-
81-
Want to learn more? Read about [Relative Links](https://marksheet.io/html-links.html#relative-urls), [Absolute Links](https://marksheet.io/html-links.html#absolute-urls), and [how to choose the right one](https://marksheet.io/html-links.html#relative-or-absolute-links).

0 commit comments

Comments
 (0)