Не могу освоить верстку

Дмитрий А.
  · 11,6 K

Здравствуйте. Очень давно пытаюсь освоить верстку, но никак не выходит. Много пересмотрел видео на ютубе, перечитал книг(понимаю, что впитывал воду). Не могу, не выходит ничего, аж руки опускаются. Курсы от htmlacademy купить не могу, средства не позволяют(школьник, не имею такую сумму, к сожалению). Уже нервы не к черту, на стены готов лезть. Что в таком случае делать? Не нужно советов типа "на ютубе очень много видео, учись!"(Просто не нужно таких советов, сам про него знаю).

Что в таком случае делать?

Дизайнер интерфейсов из Ozon отвечает на вопросы об интерактивном дизайне, UX, анимации и...  · slashdesigner.ru

То, что вы готовы лезть на стены ради освоения вёрстки, вызывает моё восхищение. Это говорит о высокой мотивации и любви к предмету. Чтобы освоить HTML и CSS, нужен такой план:

  1. Не изучать устаревшие материалы, забыть о существовании xHTML и ориентироваться только на современные стандарты HTML5 и CSS3. Понять, что в HTML5 теги бывают двух типов: парные и одиночные. Вёрстка состоит в основном из парных тегов и каждый тег имеет определённые доступные параметры и CSS-свойства по умолчанию. Бывают теги, которые отличаются только семантически: div очень похож на h1, у них просто разный набор свойств и нужно использовать их в разных ситуациях. Семантика — умение применять теги уместно.

Хорошая очень компактная книжка, которую я когда-то читал — Джереми Кит - HTML5 для веб-дизайнеров.

  1. Важных тегов, которыми надо уметь пользоваться, не так много: script, link, section+header+footer, div, span, h1+h2+h3, ul+li, a, form, input, table+tr+td. Все остальные можно подсмотреть на htmlbook.ru/html когда будет время и желание.

  2. Понять, что CSS не надо писать руками. Научиться работать с CSS-препроцессорами. Это сэкономит тонну времени. Мне нравится LESS, в моде сейчас SASS.

  3. Узнать наиболее употребимые CSS-свойства: float, display, opacity, width+height, position, background, border, border-radius. Заодно узнать, как использовать псевдоклассы: :hover, :focus.

  4. Разобраться в теме Flexbox-вёрстки. Полезно и развязывает руки.

  5. Поставить нормальную среду разработки, например Visual Studio Code (прекрасен+бесплатный) или WebStorm (любят знакомые), настроить в нём красивую цветовую схему и моноширинный шрифт Menlo покрупнее. Поставить на него плагин Emmet, который позволит меньше печатать HTML-кода. Такой мощный тулбокс будет мотивировать больше практиковаться.

  6. Понять, как реализовать адаптивность: узнать, как работают медиа-запросы. Научиться пользоваться сеткой Бутстрапа или другого фреймворка по душе. Понять, как верстать адаптивный 12-колонник. Сэкономить на этом вторую тонну времени, потому что на одних только медиа-запросах адаптивность реализовать очень больно.

  7. Познать контроль версий: завести Гитхаб, научиться выполнять простые операции: git init, status, log, add, commit, remote, push, diff. Все они есть в курсе по гиту на Хекслете. Степик тоже заслуживает внимания.

  8. Сразу пытаться применять изученное и ставить себе задачи, которые заставят задавать новые вопросы. Не терять наработки и вести конспекты в Notion. Так вы никогда не растеряете то, чему научитесь.

На этом уровне уже можно найти работу тысяч на 40. Идти сразу работать, а не тратить 5 лет на идиотский российский институт, как ваши одноклассники.

  1. Понять, что вёрстка — низшее звено веб-разработки и ваш путь только начался. Понять, что без знания JavaScript на вёрстке не заработать и пора учить его. Идти на сайт JavaScript.ru и становиться фронтенд-разработчиком.
1 эксперт подтверждает
24 января 2019  · 8,5 K
Спасибо вам большое за такое количество информации! Я очень рад, что хоть кто то помог мне с решением проблемы, и... Читать дальше
Комментировать ответ…
Ещё 22 ответа
Fullstack web-разработчик с 8-ми летним опытом. Наставник по программированию и...
Сложно дать конкретный вопрос, тк не знаю на чем именно вы "застреваете". Общий совет который могу дать из опыта решения похожих проблем: "Не ищите ответов до того, как нашли вопрос". Другими словами каждый раз, когда читаете какой-то материал и стараетесь повторить, задавайте себе вопрос "понимаю ли я, все что здесь написано?". Если вы ловите себя... Читать далее
7 мая 2019  · 2,8 K
Комментировать ответ…
Самый быстроразвивающийся проект о WordPress в русскоязычном пространстве. Отвечаем на...  · youtube.com/c/WPlovers
Когда я учил html и css, мне помогла только работа над реальным проектом. Своим или для кого-то — это не важно. Главное понять, что вы хотите, спланировать будущий проект и дальше идти по этому плану решая конкретные задачи. И вот тут вам как раз помогут видео с YouTube, куча готовых сниппетов и приёмов. Появилась задача, пишете запрос в поисковике и... Читать далее
24 января 2019  · 1,9 K
Комментировать ответ…
it-специалист, инженер человеческих душ, мечтаю о basic income.
Для вас на первом месте всегда должна стоять практика. Бесполезно читать книги про языки программирования или гипертекстовую разметку. Нужно открыть редактор кода и начинать потихоньку мастеристь свои собственные интернет-страницы. Только в процессе кодинга возникнут вопросы, ответы на которые расширят ваши познания и дадут нужный опыт. А вообще... Читать далее
Комментировать ответ…
Имею естественно научное образование, в юношестве прикипел к литературе, сейчас...
Тут важно понимать, что вы делали и с чего начинали, что конкретно не получилось и не получается, что начали осваивать, знакомы с базой в виде HTML5&CSS3? Писали что-то сами? Что было не так там. Если интересно и хотите изучать, начните с HTML5&CSS3, попробуйте сверстать хотябы базовый макет. Что в таком случае делать? Работать и биться головой об... Читать далее
22 января 2019  · 1,5 K
Комментировать ответ…
Лев, Лёва, Леолев

Советую просто посмотреть и повторять действия в ютубе за тем, где в реальном времени верстают реальный сайт. Только желательно новый материал, а не старый способ на float'aх

А потом попробовать сделать проект другу или для себя, просто одностраничник

8 февраля 2019  · 1,1 K
Комментировать ответ…
Занимаюсь козами, люблю животных, книги, штангу, учу языки. Круг интересов...
А интерактивные курсы (НЕ интенсивы) от htmlacademy не пробовали? Там много доступно бесплатно, а за относительно недорогую подписку можно получить доступ к более "продвинутым" материалам (сейчас чуть менее чем 400 рублей в месяц, я оплачивала за год - вышло меньше 3 000). Для того, чтобы именно начать - то, что надо. Очень хорошо то, что много... Читать далее
24 января 2019  · 1,3 K
Комментировать ответ…

Просто попробуй поработать над любым реальным проектом. Очень часто проводят различные интенсивы даже смтоимость 100 рублей, это не так много, но именно так, например, я сверстал свой первый сайт.

а где взять этот реальный проект?? скажите пожалуйста(((??

Комментировать ответ…
Проблема скорее всего не в вас, а в курсе. Меняйте курс, меняйте преподавателя. Большинство курсов сделаны как будто не для людей, а для машин. Определения неонятные, логику не доносят. Из за этого у обучающегося в мозгу возникает конфликт. Он не понимает о чем ему толкуют. Мозг хочет понять логику, но никто ему эту логику не объясняет. Я смотрел... Читать далее
14 ноября  · < 100
Комментировать ответ…
Программист
Программирование учится практикой (споры о том, является ли HTML языком программирования или нет оставим в стороне). Изучайте язык, вам как раз Саша Окунев как раз дал роадмап и книжку почитать. Пока изучайте пробуйте эти примеры на практике, пишите код изучайте. Теперь критика других ответов Саша Окунев предлагает сайт javascript.ru, но есть более... Читать далее
22 апреля  · 498
Комментировать ответ…
Читайте также

Можно ли стать программистом без соответствующего образования и если да, то с чего начать?

Математик, аналитик, автоматизатор.

Существует такое мнение, что невозможно научить программировать другого человека. Преподаватель может лишь показать направление, чтобы двигаться. Научиться программировать можно только самостоятельно, пробуя реализовывать разные методы и усложняя изучаемые алгоритмы.

13 ноября 2019  · 4,1 K
Прочитать ещё 2 ответа

Как побороть неуверенность в себе ?

Работаю человеком. Люблю музыку. Зарабатываю деньги стратегиями.

Секрет очень прост: в следующий раз, как только почувствуете страх или неуверенность, сломайте стереотип - сделайте то, чего боитесь, намеренно, неуверенно, как угодно, просто сделайте. 

Почему у вас получится? - У вас всего лишь одна жизнь, не попробуете стать тем, кем хотите в этой - больше шансов не представится. Станьте им сегодня и не переставайте им быть.

И запомните: ваши страхи - самое сильное, что у вас есть. Пока вы их преодолеваете, вы растёте до небес!

Удачи вам.

3 мая 2016  · 10,7 K
Прочитать ещё 8 ответов

В чем отличие веб-дизайнера от "верстальщика"?

Интересуюсь всем понемногу. По большей части люблю компьютерную деятельность.

Здравствуйте, веб-дизайнер работает только лишь с дизайном будущего сайта, подбирает привлекательные цвета на тематику и т.д., а верстальщик уже, так сказать "наверстывает" это всё дело в итоговый результат, чтобы работало без проблем.

23 апреля 2019  · 6,2 K
Прочитать ещё 4 ответа

Как интроверту стать более общительным?

Senior product designer at my.com & mail.ru

Интроверт может быть очень-очень общительным. Но с теми, кого он допустил в круг "своих". Вы путаете интроверта и замкнутого человека. Это разные вещи.

29 мая 2015  · 4,6 K
Прочитать ещё 4 ответа

Как научиться делать сайты?

Программист, web-разработчик

Все очень просто. Сначала следует изучить html, следом за тим css и javascript. К этому моменту у вас формируютмя базовые представления о web разработке. После этого вы выбираете себе один из веб языков (например php или python) и пишите на них простенькие движки. Когда вы понимаете, что чувствуете себя довольно уверенно, вы начинаете ковырять готовые CMS и различные web фреймворки. 

Вот таким простым способом вы всего за месяц (нет) научитесь делать сайты.

Прочитать ещё 2 ответа