как выучить фронтенд
Feb. 20th, 2024 01:09 pm![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
avvaКак помочь кому-то выучить с нуля начала вебдизайна и фронтенд-программирования?
(У ребенка в школе есть такие уроки, я на это посмотрел и ужаснулся. Они дают детям делать copy/paste больших кусков HTML и CSS, не объясняя особо, почему и как все это работает, все это делается в Visual Studio и результат просматривается только на локальном сервере, внутрь намешан ASP.NET, разницу между server-side и client-side никто, кажется, не объясняет, в общем бред какой-то)
Я подумал, что план у меня был бы примерно такой.
1. Открываем аккаунт на neocities.org.
2. Делаем домашнюю страницу, изучаем основы HTML, разметку текста, ссылки, картинки.
3. Несколько страниц, простой CSS чтобы сделать красиво, отдельно в файле и внутри HTML.
4. Как работать с devtools, как искать и читать документацию на MDN.
5. Командная строка в линуксе (например), основные команды, что такое процессы, как их запускать/убивать. Простые скрипты, работа с текстовыми файлами, redirect ввода/вывода, pipes.
6. интернет-адреса, поток данных через интернет (без подробностей TCP/IP), модель клиент-сервер, netcat, обмен данными на коленке через netcat.
7. Что такое HTTP, что делает веб-сервер, вкладка network в devtools, установка nginx, менять файлы на сервере и видеть, как они меняются в браузере, как запустить скрипт server-side через nginx.
8. Простые скрипты server-side на коленке, HTML forms, пример страницы, принимающей данные пользователя и записывающей в файл на сервере.
9. Начала джаваскрипта, разница между client-side и server-side, перехват событий от клавиатуры/мышки.
10. DOM, манипуляция DOM из джаваскрипта, box model в CSS, интересные примеры layout с помощью CSS (страница с двумя колонками итд.)
11. Какой-то пример темплейтов server-side (PHP?) и что они дают. jsQuery, почему она удобна, и как то же самое сделать руками. Какой-то CSS framework и что он дает, и как то же самое делать руками. Какой-то большой фреймворк (Vue? React?) и что он дает, и как то же самое сделать руками.
12. Что такое CMS (на примере Wordpress?), зачем нужно, как выглядит изнутри.
Покритикуйте!
Отдельно мне интересно, как можно построить программу обучения такого вида с хорошими (не муторными, не очень длинными, но и не тривиальными) самостоятельными заданиями. На каждый пункт отдельно можно найти книги, tutorials итд. Но есть ли наборы упражнений, постепенно растущих по сложности и учитывающих новый материал? "Следующий шаг: страница с HTML-таблицей, в ней должны быть такие-то данные и выглядеть должна пример так. [пропускаем 50 заданий] Следующий шаг: простейший to-do list, умеет показывать список заданий, принимать новое и удалять сделанное, все через формы и server-side без джаваскрипта". Если знаете что-то такое хотя бы для частей вышеописанной программы, расскажите, пожалуйста.
(У ребенка в школе есть такие уроки, я на это посмотрел и ужаснулся. Они дают детям делать copy/paste больших кусков HTML и CSS, не объясняя особо, почему и как все это работает, все это делается в Visual Studio и результат просматривается только на локальном сервере, внутрь намешан ASP.NET, разницу между server-side и client-side никто, кажется, не объясняет, в общем бред какой-то)
Я подумал, что план у меня был бы примерно такой.
1. Открываем аккаунт на neocities.org.
2. Делаем домашнюю страницу, изучаем основы HTML, разметку текста, ссылки, картинки.
3. Несколько страниц, простой CSS чтобы сделать красиво, отдельно в файле и внутри HTML.
4. Как работать с devtools, как искать и читать документацию на MDN.
5. Командная строка в линуксе (например), основные команды, что такое процессы, как их запускать/убивать. Простые скрипты, работа с текстовыми файлами, redirect ввода/вывода, pipes.
6. интернет-адреса, поток данных через интернет (без подробностей TCP/IP), модель клиент-сервер, netcat, обмен данными на коленке через netcat.
7. Что такое HTTP, что делает веб-сервер, вкладка network в devtools, установка nginx, менять файлы на сервере и видеть, как они меняются в браузере, как запустить скрипт server-side через nginx.
8. Простые скрипты server-side на коленке, HTML forms, пример страницы, принимающей данные пользователя и записывающей в файл на сервере.
9. Начала джаваскрипта, разница между client-side и server-side, перехват событий от клавиатуры/мышки.
10. DOM, манипуляция DOM из джаваскрипта, box model в CSS, интересные примеры layout с помощью CSS (страница с двумя колонками итд.)
11. Какой-то пример темплейтов server-side (PHP?) и что они дают. jsQuery, почему она удобна, и как то же самое сделать руками. Какой-то CSS framework и что он дает, и как то же самое делать руками. Какой-то большой фреймворк (Vue? React?) и что он дает, и как то же самое сделать руками.
12. Что такое CMS (на примере Wordpress?), зачем нужно, как выглядит изнутри.
Покритикуйте!
Отдельно мне интересно, как можно построить программу обучения такого вида с хорошими (не муторными, не очень длинными, но и не тривиальными) самостоятельными заданиями. На каждый пункт отдельно можно найти книги, tutorials итд. Но есть ли наборы упражнений, постепенно растущих по сложности и учитывающих новый материал? "Следующий шаг: страница с HTML-таблицей, в ней должны быть такие-то данные и выглядеть должна пример так. [пропускаем 50 заданий] Следующий шаг: простейший to-do list, умеет показывать список заданий, принимать новое и удалять сделанное, все через формы и server-side без джаваскрипта". Если знаете что-то такое хотя бы для частей вышеописанной программы, расскажите, пожалуйста.
