@Frim0nt
Запутавшийся в себе

Как начать верстать адаптивно?

Здравствуйте,
знаю основы css и html , знаю флексбоксы щас верстаю на них.Вскоре думаю выучу грид , но план у меня такой .Научиться нормально верстать взять пару заказов небольших и посмотреть нравиться мне ли это (если нравиться то продолжу - выучу js, препроцессоры , а иначе как и задумывал начну учить php , и там дальше по лестнице пока не надоест.

Дак вот умею я сайты верстать , но не адаптивные .Подскажите как начать?Как вообще их делать , я то есть имею. смутные представления ( по типу делать контейнер в процентах , и все в относительных единицах).Может быть книги , видео или статьи или как то самому докумекать?

И еще подскажите нормально ли сверстал , меня интересует больше всего css&html код
Сам сайт на github
Репозиторий github
  • Вопрос задан
  • 485 просмотров
Решения вопроса 3
wapster92
@wapster92 Куратор тега CSS
<form action="" class="all-products-btn">
					<input type="submit" class="all-products" value="SEE ALL PRODUCTS">
				</form>
обычно это простоа ссылка, а не форма.
<div class="size-list">
										<p class="size-itm">37</p>
										<p class="size-itm">38</p>
										<p class="size-itm">39</p>
										<p class="size-itm">40</p>
										<p class="size-itm">41</p>
									</div>
обозвал списком, но используешь div
Еще бы в консоль посмотрел. В общем для первого раза сойдет. А по поводу вопроса, любое видео по адаптивной верстке посмотри, оно жевано пережевано, а еще лучше статью коих тоже очень много.
Ответ написан
Сверстано нормально, особенно если это первый раз, но есть несколько замечаний:

  • При наведении на цвет, в первом товаре, открывается и список размеров, хотя подразумевалось, что список будет выводится при наведении на «Size».
  • Логотип стоит сделать ссылкой, а не просто картинкой.
  • Почитайте / посмотрите про семантику. Сейчас её нету совсем в верстке, даже заголовков.
  • Футер не прижат к низу сайта. Посмотрите, как это делается.
  • Странный скрипт в верстке для live-reload локального.
  • Дергается главное меню при наведении на один из пунктов.
Ответ написан
Комментировать
SkiperX
@SkiperX Куратор тега CSS
Для адаптива нужно познакомится с сеткой и медиа запросами.
Дальше раскладываешь блоки по колонкам.
Ширина блоков подстраивается под ширину колонок.
С уменьшением ширины экрана постепенно идет перестроение сетки в одну колонку.
На ютубе много практических видео по верстке
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@moskinov
Что бы начать верстать адаптивно, нужно прекратить верстать фиксированно)
Ответ написан
Комментировать
AlexanderMarginal
@AlexanderMarginal
Frontend web developer
Можете записаться к нам на курсы в HTML academy
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы