Первая верстка. Как вам?

Question

[Roman Makhov]

Версткой начал заниматься пару месяцев назад. В сети нашел ресурс с бесплатными PSD макетами и сверстал по ним 2 сайта (мобильных версий в макетах не было, так что придумывал все на ходу):

• https://makhovroman.github.io/Leo/
  
• https://makhovroman.github.io/Dart-Service-Manager/
  

На данный момент мною пройден практикум на htmlbook и прочитаны 2 книги:

1. Джон Дакетт - HTML и CSS. Разработка и дизайн веб-сайтов;
   
2. Б. Фрэйн - HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд.;
   

Посоветуйте, куда двигаться и над чем работать.

Comments

[Ярослав Александров]

брать для учёбы коммерческие макеты в фигме или в псд из заявок на фрилансе, эти слишком простые

Answer 1

[Леонид Роженцев]

В декстопе не смотрел, в мобильной адаптации есть нюансы:
В первом - кнопка выходит за пределы шапки, а также узкие поля ввода, цифры и буквы не помещаются.


Во втором: также очень мелкая форма и footer

Comments

[Roman Makhov]

Принял, буду исправлять. Хотя в процессе верстки регулярно проверял работоспособность на различных девайсах через Toogle device toolbar, но, видимо, что-то пошло не так =]

Answer 2

[Валерий Кулаков]

По поводу продвижения вперед посоветовал бы изучать программирование. Изучите JS (я бы посоветовал этот учебник). Присмотритесь к React, раз уж Вам нравится front-end. Когда поймете суть реакта, хорошенько пописав на нем, изучайте в дополнение к нему redux, redux-thunk, и другие необходимые вещи (остальные проще:) ) - react-router, formic, immutable, etc. Из оформления к нему - styled-components, CSS-modules.

Если все же интересует (или пока интересует) именно верстка - bootstrap (обычно нужно иметь понятие, там не сложно), SASS/SCSS (это препроцессоры, "помогающие" писать код CSS). Можно изучить шаблонизатор, pug, например, но это уже все-таки немножко программирование:)

Если хочется побольше шаблонов, регистрируйтесь на fl.ru/ - там часто скидывают шаблоны прямо в тексте задания.

Comments

[Roman Makhov]

Спасибо за совет, как раз планировал сейчас взяться за изучение JS =]

[Валерий Кулаков]

Пожалуйста, рад помочь!) Изучайте, получите много удовольствия)

Answer 3

[Владимир]

Ограничение по максимальной ширине следует накладывать на контент, но не на всю секцию. То есть для самой секции с фоновым изображением width:100%, а для контента внутри неё, обычно это .container, max-width:1600px и margin: 0 auto.
И как по мне, лучше было бы дать первой секции height:100vh;


И здесь при выборе изображения они так же остаются как бы затемненными. Попробуй поиграться со свойством opacity при выборе.


И как писали уже выше, лучше брать макеты с реальных заказов на фрилансе. У меня на диске лежит точно такой же сверстанный макет :D
Они все уже всеми сверстаны-переверстаны, нужно браться за что-то оригинальное.

Answer 4

[Franco1989]

Добрый время суток! Подскажите пожалуйста, Ваш план изучения. Буду очень Вам признателен в совете! А то, я даже не знаю, с чего начинать изучать.

Comments

[Леонид Роженцев]

Сначала html + css, фреймворк bootstrap4. Попробовать верстать макеты различной сложности. Затем, когда с вёрсткой будет все в порядке, изучить язык javascript и какой-нибудь фреймворк к нему (например vue.js). Это в общих чертах.

[Anonimmus]

1. База! Html + css = соберите минимум 5 статичных сайтов, затем займитесь их адаптацией под телефон, планшет. Здесь лучшим выбором будет бутстрап 3, 4.
У вас появится жуткое ощущение что можно делать проще! А значит вы почти созрели для следующих этапов.
2. Это лишь начало) изучите препроцессоры - рекомендую sass, затем к анимации средствами css. Сайт будет живым) и кстати на этом же этапе поставьте себя на роль контент менеджера, не щадите себя и вставляйте любой текст или картинку на сайт - ваша задача на этом этапе писать верстку так чтобы даже с избржениями под 3к не ломали ваш сайт. И чтобы не придумывать новые классы или названия блоков изучите "бэм" (единожды написав блок, вы сможете его использовать везде где будет намек на схожесть)
3. Javascript, а это уже магия. Задает сайту логику и следит за действиями. С этим языком можно писать любые взаимодействия с пользователем. Более того эффекты как плавная прокрутка, паралакс и прочие прелести пишутся как раз на нем.
4. Хотябы основы php mysql. Логика сайта, 85 процентов сайтов написано на cms а они как раз на php. После вы поймете что языки по большей степени одинаковые, отличия лишь в написании (циклы, переменные итд)

После уже определяйтесь бэкэнд или фронтэнд.

Плавно переходите к системам управления, клиент ведь незнает даже базово web разработку! cms: wordpress opencart joomla 1c итд. Сборники томов читать не нужно! Когда я начинал разметка была таблицами и мы вешались смотря на результат работы в браузере IE6 7. Сейчас проще, все уроки есть в ютюбе. Рекомендую канал фрилансера по жизни - это мотивация, новые технологии и ликбез

[Roman Makhov]

Anonimmus, Спасибо, примерно так я и представлял последовательность изучения Front-end =) у "фриласера по жизни" понял основы резиновой верстки =]

[Franco1989]

Добрый время суток! Спасибо большое всем тем, кто отозвался на мою просьбу по изучению front end!!!

[Anonimmus]

sashabeep, Не обкатанную версию для новичка предлагать, неее. Да и поддержка 3 все равно на уровне поддерживается, из этой версии нравится разбиение по модулям.

Помнится и 4ая версия не сразу в обиход пошла и до сих ведутся споры на тему:
- col-xs-12 лучше чем col-12.
- col-xs-none и d-sm-none а затем d-md-block, итд

Дизайнеров не остановить, вот и приходится изощрятся:
увидел сетку - бутстрап, увидел сетку но по 1,5 и 2,7 - флексы, блоки с перекрытием ячеек - гриды.