Как практиковаться в HTML и CSS?

Question

[ElectroEvolution]

Закончил изучение HTML и СSS на W3Schools и CodeAcademy. Без проблем решаю все задания которые возникают в процессе учебного процесса,но как-то только пытаюсь сверстать сайт по psd шаблону-тут же впадаю в ступор и не знаю что делать...Начинаю писать код и теряюсь в div-ах,классах и id...Может я начал с попытки сверстать слишком сложный для меня сайт?Очень нужен ваш добрый совет!

Вот ссылка на шаблон который я пытался сверстать:
https://www.quackit.com/html/templates/download/bo...

Comments

[kulaeff]

По ссылке довольно простая верстка. Что именно у вас не получается?

[ElectroEvolution]

Начинаю теряться в div-ах,классах и тому подобном.Потом уже не понимаю что в чем лежит...

[ElectroEvolution]

Когда открываю исходный код,то тоже очень сложно разобраться что к чему.

[Ankhena]

ElectroEvolution:
1. Прочитайте про БЭМ. Есть и альтернативные методологии. Можете придумать свою собственную на основе всех остальных и ваших предпочтений.
Называйте классы понятными английскими словами.
2. Используйте правильное ПО с подстветкой, форматированием кода аккуратными ступеньками и переходом по клику на название класса в HTML к нужному месту в CSS.
3. Используйте инструменты разработчика в браузере.
4. Не используйте id для стилизации.
5. Потратьте больше времени на обдумывание структуры верстки. Где какие большие блоки, как они делятся на маленькие. Какие семантические тги подходят для каждого из блоков.

Answer 1

[Astrohas]

Я бы порекомендовал, Вам, изучить базовый интенсив от HtmlAcademy (не реклама). Если финансовые проблемы, то можете скоммунистить, ибо комунистическая версия уже есть в коммунистических трекерах.
Что мне понравилось в этих интенсивах, это то что там не говорят фигню типа "вот это Р и он нужен для абзаца", а вместо этого, ведущие делятся секретами и лайфхаками правильной разработки. Попутно во время изучение вы будете верстать сложные макеты.

Comments

[Froggyweb]

при этом никто не знает что p это для абзацев и он имеет определенные стили по умолчанию и пр. скачали бутстрап, прописали классы, а там как повезет. Еще и про препроцессоры расскажут и все за две недели.

[ElectroEvolution]

Froggyweb: Не понял о чем коммент...Типо Html Academy лажа?

[Astrohas]

Froggyweb: но признайтесь, их метод работает.

[Александр Першин]

Froggyweb: просто про абзацы и их стили по умолчанию рассказано в интерактивных курсах, бесплатных и платных (которые за 390 рублей). Смысл про это рассказывать на интенсивах?

Что касается сброса дефолтных стилей у элементов, то об этом как раз на интенсиве рассказывается, просто в вебинарах после середины курса. Видимо, вы до этого не досмотрели.

Answer 2

[Александр Першин]

Попробуйте пройти интерактивные курсы у нас, и самое главное, пройдите курс Кексби. Да, он платный, 390 рублей в месяц. Но в нём как раз с нуля по макету верстается страница от разметки, к сетке и к финальной стилизации. Как раз сегодня опубликовали финальные части.

https://htmlacademy.ru/program