Подскажите, пожалуйста, что минимально нужно для старта фриланса верстки, т.е. без чего там просто не обойтись :
Если необходимо все, то хотя бы укажите, что самое нужное, а что менее нужное.
Я думаю самое главное в верстке это умение превращать изображение в структурированный код, при этом обращая внимание на все мельчайшие тонкости изображенные на макете, будь то размеры и гарнитуры шрифта, цвета, отступы. Учитывать тот факт что реальный контент может отличаться от заданного на макете (например текст более длинный) и это не должно сломать верстку. Также как правило это все должно выглядеть хорошо в различных браузерах, и разных размерах экрана. По технической части - ты должен обладать навыками необходимыми для реализации конкретной задачи на макете (например анимации, ховеры, и т.д.). Как именно ты это будешь реализовывать - без разницы, будешь ли ты использовать флекс-бокс или более древние способы позиционирования элементов - вопрос твоего же удобства и скорости разработки. Главное чтобы это все работало. Бутстрап и понимание грида также будет полезно для фрилансовых задач.
Три кита: Знания, Кроссплатформенность, Кроссбраузерность.
Внимание к деталям, как в верстке газетного макета (книги) так и сайта. Одно и то же будет выглядеть по разному в Safari под Mac и Internet Explorer Windows 10. Разные браузеры, разные системы, разный вид, из-за особенностей системы, шрифты, дефолтные отступы, версия браузера, используемый Zoom страницы, и даже плагины типа AdBlock. В теории профессионал все это должен предусмотреть и везде проверить, включай орфографические ошибки, если найдет такие в тексте, даже а-ля длинное и короткое тире, переносимые-непереносимые отступы. А мобильные браузеры это тоже головная боль, нативные браузеры в Samsung/Xioami каждый со своим нюансом.
Динамические сайты с плавающей шириной и туча разных разрешений экранов.
А как собрать спрайты изображение в PNG? SVG? GIF лоадер меньше будет занимать. Аниманию как лучше на CSS реализовать и видеть как она лагает на моб. девайсах, или для моб, gif-ку бросить?
Все это важно, :focus-:hover это никому не надо, главное рабочий результат в конце и не важно на float: left/table/td/tr или flex это реализовано.
Актуально ли Фреймы?
Фреймы не понадобятся в 98% случаев. Псевдоклассы, псевдоэлементы нужны, но достаточно знать какие они бывают и какие задачи они решают. Чтобы когда столкнулся с проблемой, мог почитать про них.
Используй по возможности последний стандарт (флекс, гриды и т.д.), с фоллбек-подходом, если нужна поддержка старых браузеров. По большому счету все упирается в то, какие браузеры нужно захватывать. Я против старперских методов, если есть новый крутой стандарт. Никто не хочет собирать москвич (хоть он и ездит), а тем более потом копаться в нем потом, если можно собрать мерседес. Но не стоит слепо превращать в аксиому какой-то подход. Всегда нужно смотреть по задаче. Если есть “узкие” места, то их обрабатывать.
По поводу твоего списка. Ты все перемешал. Что тебе требуется для верстки – это просто верстка, последний стандарт стилей CSS.
SASS – это препроцессор, который позволяет при написании CSS добавить штуки вроде циклов, переменных (и манипуляции ими), каскадную вложенность, кучу встроенные функций для манипуляции цветами, числами… ну и все такое прочее. Короче очень полезная вещь, которая позволяет тебе более чище и умнее готовить стили. По сути ты получаешь возможность в чисто декларативном CSS писать элементы императивного кода. Если ты используешь подобный препроцессор, получаешь +30% (цифра выдумана :>) к скорости верстки.Bootstrap – это уже фреймворк. Это дефакто стандарт для построения колонок, базовых стилей и т.п. Если ты знаешь базовую верстку, бутстрап будет для тебя понятен и в некоторых случаях удобен.Та я смотрю, что есть в Верстка или в Курсы, а что актуально не знаю. Актуально ли Разделы веб-страницы?
ты хочешь фрилансить версткой? я правильно понял?
там же одни лендинг пейджы :)
Да.
стандарт W3C только для твоей совести на фрилансе, ну или если заказчик с пулей в голове…
говнокодинг на фрилансе льеться во всю…
одна из причин сроки и безответственность. главное что бы работало. вторая сборщики, собранный фаил обычно прикручивают к сайту, а настройки и макеты оставляют у себя. Когда правки вносишь - это ад.
Разделы веб-страницы это подход, который позволяет тебе семантически и визуально разбить страницу, чтобы было проще ее осмыслить и создать. Верстка просто описывает отдельные нюансы стандарта + смежные технологии. А учебные курсы судя по всему учат чему-то. Возьми и пройди какой-то цельный курс по верстке, вместо попыток осмыслить ее с огрызков разных статей. Также не стоит пока трогать бутстрап.
Тебе просто нужно сверстать несколько простых страниц. Тогда ты поймешь, что в основном требуется не так много. Позже ты точно будешь уверен как отверстать что-то, а попутно будешь расширять свой арсенал доступных инструментов (подходов) изучая стандарт, читая такие вот статейки и т.п.
Посмотри на ютубе, должны быть наверняка годные курсы и на русском.
Та пока что ствола нету, чтобы было на что прицел цеплять =)
puzzle
Уроки HTML CSS / Продвинутые уроки
Предыдущее, английский оригинал
W3schools
HTML5 и CSS3 на примерах
Погружение в HTML5
Как верстать на HTML5 и CSS3
Что из этого стоящее внимания?
Где почитать о grid?
Нужно уделить много времени, чтобы все пересмотреть и сказать что из этого стоит внимания. Ресурсов очень много, со временем все они меняются, как и все в мире. Хорошие ресурсы становятся плохими, плохие – хорошими. Смотри и изучай сам. Это тоже часть развития.
В целом, если у тебя английский на уровне понимания технической части, я бы советовал чаще пользоваться английскими ресурсами. Смотри гайды на ютубе, гугли доки, например html form mdn (MDN достаточно авторитетный ресурс). Хорошие недорогие (300грн. == недорого) курсы есть на Udemy по всем интересующим темам. Это то в чем я уверен, потому что сам этим пользуюсь. W3Schools имеет дурную репутацию, обычно его советуют обходить стороной.
К стати я не пойму, если доступ к курсу Udemy неограничен по времени, то какой им смысл продавать курс сейчас за 10$, если через 8 дней он будет стоить 200$ ?
Это просто маркетинговый ход такой. Они почти всегда около $10-15 стоят.
Я смотрю там есть и бесплатные курсы