Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions .vscode/dictionaries/proper-names.txt
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ Ansari
Ansyari
Apapou
Aptana
Araneae
Arkanoid
Artur
Arun
Expand All @@ -44,6 +45,7 @@ Aziz
Balhetan
bartaz
Bartek
Belgers
belgin
Benbadis
Bento4
Expand Down Expand Up @@ -108,6 +110,7 @@ Codepens
coderprateek
codingintrigue
Codrops
Coleoptera
Colomb
Conde
Corber
Expand Down Expand Up @@ -135,9 +138,11 @@ Delaville
Denicola
DeSandro
Desaulniers
Descouens
Desproges
Devlin
Dexie
Didier
Diffie
Digga
Digianswer
Expand Down Expand Up @@ -231,6 +236,7 @@ hamishwillee
Haml
Haverbeke
Headsight
Hemiptera
Heydings
Heydon
Hickson
Expand Down Expand Up @@ -468,6 +474,7 @@ Quora
rachelandrew
Radev
Radimir
Ramesh
Rapp
Rauschmayer
Realtek
Expand Down Expand Up @@ -501,6 +508,7 @@ Scarlett
Schiff
Schirra
Schmarsow
Schoenmakers
Schola
Schwarz
Sciurus
Expand Down Expand Up @@ -594,6 +602,7 @@ Voikko
Volkman
Vorbis
vulgaris
Waarneming
wabt
Wakamai
Waldron
Expand Down
5 changes: 5 additions & 0 deletions .vscode/dictionaries/terms-abbreviations.txt
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,7 @@ EBNF
ECSDA
editability
effectful
elytra
Emscripting
encrypter
engageable
Expand Down Expand Up @@ -273,11 +274,13 @@ greenify
greyscale
gzipping
halfwidth
halteres
harissa
HDCP
headworn
highlightable
HILN
hindwings
hissy
hitbox
hitmap
Expand Down Expand Up @@ -338,6 +341,7 @@ JXON
KACST
Kbit
Kbps
kettlebell
keysyms
keyterm
keyterms
Expand Down Expand Up @@ -471,6 +475,7 @@ packetizing
paintable
pantherina
papermakers
parasitoids
parentless
passwordless
pathfinding
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -195,15 +195,15 @@ To solve this challenge, we are expecting you to create a basic website project,
padding: 10px 20px;
border-radius: 10px;
border: 1px solid grey;
background-color: #ddd;
background-color: #dddddd;
width: 50%;
margin: 0 auto;
display: block;
}

button:hover,
button:focus {
background-color: #eee;
background-color: #eeeeee;
cursor: pointer;
}
```
Expand Down Expand Up @@ -234,7 +234,7 @@ We'd like you to imagine that you have just been to stay at a hotel called the l
1. The top level-heading: "We want your feedback!".
2. Second level headings: "Facilities", "About your hosts", "Any other feedback?", and "Your details".
2. The opening paragraph below the top-level heading needs to be marked up appropriately.
3. Also in the opening paragraph, turn the text "little house in the woods" and "prize draw" into links. We don't have pages to link to yet, so for now, just set the target URL as `#`for a placeholder.
3. Also in the opening paragraph, turn the text "little house in the woods" and "prize draw" into links. We don't have pages to link to yet, so for now, just set the target URL as `#` for a placeholder.
4. We want you to place a wide, flat image below the opening paragraph as a decoration. The image path is `https://mdn.github.io/shared-assets/images/examples/learn/woodland-strip.jpg`, and we'd like you to set the alternative text for it to an empty value, given that it is decorative only.
5. Following on from the previous point, as a stretch goal, research a better way to include the decorative image on the page, and have a go at doing so (this involves a different technology to HTML, which we haven't touched on in this module).

Expand Down Expand Up @@ -266,39 +266,80 @@ Your finished HTML should look like this:
<body>
<h1>We want your feedback!</h1>

<p>We're very excited that you visited the <a href="#">little house in the woods</a>, and we want to hear what
you thought of it! Please fill in the below sections. You don't need to provide your name or
contact details, but if you do, we'll enter you into a <a href="#">prize draw</a> where you'll have a chance
to win prizes.</p>
<p>
We're very excited that you visited the
<a href="#">little house in the woods</a>, and we want to hear what you
thought of it! Please fill in the below sections. You don't need to
provide your name or contact details, but if you do, we'll enter you into
a <a href="#">prize draw</a> where you'll have a chance to win prizes.
</p>

<img src="https://mdn.github.io/shared-assets/images/examples/learn/woodland-strip.jpg" alt="">
<img
src="https://mdn.github.io/shared-assets/images/examples/learn/woodland-strip.jpg"
alt="" />

<form>

<div class="form-section">
<h2>Facilities</h2>

<fieldset>
<legend>Was the porridge</legend>
<input type="radio" id="porridge-1" name="porridge" value="hot" checked><label for="porridge-1">Too hot?</label>
<input type="radio" id="porridge-2" name="porridge" value="cold"><label for="porridge-2">Too cold?</label>
<input type="radio" id="porridge-3" name="porridge" value="right"><label for="porridge-3">Just right?</label>
<input
type="radio"
id="porridge-1"
name="porridge"
value="hot"
checked /><label for="porridge-1">Too hot?</label>
<input
type="radio"
id="porridge-2"
name="porridge"
value="cold" /><label for="porridge-2">Too cold?</label>
<input
type="radio"
id="porridge-3"
name="porridge"
value="right" /><label for="porridge-3">Just right?</label>
</fieldset>

<fieldset>
<legend>Were the beds</legend>
<input type="radio" id="beds-1" name="beds" value="hard" checked><label for=beds-1">Too hard?</label>
<input type="radio" id="beds-2" name="beds" value="soft"><label for="beds-2">Too soft?</label>
<input type="radio" id="beds-3" name="beds" value="right"><label for="beds-3">Just right?</label>
<input
type="radio"
id="beds-1"
name="beds"
value="hard"
checked /><label for="beds-1">Too hard?</label>
<input type="radio" id="beds-2" name="beds" value="soft" /><label
for="beds-2"
>Too soft?</label
>
<input type="radio" id="beds-3" name="beds" value="right" /><label
for="beds-3"
>Just right?</label
>
</fieldset>

<fieldset>
<legend>Describe the chairs (select all you agree with)</legend>
<input type="checkbox" id="comfy" name="comfy" /><label for="comfy">Comfy</label>
<input type="checkbox" id="luxurious" name="luxurious" /><label for="luxurious">Luxurious</label>
<input type="checkbox" id="hi-tech" name="hi-tech" /><label for="hi-tech">Hi-tech</label>
<input type="checkbox" id="pretty" name="pretty" /><label for="pretty">Pretty</label>
<input type="checkbox" id="majestic" name="majestic" /><label for="majestic">Majestic</label>
<input type="checkbox" id="comfy" name="comfy" /><label for="comfy"
>Comfy</label
>
<input type="checkbox" id="luxurious" name="luxurious" /><label
for="luxurious"
>Luxurious</label
>
<input type="checkbox" id="hi-tech" name="hi-tech" /><label
for="hi-tech"
>Hi-tech</label
>
<input type="checkbox" id="pretty" name="pretty" /><label for="pretty"
>Pretty</label
>
<input type="checkbox" id="majestic" name="majestic" /><label
for="majestic"
>Majestic</label
>
</fieldset>
</div>

Expand Down Expand Up @@ -330,7 +371,7 @@ Your finished HTML should look like this:
<h2>Any other feedback?</h2>

<label for="comments">Give us your comments</label>
<br>
<br />
<textarea id="comments" name="comments"></textarea>
</div>

Expand All @@ -339,17 +380,17 @@ Your finished HTML should look like this:

<div class="separator">
<label for="name">Name</label>
<input type="text" id="name" name="name">
<input type="text" id="name" name="name" />
</div>

<div class="separator">
<label for="email">Email</label>
<input type="email" id="email" name="email">
<input type="email" id="email" name="email" />
</div>

<div class="separator">
<label for="phone">Phone</label>
<input type="tel" id="phone" name="phone">
<input type="tel" id="phone" name="phone" />
</div>
</div>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ Icelandic brownian shuffle
he thought this dance inspired modern styles such as Twerking.
Arctic robot dance
An interesting example of historic misinformation, English explorers in
the 1960s believed to have discovered a new dance style characterised by
the 1960s believed to have discovered a new dance style characterized by
"robotic", stilted movements, being practiced by inhabitants of Northern
Alaska and Canada. Later on however it was discovered that they were
just moving like this because they were really cold.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ In this challenge, we'll test your knowledge of some of the techniques discussed

## Starting point

To solve this challenge we are expecting you to create a simple website project, either inside a folder on your computer's harddrive, or using an online editor such as [CodePen](https://codepen.io/) or [JSFiddle](https://jsfiddle.net/). Much of the code you need is already provided.
To solve this challenge we are expecting you to create a simple website project, either inside a folder on your computer's hard drive, or using an online editor such as [CodePen](https://codepen.io/) or [JSFiddle](https://jsfiddle.net/). Much of the code you need is already provided.

1. Create a new folder in an appropriate location on your computer called `splash-page-challenge` (or open an online editor and take the required steps to create a new project).
2. Save the following HTML listing inside a file inside your folder called `index.html` (or paste it into your online editor's HTML pane).
Expand Down Expand Up @@ -363,14 +363,14 @@ In this assessment we are presenting you with a mostly-finished splash page abou
Just below the `<h1>`, add a `<video>` element that embeds our header video into the page. We'd like it to do the following:

- Specify the [media type](/en-US/docs/Web/HTTP/Guides/MIME_types) of the video.
- Autoplay the video on load (for this to work in at least some broewsers, you'll also need to specify that the video should be muted).
- Autoplay the video on load (for this to work in at least some browsers, you'll also need to specify that the video should be muted).
- Loop endlessly rather than playing once.
- Preload the video content.
- Not show any controls.

### Adding section images

In the expanded information sections on each type of bug, below each `<h2>`, we'd like you to add an image element that embeds the appropriate image for each section. Give each image some appropriate alternative text for the benefit of screenreader users (and in case the image doesn't load), and constrain each image to dimensions of 250 x 180.
In the expanded information sections on each type of bug, below each `<h2>`, we'd like you to add an image element that embeds the appropriate image for each section. Give each image some appropriate alternative text for the benefit of screen reader users (and in case the image doesn't load), and constrain each image to dimensions of 250 x 180.

In addition, we'd like you to include a caption for each image; think about what container element is needed to semantically associate the two together. Don't just make the caption repeat the alternative text; it should work alongside the alternative text and the image.

Expand Down
Loading