Как быстро и правильно верстать html-страницу?

Question

[Евгения Шутова]

Здравствуйте. Я начинающий html-верстальщик, знаю html и css. Хотела брать заказы и при этом практиковаться, но везде дополнительно нужен JavaScript. Подскажите, пожалуйста, хорошие курсы или книги для изучения, чтобы было доступно и подробно написано. Читала про JavaScript, но там везде подробное его изучение. Есть ли специально урезанные курсы или книги, именно для вёрстки? Когда учила, верстала в Notepad++. Подскажите, пожалуйста, какие-нибудь хорошие программы для быстрой вёрстки?

Comments

[coderxx]

learn.javascript.ru

[Ankhena]

1. google -> "html редактор", выбирайте что по душе
2. Плагин emmet - ускоряет верстку
3. Второй монитор - ускоряет верстку
4. JS либо идите на нормальные курсы либо решайте позадачно с помощью гугла. Благо стандартные задачи уже все решены и не по одному разу. learn.javascript вам в помощь

Answer 1

[Андрей Охотников]

Вот этого раздела для начала будет достаточно. Для верстки практически не нужен js, все популярные решения - слайдеры, выпадающие меню и т.д. уже реализованы, можно брать готовые решения. А потом когда дойдешь до каких то сложных анимаций на канвасе например - будешь по ходу дела гуглить)
Редактор vs code я использую

Comments

[Евгения Шутова]

Спасибо за раздел, мне понравился.

все популярные решения - слайдеры, выпадающие меню и т.д. уже реализованы, можно брать готовые решения

А где брать эти готовые решения?

[Андрей Охотников]

Евгения Шутова, гуглить надо, смотря что нужно, уже сотни библиотек написаны. Из популярных решений - бутстрап, slick, можно просто зайти сюда и вбить в поиск например slider

Answer 2

[shmatuan]

Для быстрой вёрстки вместо notepad - vscode ( можно написать .name , нажать enter и создастся <div class="name"> </div> из коробки + куча других интересностей )
Для ускорения изучения и вёрстки JS - jQuery (но лучше знать основы js)

https://code.visualstudio.com/docs/editor/emmet

Comments

[Ankhena]

можно написать .name , нажать enter и создастся

Это не прелести vs code, это плагин emmet. И для Notepad++ он тоже есть. И много других, типа подстановки свойств из вашего видео.

(Если что, я не голосую за Notepad++)

[shmatuan]

Ankhena, да, просто в vs code это "из коробки")

Answer 3

[Дмитрий Чайников]

Евгения, для изучения JavaScript рекомендую использовать этот сайт: https://learn.javascript.ru
Написано доступным языком, читается легко.
В качестве редактора кода можно использовать "Sublime Text 3" по ссылке: sublimetextru.ru

Answer 4

[konnova999]

Хорошие курсы по верстке есть на https://htmlacademy.ru/, там бесплатный период и недорогая подписка, можешь с них начать. Для старта самое то. Еще неплохой курс на https://shultais.education/courses/html-and-css, но в нем нет про flex, но зато есть понятным языком про JavaScript. Он с сайта не доступен, но после регистрации можно пройти.