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

Question

[Frim0nt]

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

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

И еще подскажите нормально ли сверстал , меня интересует больше всего css&html код
Сам сайт на github
Репозиторий github

Answer 1

[WapSter]

<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
Еще бы в консоль посмотрел. В общем для первого раза сойдет. А по поводу вопроса, любое видео по адаптивной верстке посмотри, оно жевано пережевано, а еще лучше статью коих тоже очень много.

Comments

[Frim0nt]

Ну вообщем это первый нормальный сайт который я сам сверстал , еще один был по туториалу .Спасибо большое такой маленький ответ ,а закрыл все вопросы.

Answer 2

[Даниил Маслов]

Сверстано нормально, особенно если это первый раз, но есть несколько замечаний:

• При наведении на цвет, в первом товаре, открывается и список размеров, хотя подразумевалось, что список будет выводится при наведении на «Size».
  
• Логотип стоит сделать ссылкой, а не просто картинкой.
  
• Почитайте / посмотрите про семантику. Сейчас её нету совсем в верстке, даже заголовков.
  
• Футер не прижат к низу сайта. Посмотрите, как это делается.
  
• Странный скрипт в верстке для live-reload локального.
  
• Дергается главное меню при наведении на один из пунктов.
  

Answer 3

[Алекс Глебов]

Для адаптива нужно познакомится с сеткой и медиа запросами.
Дальше раскладываешь блоки по колонкам.
Ширина блоков подстраивается под ширину колонок.
С уменьшением ширины экрана постепенно идет перестроение сетки в одну колонку.
На ютубе много практических видео по верстке

Comments

[Frim0nt]

Слушайте , а это не сетка bootstrap?

[Алекс Глебов]

Frim0nt, в любом фреймворке есть сетка, есть отдельно.
Такая структура самая надежная - сетка работает во всех браузерах.

[Frim0nt]

Алекс Глебов, я вот не могу понять ,в каком смысле сетка дайте пожалуйста какую ни будь статью

[Алекс Глебов]

Frim0nt, в общих чертах тут https://youtu.be/3mV-Yw6cm-E
тут подробно https://youtu.be/2JMMnNOhDoc

Answer 4

[moskinov]

Что бы начать верстать адаптивно, нужно прекратить верстать фиксированно)

Answer 5

[Александр Маргинал]

Можете записаться к нам на курсы в HTML academy