Skip to content

Commit 4de3834

Browse files
iHiDdem4ron
iHiD
and
dem4ron
authored
Add extra exercises (exercism#7874)
* Add extra flex exercises * Add advert exercise * Add exercises overview widget * Add notifications icon * Add reputation exercise * Fix font * Fix reputation icon path * Update intro --------- Co-authored-by: dem4ron <[email protected]>
1 parent d011623 commit 4de3834

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+716
-0
lines changed

‎bootcamp_content/projects/exercism-widgets/config.json

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"slug": "exercism-widgets",
3+
"title": "Exercism Widgets",
4+
"description": "A selection of widgets from Exercism's site",
5+
"exercises": [
6+
"journey-button",
7+
"track-summary",
8+
"reputation-icon",
9+
"exercises-overview",
10+
"coding-fundamentals-advert",
11+
"notifications-icon"
12+
]
13+
}

‎bootcamp_content/projects/exercism-widgets/exercises/coding-fundamentals-advert/config.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"title": "Coding Fundamentals Advert",
3+
"description": "Reacreate the Coding Fundamentals Advert",
4+
"language": "css",
5+
"level": 14,
6+
"idx": 7,
7+
"editor_config": {
8+
"aspect_ratio": 1.1
9+
}
10+
}

‎bootcamp_content/projects/exercism-widgets/exercises/coding-fundamentals-advert/default.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
body,
2+
.--jiki-faux-body {
3+
aspect-ratio: 1;
4+
overflow: hidden;
5+
6+
font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji,
7+
Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
8+
}
9+
10+
* {
11+
box-sizing: border-box;
12+
}

‎bootcamp_content/projects/exercism-widgets/exercises/coding-fundamentals-advert/example.css

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
main {
2+
padding: 10px;
3+
4+
h1 {
5+
font-size: 22px;
6+
}
7+
.subheading {
8+
font-size: 15px;
9+
font-weight: 600;
10+
margin-bottom: 10px;
11+
}
12+
p {
13+
font-size: 14px;
14+
margin-bottom: 5px;
15+
}
16+
.images {
17+
margin-top: 10px;
18+
display: grid;
19+
grid-template-columns: repeat(4, 1fr);
20+
margin-bottom: 10px;
21+
gap: 5px;
22+
23+
img {
24+
width: 100%;
25+
border: 1px solid rgb(96 79 205);
26+
padding: 1px;
27+
border-radius: 5px;
28+
}
29+
}
30+
.btn {
31+
background: rgb(96 79 205);
32+
border: 1px solid rgb(19 11 67);
33+
border-radius: 5px;
34+
padding: 10px 15px;
35+
text-align: center;
36+
color: white;
37+
font-weight: 600;
38+
}
39+
}

‎bootcamp_content/projects/exercism-widgets/exercises/coding-fundamentals-advert/example.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<main>
2+
<h1>Coding Fundamentals</h1>
3+
<div class="subheading">Video tutorials. Fun projects. Fair pricing.</div>
4+
5+
<p>
6+
A course designed to give you rock-solid programming fundamentals. Totally
7+
new? Stuck in "Tutorial Hell"?
8+
</p>
9+
<p>In 12 weeks you'll go from zero to making...</p>
10+
11+
<div class="images">
12+
<img src="/bootcamp/images/space-invaders.png" />
13+
<img src="/bootcamp/images/tic-tac-toe.png" />
14+
<img src="/bootcamp/images/breakout.png" />
15+
<img src="/bootcamp/images/maze.png" />
16+
</div>
17+
18+
<div class="btn">Explore Coding Fundamentals</div>
19+
</main>

‎bootcamp_content/projects/exercism-widgets/exercises/coding-fundamentals-advert/introduction.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Coding Fundamentals Advert
2+
3+
In this exercise you're going to recreate the advert for Coding Fundamentals that sits in the header of Exercism.
4+
5+
## Instructions
6+
7+
Firstly, ensure that you can see all the elements of the target. You might need to zoom out a little to do this. It should look like the image below. It doesn't matter if it's a little different on your screen as long as you can see all the elements.
8+
9+
<img src="https://assets.exercism.org/bootcamp/graphics/coding-fundamentals-advert-sample.png" style="width: 100%; max-width:300px;margin-top:10px;margin-bottom:20px;border:1px solid #ddd;border-radius:5px"/>
10+
11+
### Properties
12+
13+
You can use whatever properties you feel are appropriate to solve this exercise.
14+
15+
Here's some notes:
16+
17+
- All sizes are pixels (with one possible exception noted below about making images behave). Except for font-sizes they are all divisible by 5.
18+
- There are two purples. A lighter one for the border background (`rgb(96 79 205)`) and a darker one (`rgb(19 11 67)`). The button text is `white`.
19+
20+
There are two small details that might be hard to spot:
21+
22+
- The images have a both purple (`rgb(96 79 205)`) and white lines around them.
23+
- The button has a border (`rgb(19 11 67)`).
24+
25+
A final technical note for those who are curious or more advanced. Everything in this exercise has `box-sizing` set to `border-box`, primarily to make laying out the images easier.
26+
27+
### Misbehaving images
28+
29+
One thing that can be a bit confusing is fitting an imagine into a grid slot. If you choose to use grid to solve this exercise, then setting `width: 100%` on the images will mean they obey an grid column instructions you give.
30+
31+
### Page Copy
32+
33+
The copy on the page is:
34+
35+
```text
36+
Coding Fundamentals
37+
Video tutorials. Fun projects. Fair pricing.
38+
A course designed to give you rock-solid programming fundamentals. Totally new? Stuck in "Tutorial Hell"?
39+
In 12 weeks you'll go from zero to making...
40+
Explore Coding Fundamentals
41+
```

‎bootcamp_content/projects/exercism-widgets/exercises/coding-fundamentals-advert/stub.css

Whitespace-only changes.

‎bootcamp_content/projects/exercism-widgets/exercises/coding-fundamentals-advert/stub.html

Whitespace-only changes.

‎bootcamp_content/projects/exercism-widgets/exercises/coding-fundamentals-advert/task-1.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Task 1
2+
3+
Recreate the advert!

‎bootcamp_content/projects/exercism-widgets/exercises/exercises-overview/config.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"title": "Exercises Overview",
3+
"description": "Reacreate the Exercism exercises overview widget",
4+
"language": "css",
5+
"level": 14,
6+
"idx": 9,
7+
"editor_config": {
8+
"aspect_ratio": 1.5
9+
}
10+
}

0 commit comments

Comments
 (0)