mirror of https://github.com/01-edu/public.git
carbon-copy: put full github links for images
This commit is contained in:
parent
d5ffb9838f
commit
dbb7277bfb
|
@ -10,7 +10,7 @@ Today is a big day: you're going to make your own webpage. Like a boss, yes.
|
|||
If that one already sounds scary to you, don't worry, we've got your back ; you'll be provided some assets to complete this task.
|
||||
|
||||
The goal of this raid is to make a carbon copy of this webpage template:
|
||||
![](page-template.jpg)
|
||||
![](https://github.com/01-edu/public/blob/master/subjects/carbon-copy/page-template.jpg)
|
||||
Feel free to replace (or not, if you're lazy) the text contents by details about you / your company / your organisation / your dog / anything you want to talk about. Just try to approximatively match the same amount of content, so it still looks visually similar to the placeholder version.
|
||||
|
||||
The raid is divided in 3 phases:
|
||||
|
@ -19,7 +19,7 @@ The raid is divided in 3 phases:
|
|||
- custom CSS style
|
||||
- JS interactions
|
||||
|
||||
#### Phase 1: HTML only _(mandatory)_
|
||||
### Phase 1: HTML only _(mandatory)_
|
||||
|
||||
Create & write the HTML file `index.html` to build the structure of the page.
|
||||
For this phase, we provide you a CSS file (`styles.css`) that you just have to [link](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) to your `index.html`, meaning you won't need to style anything. However, you can do it from scratch and write yourself the whole CSS if you feel up to it.
|
||||
|
@ -27,14 +27,14 @@ For this phase, we provide you a CSS file (`styles.css`) that you just have to [
|
|||
NB: Each item of the navbar menu - in the top right corner - has to bring to the corresponding section on click (clicking on "About" scrolls to the "About" section in the page); take a look at the [`href` anchor use](https://www.w3.org/TR/html401/struct/links.html#h-12.2.3).
|
||||
|
||||
Here is a [wireframe](https://en.wikipedia.org/wiki/Website_wireframe) of the webpage, showing the HTML tags you have to use:
|
||||
![](page-wireframe.jpg)
|
||||
![](https://github.com/01-edu/public/blob/master/subjects/carbon-copy/page-wireframe.jpg)
|
||||
|
||||
#### Phase 2: custom CSS _(mandatory)_
|
||||
### Phase 2: custom CSS _(mandatory)_
|
||||
|
||||
First of all, let's customize the color atmosphere of the webpage to your own taste: go to the CSS file `styles.css`, & replace the current blue & yellow with 2 new colors of your choice.
|
||||
|
||||
Now that the page is mainly built, you have to populate the "Dashboard" section with 3 new elements.
|
||||
![](dashboard-template.jpg)
|
||||
![](https://github.com/01-edu/public/blob/master/subjects/carbon-copy/dashboard-template.jpg)
|
||||
|
||||
Those 3 cards have to display respectively one information with:
|
||||
|
||||
|
@ -44,29 +44,29 @@ Those 3 cards have to display respectively one information with:
|
|||
|
||||
For this phase, you'll have to make the whole HTML & CSS by yourself.
|
||||
|
||||
#### Phase 3: JS interactions _(mandatory & optional)_
|
||||
### Phase 3: JS interactions _(mandatory & optional)_
|
||||
|
||||
If you made it until here pretty fast, now the fun will begin! You're going to add a bunch of JS interactions to make elements appear / disappear / change in the HTML & CSS by linking a JS [script](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) to your `index.html`.
|
||||
|
||||
- Change the order of the pictures when clicking on the pictures' section, [toggling](https://css-tricks.com/snippets/javascript/the-classlist-api/) the pre-defined class `row-reverse` from the CSS file `styles.css`.
|
||||
|
||||
![](images-order.gif)
|
||||
![](https://github.com/01-edu/public/blob/master/subjects/carbon-copy/images-order.gif)
|
||||
|
||||
- Option 1: In the Contact section, when clicking on the "Introduce yourself" button, get the text typed in the `input` and display it in the middle of the following sentence: "Nice to meet you _[put here the input data]_ 👋! Thanks for introducing yourself." Also, the `<p>`, `<input>` & `<button>` elements have to disappear after the button has been clicked.
|
||||
|
||||
![](contact-input.gif)
|
||||
![](https://github.com/01-edu/public/blob/master/subjects/carbon-copy/contact-input.gif)
|
||||
|
||||
- Option 2: When clicking on a card, open a modal window that will show the whole article ; the modal will be closed either when clicking on a "Close" button, or when the "Escape" key is pressed.
|
||||
|
||||
![](modale.gif)
|
||||
![](https://github.com/01-edu/public/blob/master/subjects/carbon-copy/modale.gif)
|
||||
|
||||
- Option 3: In the modal article, create a widget that allows to change the text alignment ; on click on `left` or `center` buttons, the layout changes to the chosen justification, and the selected option's `font-weight` becomes `bold` whereas the other becomes `light`.
|
||||
|
||||
![](text-alignment.gif)
|
||||
![](https://github.com/01-edu/public/blob/master/subjects/carbon-copy/text-alignment.gif)
|
||||
|
||||
- Warrior option: set the `header` text content with a random quote every time the page is loaded, and then every 10 seconds. You can use this marvelous [Chuck Norris API](https://api.chucknorris.io/) to [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) his most inspiring sayings and display them in your own page!
|
||||
|
||||
![](fetch-quote.gif)
|
||||
![](https://github.com/01-edu/public/blob/master/subjects/carbon-copy/fetch-quote.gif)
|
||||
|
||||
### Notions
|
||||
|
||||
|
@ -82,7 +82,7 @@ If you made it until here pretty fast, now the fun will begin! You're going to a
|
|||
- [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
|
||||
- [`setInterval`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)
|
||||
|
||||
### Provided files
|
||||
### Files
|
||||
|
||||
Download [`carbon-copy.zip`](https://assets.01-edu.org/carbon-copy) to have at your disposal the following files:
|
||||
|
||||
|
|
Loading…
Reference in New Issue