Skip to content

Commit 6f73085

Browse files
alexbaumgertneralexbaumgertner
committed
Add antd design system
https://ant.design
1 parent a4a7fb9 commit 6f73085

5 files changed

Lines changed: 130 additions & 1806 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"lint": "next lint"
1111
},
1212
"dependencies": {
13+
"antd": "^4.20.6",
1314
"next": "12.1.6",
1415
"react": "18.1.0",
1516
"react-dom": "18.1.0"

‎pages/_app.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import type { AppProps } from 'next/app'
2+
import 'antd/dist/antd.css'
23

34
function MyApp({ Component, pageProps }: AppProps) {
45
return <Component {...pageProps} />

‎pages/index.tsx‎

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,38 @@
11
import type { NextPage } from 'next'
22
import Head from 'next/head'
33

4+
import { Layout } from 'antd';
5+
6+
const { Footer, Content } = Layout;
7+
48
const Home: NextPage = () => {
59
return (
6-
<>
10+
<Layout>
711
<Head>
812
<title>Easy deep learning</title>
913
</Head>
1014

11-
<main>
15+
<Content>
1216
<h1>
1317
Образование спасет мир!
1418
</h1>
1519

16-
<p><a href="https://github.com/easy-deep-learning">github</a></p>
17-
<p><a href="https://mybook.ru/tags/sovremennoe-obrazovanie/">Современное образование (Книги в mybook)</a></p>
18-
<p>
19-
<a href="https://newtonew.com/book/most-influential-education-books">10 самых влиятельных книг об образовании</a> <br/>
20-
От Руссо до Иллича: десять книг, которые сформировали современную педагогику и определили, что мы думаем об образовании сегодня.
21-
</p>
20+
<h3>Курсы</h3>
21+
<ul>
22+
<li>
23+
<a href="https://easy-deep-learning.github.io/learn-frontend">Фронтенд/Бекенд на JS</a>, начался в конце мая 2022 года.
24+
</li>
25+
</ul>
26+
27+
<h3>Книги</h3>
28+
29+
<ul>
30+
<li><a href="https://mybook.ru/tags/sovremennoe-obrazovanie/">Современное образование (Книги в mybook)</a></li>
31+
<li> <a href="https://newtonew.com/book/most-influential-education-books">10 самых влиятельных книг об образовании</a> <br/>
32+
От Руссо до Илича: десять книг, которые сформировали современную педагогику и определили, что мы думаем об образовании сегодня.</li>
33+
</ul>
34+
35+
<h3>Видео</h3>
2236

2337
<div className="video-list">
2438

@@ -65,10 +79,10 @@ const Home: NextPage = () => {
6579

6680
</div>
6781

68-
</main>
82+
</Content>
6983

70-
<footer/>
71-
</>
84+
<Footer/>
85+
</Layout>
7286
)
7387
}
7488

‎pages/learn-frontend/index.tsx‎

Lines changed: 103 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,115 @@
11
import type { NextPage } from 'next'
22
import Head from 'next/head'
3+
import { Layout } from 'antd';
4+
const { Content } = Layout;
5+
import { Typography, Divider } from 'antd';
6+
import { Row, Col } from 'antd';
7+
8+
const { Paragraph } = Typography;
39

410
const LearnFrontend: NextPage = () => {
511
return (
612
<>
713
<Head>
814
<title>Learn Frontend</title>
915
</Head>
10-
<main>
11-
12-
<h2>Привет!</h2>
13-
14-
<p>
15-
Вы наверное видели успевший стать знаменитым твит: <br/><br/>
16-
{/* eslint-disable-next-line @next/next/no-img-element */}
17-
<a href="https://twitter.com/alexbaumgertner/status/1527602497782788096">
18-
<img src="./images/twit_alexbaumgertner_1_49pm_May_20_2022.png" width="500px" alt="twit alexbaumgertner from 1.49pm May 20 2022" />
19-
</a>
20-
</p>
21-
22-
<p>
23-
Многие откликнулось и я заметил, что есть два типа запросов:
24-
</p>
25-
26-
<h3>
27-
1. Я раньше не работал(-а) с HTML/CSS/JS, но хочу научиться
28-
</h3>
29-
30-
<p>— вам я рекомендую посмотреть и пройти два очень хороших вводных бесплатных курса:</p>
31-
32-
<ul>
33-
<li>
34-
<strong>HTML/CSS верстка</strong>: <a href="https://htmlacademy.ru/courses/intro-to-web-development">https://htmlacademy.ru/courses/intro-to-web-development</a>
35-
</li>
36-
<li>
37-
<strong>JS: <a href="https://ru.hexlet.io/courses/introduction_to_programming">https://ru.hexlet.io/courses/introduction_to_programming</a></strong>
38-
</li>
39-
</ul>
40-
41-
<h3>
42-
2. Я немного знаю HTML/CSS/JS, хочу развиваться дальше
43-
</h3>
44-
45-
<p>
46-
Попробуйте пройти <a href="https://nextjs.org/learn/foundations/about-nextjs">курс по NextJS</a>.
47-
Это отличный фреймворк для создания веб-сайтов на React.
48-
</p>
49-
50-
<p>Страничка, которую вы сейчас читаете — <a href="https://github.com/easy-deep-learning/easy-deep-learning.github.io">сделана на NextJS</a>.</p>
51-
52-
53-
<h3>И первым и вторым самое главное — нужно придумать свой проект</h3>
54-
55-
<p>Свой проект — главный мотиватор и необходимое условие успеха.</p>
56-
57-
<p>
58-
По проекту:
59-
придумайте что-то, важное для вас, это может быть
60-
</p>
61-
62-
<ul>
63-
<li>система учета финансов</li>
64-
<li>система учета еды, тренировок</li>
65-
<li>сайт благотворительной организации</li>
66-
<li>обучающая платформа по английскому/немецкому/турецкому/итд языку</li>
67-
<li>любой веб-сайт, о котором вы мечтали</li>
68-
</ul>
69-
70-
71-
<h3>У меня есть идея проекта, что дальше?</h3>
72-
73-
<ul>
74-
<li>Создайте на github репозиторий, добавьте меня (alexbaumgertner) в collaborators</li>
75-
<li>
76-
создайте issue с описанием проекта, вашими текущими знаниями HTML/CSS/JS, программами проектирования сайтов типа https://www.figma.com/ и начнем работать :)
77-
</li>
78-
</ul>
79-
80-
81-
<p>Как работать с github</p>
82-
<ul>
83-
<li><a href="https://www.youtube.com/watch?v=9dkzbSnN2FQ">https://www.youtube.com/watch?v=9dkzbSnN2FQ (RU)</a></li>
84-
<li><a href="https://www.youtube.com/watch?v=RGOj5yH7evk&t=426s">https://www.youtube.com/watch?v=RGOj5yH7evk&t=426s (EN)</a></li>
85-
</ul>
86-
87-
<p>
88-
Не бойтесь!
89-
Абсолютно у всех будут проблемы и вопросы.
90-
Я первый раз начал изучать HTML в 2001 году, в 2008 нашел первую работу, а как разработчик стартовал в 2011.
91-
</p>
92-
93-
<p>
94-
Если что-то не будет получаться — ничего страшного, пишите и спрашивайте в <a
95-
href="https://github.com/easy-deep-learning/learn-javascript/discussions">github.com/easy-deep-learning/learn-javascript/discussions</a>
96-
</p>
97-
98-
<p>Удачи!</p>
99-
100-
</main>
16+
<Row>
17+
<Col span="4"/>
18+
<Col span="18">
19+
<Content>
20+
21+
<h2>Привет!</h2>
22+
23+
<Paragraph>
24+
Вы наверное видели успевший стать знаменитым твит: <br/><br/>
25+
{/* eslint-disable-next-line @next/next/no-img-element */}
26+
<a href="https://twitter.com/alexbaumgertner/status/1527602497782788096">
27+
<img src="./images/twit_alexbaumgertner_1_49pm_May_20_2022.png" width="500px" alt="twit alexbaumgertner from 1.49pm May 20 2022" />
28+
</a>
29+
</Paragraph>
30+
31+
<Paragraph>
32+
Многие откликнулось и я заметил, что есть два типа запросов:
33+
</Paragraph>
34+
35+
<h3>
36+
1. Я раньше не работал(-а) с HTML/CSS/JS, но хочу научиться
37+
</h3>
38+
39+
<Paragraph>— вам я рекомендую посмотреть и пройти два очень хороших вводных бесплатных курса:</Paragraph>
40+
41+
<ul>
42+
<li>
43+
<strong>HTML/CSS верстка</strong>: <a href="https://htmlacademy.ru/courses/intro-to-web-development">https://htmlacademy.ru/courses/intro-to-web-development</a>
44+
</li>
45+
<li>
46+
<strong>JS: <a href="https://ru.hexlet.io/courses/introduction_to_programming">https://ru.hexlet.io/courses/introduction_to_programming</a></strong>
47+
</li>
48+
</ul>
49+
50+
<h3>
51+
2. Я немного знаю HTML/CSS/JS, хочу развиваться дальше
52+
</h3>
53+
54+
<Paragraph>
55+
Попробуйте пройти <a href="https://nextjs.org/learn/foundations/about-nextjs">курс по NextJS</a>.
56+
Это отличный фреймворк для создания веб-сайтов на React.
57+
</Paragraph>
58+
59+
<Paragraph>Страничка, которую вы сейчас читаете — <a href="https://github.com/easy-deep-learning/easy-deep-learning.github.io">сделана на NextJS</a>.</Paragraph>
60+
61+
<Divider/>
62+
63+
<h3>И первым и вторым самое главное — нужно придумать свой проект</h3>
64+
65+
<Paragraph>Свой проект — главный мотиватор и необходимое условие успеха.</Paragraph>
66+
67+
<Paragraph>
68+
По проекту:
69+
придумайте что-то, важное для вас, это может быть
70+
</Paragraph>
71+
72+
<ul>
73+
<li>система учета финансов</li>
74+
<li>система учета еды, тренировок</li>
75+
<li>сайт благотворительной организации</li>
76+
<li>обучающая платформа по английскому/немецкому/турецкому/итд языку</li>
77+
<li>любой веб-сайт, о котором вы мечтали</li>
78+
</ul>
79+
80+
81+
<h3>У меня есть идея проекта, что дальше?</h3>
82+
83+
<ul>
84+
<li>Создайте на github репозиторий, добавьте меня (alexbaumgertner) в collaborators</li>
85+
<li>
86+
создайте issue с описанием проекта, вашими текущими знаниями HTML/CSS/JS, программами проектирования сайтов типа https://www.figma.com/ и начнем работать :)
87+
</li>
88+
</ul>
89+
90+
91+
<Paragraph>Как работать с github</Paragraph>
92+
<ul>
93+
<li><a href="https://www.youtube.com/watch?v=9dkzbSnN2FQ">https://www.youtube.com/watch?v=9dkzbSnN2FQ (RU)</a></li>
94+
<li><a href="https://www.youtube.com/watch?v=RGOj5yH7evk&t=426s">https://www.youtube.com/watch?v=RGOj5yH7evk&t=426s (EN)</a></li>
95+
</ul>
96+
97+
<Paragraph>
98+
Не бойтесь!
99+
Абсолютно у всех будут проблемы и вопросы.
100+
Я первый раз начал изучать HTML в 2001 году, в 2008 нашел первую работу, а как разработчик стартовал в 2011.
101+
</Paragraph>
102+
103+
<Paragraph>
104+
Если что-то не будет получаться — ничего страшного, пишите и спрашивайте в <a
105+
href="https://github.com/easy-deep-learning/learn-javascript/discussions">github.com/easy-deep-learning/learn-javascript/discussions</a>
106+
</Paragraph>
107+
108+
<Paragraph>Удачи!</Paragraph>
109+
110+
</Content>
111+
</Col>
112+
</Row>
101113
</>
102114
)
103115
}

0 commit comments

Comments
 (0)