docs(gettingstarted): correction of getting started page

This commit is contained in:
thomas
2023-09-21 17:42:09 +02:00
parent 8c6d2023d6
commit a7b3a583b5
4 changed files with 38 additions and 14 deletions

View File

@@ -40,3 +40,5 @@ If you don't remember the command, click on the Code button on the right side of
![PR code modal](../../../assets/PR-code-btn-modal.png)
🔥 You can now navigate through the solution locally and serve it to test it. 🔥
<!-- gh repo set-default -->

View File

@@ -0,0 +1,6 @@
---
title: Create a challenge
description: Guide to create your own challenge
sidebar:
order: 5
---

View File

@@ -5,34 +5,37 @@ sidebar:
order: 1
---
To get started with **Angular Challenges**, follow the step:
To get started with <b>Angular Challenges</b>, follow these steps:
## Create a Github account
## Create a Github Account
If you want to submit an answer, you will need your own Github account. Moreover it's always good to have one and it's free.
If you wish to submit an answer, you will need to have your own GitHub account. Additionally, having a GitHub account is always beneficial, and it's free.
## Folk the github project
Go to [Angular Challenges Repository](https://github.com/tomalaforge/angular-challenges) and click on the **Fork** button in the header. This will create a copy of this repository inside your own Github page.
Navigate to the [Angular Challenges Repository](https://github.com/tomalaforge/angular-challenges) and click on the <span class="github-neutral-btn"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo-forked mr-2">
<path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path></svg>Fork</span> button in the header. This will create a copy of this repository on your own GitHub page.
## Clone the repository on your own machine
## Clone the repository to your local machine
Find a directory on your local computer, and clone this repository. Open a terminal, go to the choosen directory and tape this:
Select a directory on your local computer and clone this repository.
Open a terminal, navigate to the chosen directory, and type the following command:
```bash
git clone https://github.com/[YOUR_GITHUB_NAME]/angular-challenges.git
```
:::note
Your can find the url to clone on the button labeled <span class="github-success-btn"><> Code</span> on your **OWN INSTANCE** of the Angular Challenge repository.
You can find the clone URL by clicking on the <span class="github-success-btn"><> Code</span> button in your <b>own instance</b> of the Angular Challenges repository.
![Header of github workpspace](../../../assets/header-github.png)
:::
## Open the project inside your favourite IDE
## Open the project in your favourite IDE
Open your project inside any IDE of your choice.
Open the project in any IDE of your choice.
## Install all dependancies
@@ -42,13 +45,13 @@ npm install
## Choose a challenge
Your project is now up and running. The only thing left to do is to choose a challenge 🚀
Your project is now up and running. The only remaining step is to choose a challenge 🚀
Each challenge is composed by:
Each challenge consists of:
- **NAME**: indicating what the challenge is about
- **NUMBER**: order of creation. The number doesn't have any particular meaning but helps to reference it inside Github Pull Request Section.
- **BADGE**: helps to visualize the degree of difficulty. It's totally subjectif 😅
- <b>Name</b>: indicating what the challenge is about.
- <b>Number</b>: order of creation. The number doesn't have any particular meaning but helps for reference in Github Pull Request section.
- <b>Badge</b>: helps visualize the degree of difficulty. It's entirely subjective 😅
- 🟢 easy
- 🟠 medium
- 🔴 difficult

View File

@@ -19,6 +19,19 @@
color: white;
}
.github-neutral-btn {
border: 1px solid rgba(240, 246, 252, 0.1);
border-radius: 6px;
padding: 2px 8px;
background-color: rgb(33, 38, 45);
color: rgb(201, 209, 217);
fill: rgb(201, 209, 217);
display: inline-flex;
width: fit-content;
gap: 6px;
margin: 0px 2px;
}
a.primary {
color: #fff !important;
}