Всем привет. В этой и в нескольких последующих постах я хотел бы помочь Вам коротко и просто описать порядок изучения технологий и к каждой из них(или их комбинации) я дам практические задания.
К сожалению я не смогу в коротких постах затронуть все возможно возникшие у вас вопросы, но постараюсь ответить на них в комментариях.
Теория
Итак начнем. Если вы уже почитали о фронтенде и примерно поняли для чего он нужен, то скорее всего знаете, что основные технологии фронтенд разработчика это HTML, CSS и JS. В этом посте мы коснемся только первых двух.
Я не буду описывать что это и как этим пользовать потому что в интернете на эту тему информации достаточное количество, но я укажу вам примерное направление изучения.
Для базового освоения этих языков достаточно будет посмотреть всего 2 видео и повторять за автором. (Видео не мои, я постарался найти самые понятные видео по моему скромному мнению)
Во время просмотра видео обязательно делайте всё то же самое что и автор видео. Старайтесь переписывать его код и адаптировать под себя(вставлять свои картинки, свой текст и тд.)
HTML и CSS сильно связаны между собой, поэтому постарайтесь думать о них, как о чем-то едином, как о вёрстке, а не отдельных языках.
Итак, если кратко.
1.Смотрим видео по HTML и повторяем.
https://youtu.be/DOEtVdkKwcU
2. Смотрим видео по CSS и повторяем.
https://youtu.be/SpCUuyZZTp8
После просмотра этих двух видео и созданием простой странички с портфолио вы скорее всего уже будете базово понимать верстку. Надеюсь вы всё повторили и у вас всё получилось. Если нет, то пересмотрите непонятные моменты или задайте вопросы в комментариях. Поэтому теперь мы можем перейти к практике.
Практика
Сразу скажу, не бойтесь возвращаться к видео , которые вы посмотрели чтобы вспомнить какие-то моменты, в работе программистом гугл используется постоянно и большая часть задач решается с помощью гугла, поэтому не зазорно непонятные вещи загуглить и если вы чего-то не понимаете по видео, которые я предложил вы можете посмотреть аналогичные у других авторов.
Итак, Вам нужно сверстать один не очень сложный макет. Вот ссылка.
Дам вам немного подсказок.
Структура секция может выглядеть примерно так. У каждой секции будет внешний контейнер и внутренний. Это сделано для того, чтобы сделать эти широкие пустые поля по бокам и чтобы можно было покрасить фон некоторых секций в серый цвет.
В остальном проблем возникнуть не должно.
Если будут вопросы, то задавайте их в комментариях я постараюсь на всё ответить. Но перед тем как задать вопрос, убедитесь, что вы уделили достаточно времени поиску решения в интернете. Ведь умение гуглить не менее важно, чем умение программировать!
Если я увижу в комментариях, что макет слишком сложный или непонятно как к нему подойти, то сделаю небольшой видео-разбор и выложу готовую верстку.
Вывод
В сумме выполнив вышеуказанные шаги вы научитесь на базовом уровне понимать верстку и сверстаете свой первый реальный макет, который можно будет уже положить в портфолио. Обязательно сохраняйте все свои учебные работы. В следующем посте я расскажу вам о css препроцессорах, сборщиках проектов и БЭМ методологии ,и сверстаем еще один более сложный макет с использованием новых знаний.
*Пост будет редактироваться, пишите в комментариях что не понятно и я постараюсь дополнить самые непонятные части*