├── README.md
└── basics
    ├── beginner-timer-since.md
    └── surver-form.md


/README.md:
--------------------------------------------------------------------------------
 1 | # Frontend 101
 2 | 
 3 | This repository contains 10 challenges for the 10 most basic topics that we have identified in the Front-End area.
 4 | 
 5 | In each challenge, you can access the resources we recommend related to the related topic from the .md extension file. You can fork this repository, work on your own GitHub account, and when you are finished working, you can contact us on our Discord server via the Frontend 101 channel and request a **review**.
 6 | 
 7 | ### Step 1:
 8 | 
 9 | Fork this repository.
10 |  When you click the Fork button located on the right top of the Repository, a copy of it will be added to your profile.
11 | 
12 | ![Fork](https://media.discordapp.net/attachments/1023694079034392697/1036233739560292452/Screen_Shot_2022-10-30_at_14.01.18.png)
13 | 
14 | ### Step 2:
15 | 
16 | On the new screen that appears, after making sure that the copy the main branch only option is turned off, click the **Create fork** button.
17 | ![Fork](https://cdn.discordapp.com/attachments/1023694079034392697/1036234578270113802/Screen_Shot_2022-10-30_at_14.05.41.png)
18 | 
19 | Now the repository has been copied in the following format on your profile.
20 | 
21 | `https://github.com/[your-user-name]/frontend-101`
22 | 
23 | ### Step 3:
24 | 
25 | To pull the copy of the project that you have on your computer, run the following commands in the terminal.
26 | _(You can use Bash terminal for Windows, iTerm2 for Mac.)_
27 | 
28 | Note: Make sure that you are in the directory that you want to add, because the following command will clone the project to your computer in the directory where you are running it.
29 | 
30 | ```bash
31 | git clone https://github.com/[your-user-name]/frontend-101
32 | ```
33 | 
34 | **Now you are ready to work.**
35 | 
36 | ### Step 4:
37 | 
38 | After solving the challenges, run them in the project directory in order to throw the changes you made back to GitHub.
39 | 
40 | ```bash
41 | git add .
42 | ```
43 | 
44 | ```bash
45 | git commit -m "the steps in the project are completed"
46 | ```
47 | 
48 | ```bash
49 | git push origin main
50 | ```
51 | 
52 | ### Step 5:
53 | 
54 | Share the link of the repository on your GitHub account to the Frontend 101 channel on our Discord server.
55 | 
56 | ```
57 | https://github.com/[your-user-name]/frontend-101
58 | ```
59 | 
60 | A community member will add a code review on the copy you produce and share their thoughts with you.Later, at a time you agree, you can exchange ideas about challenges on Pair Programming channels together and ask about points you don't understand.
61 | 
62 | ![Logo](https://camo.githubusercontent.com/2d9ba588f573fd812658381f62e52bc54aaa780827a82b2608341fb908f08cff/68747470733a2f2f6d656469612e646973636f72646170702e6e65742f6174746163686d656e74732f313032353334383134313335343037343132342f313033303932373536343034303036313130382f547769747465725f42616e6e65722e706e673f77696474683d31343430266865696768743d343830)
63 | 


--------------------------------------------------------------------------------
/basics/beginner-timer-since.md:
--------------------------------------------------------------------------------
 1 | ## Timer Since
 2 | 
 3 | _button was clicked 3 seconds ago_
 4 | 
 5 | Make an app that will display the time since button was clicked.
 6 | 
 7 | ![Timer Since](https://i.imgur.com/2VIljAA.png)
 8 | 
 9 | ## Requirements
10 | 
11 | - You can choose a library-framework to use. (React, Vue, Angular, Vanilla, etc.)
12 | - Styling is not must.
13 | - 3rd party libraries are not allowed(unless ui libraries).
14 | - App must be work properly.
15 | - It must show the time as seconds, minutes, hours.
16 | 
17 | ## Bonus
18 | 
19 | - Test
20 | - Type Safety(TypeScript)
21 | - Best Practices
22 | - Performance
23 | - Persistent State
24 | 


--------------------------------------------------------------------------------
/basics/surver-form.md:
--------------------------------------------------------------------------------
 1 | ## Survey form
 2 | 
 3 | Create a survey form
 4 | 
 5 | ![Survey Form Example](https://i.ibb.co/qpHL28v/survey-form-example.png)
 6 | 
 7 | ## Requirements
 8 | 
 9 | - Title must change.
10 | - Should be written line by line as shown in the picture without using any CSS.
11 | - If the email address is not entered, it should give an error when you press submit.
12 | - As seen in row 6, only 1 of the buttons should be selected.
13 | - Placeholder should be added.
14 | 
15 | ## Bonus
16 | 
17 | - CSS
18 | - Javascript
19 | 


--------------------------------------------------------------------------------