Skip to content

Commit a9f9934

Browse files
AsabenehAsabeneh
committed
day 29
1 parent facafb6 commit a9f9934

17 files changed

+13217
-1
lines changed

‎.gitignore

-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ draft.md
22
react-for-everyone.md
33
component.md
44
draft
5-
29_explore
65
30_conclusions
76

87

‎29_explore/29_explore.md

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<div align="center">
2+
<h1> 30 Days Of React: Project</h1>
3+
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
4+
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
5+
</a>
6+
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
7+
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
8+
</a>
9+
10+
<sub>Author:
11+
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
12+
<small> October, 2020</small>
13+
</sub>
14+
15+
</div>
16+
17+
[<< Day 28](../27_Ref/27_ref.md) | [Day 29 >>](../29_explore/29_explore.md)
18+
19+
![30 Days of React banner](../images/30_days_of_react_banner_day_29.jpg)
20+
21+
# Explore
22+
23+
Congratulations for making to this far. You are are unstoppable. So far you have learned lots of concepts and also built several mini-projects. I believe those mini-projects have helped you to understand React very well. After this, you can work on a sole or group React project. You can also expand your skill by using different packages (classnames, lodash, react-helmet, recharts, etc.), implementing PWA, styled components and CSS libraries with React application. In addition, learn SEO, accessibility, responsiveness and browser compatibility. Explore more and increase your knowledge in the domain. Read the [React documentation](https://reactjs.org/). Now, you should feel confident enough about your React skill and you should also start applying for entry or junior softer developer or front end developer positions. No one will tell you that you are read for a job, so you should make yourself ready.
24+
25+
# Exercises
26+
27+
## Exercises: Level 1
28+
29+
1. Polish your GitHub and make your projects as clean as possible
30+
2. Work on your portfolio
31+
3. Create LinkedIn account if you don't have yet. If you have LinkedIn account make it as attractive as possible. It will give a high chance for potential recruiters and companies to know more about you. In addition, there are lots of materials and people who can be used as motivation on daily basis.
32+
4. Follow the author on LinkedIn, Twitter or GitHuh if he created impact on your life.
33+
5. Become an ambassador of CodingForAll by supporting and advocating our causes.
34+
6. Write about 30DaysOfReact on different platforms and create an opportunity for others to get a valuable skill.
35+
36+
## Exercises: Level 2
37+
38+
Coming ...
39+
40+
🎉 CONGRATULATIONS ! 🎉
41+
42+
[<< Day 27](../27_Ref/27_ref.md) | [Day 29>>]()

‎29_explore/29_explore_boilerplate/.gitignore

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
15+
.DS_Store
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*

‎29_explore/29_explore_boilerplate/README.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# 30 Days of React App: Day 25
2+
3+
In the project directory, you can run to start the project
4+
5+
### `npm start`

‎29_explore/29_explore_boilerplate/package.json

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "30-days-of-react",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"@testing-library/jest-dom": "^4.2.4",
7+
"@testing-library/react": "^9.3.2",
8+
"@testing-library/user-event": "^7.1.2",
9+
"react": "^16.13.1",
10+
"react-dom": "^16.13.1",
11+
"react-scripts": "3.4.3"
12+
},
13+
"scripts": {
14+
"start": "react-scripts start",
15+
"build": "react-scripts build",
16+
"test": "react-scripts test",
17+
"eject": "react-scripts eject"
18+
},
19+
"eslintConfig": {
20+
"extends": "react-app"
21+
},
22+
"browserslist": {
23+
"production": [
24+
">0.2%",
25+
"not dead",
26+
"not op_mini all"
27+
],
28+
"development": [
29+
"last 1 chrome version",
30+
"last 1 firefox version",
31+
"last 1 safari version"
32+
]
33+
}
34+
}

‎29_explore/29_explore_boilerplate/public/index.html

+111
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<link
7+
href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500|Roboto:300,400,500&display=swap"
8+
rel="stylesheet"
9+
/>
10+
<meta
11+
name="description"
12+
content="Web site created using create-react-app"
13+
/>
14+
15+
<title>30 Days Of React App</title>
16+
<style>
17+
18+
/* == General style === */
19+
20+
* {
21+
box-sizing: border-box;
22+
padding: 0;
23+
margin: 0;
24+
}
25+
26+
html,
27+
body {
28+
height: 100%;
29+
line-height: 1.5;
30+
font-family: 'Montserrat';
31+
font-weight: 300;
32+
color: black;
33+
}
34+
35+
.root {
36+
min-height: 100%;
37+
position: relative;
38+
}
39+
40+
.header-wrapper,
41+
.main-wrapper,
42+
.footer-wrapper {
43+
width: 85%;
44+
margin: auto;
45+
}
46+
47+
.header-wrapper,
48+
.main-wrapper {
49+
padding: 10px;
50+
margin: 2px auto;
51+
}
52+
53+
h1 {
54+
font-size: 70px;
55+
font-weight: 300;
56+
}
57+
58+
h2,
59+
h3 {
60+
font-weight: 300;
61+
}
62+
63+
header {
64+
background-color: #61dbfb;
65+
padding: 25;
66+
padding: 10px;
67+
}
68+
69+
main {
70+
padding: 10px;
71+
padding-bottom: 60px;
72+
/* Height of the footer */
73+
}
74+
75+
ul {
76+
margin-left: 15px;
77+
}
78+
79+
ul li {
80+
list-style: none;
81+
}
82+
83+
footer {
84+
position: absolute;
85+
bottom: 0;
86+
width: 100%;
87+
height: 60px;
88+
/* Height of the footer */
89+
background: #6cf;
90+
}
91+
92+
.footer-wrapper {
93+
font-weight: 400;
94+
text-align: center;
95+
line-height: 60px;
96+
}
97+
.user-card {
98+
margin-top: 10px;
99+
}
100+
.user-card > img {
101+
border-radius: 50%;
102+
width: 14%;
103+
}
104+
105+
</style>
106+
107+
</head>
108+
<body>
109+
<div id="root"></div>
110+
</body>
111+
</html>

0 commit comments

Comments
 (0)