31

HTML. Неделя вторая.

Правда, немного запоздала, потому что ленилась. В первую неделю я маленько разобралась с HTML и CSS, а потом решила посмотреть, что такое Bootstrap.


Сначала я придумала главную картинку. Хотела под ней сделать меню из двух ссылок, но это оказалось не так-то просто.

Билась с <nav> всю ночь, а утром до меня дошло - можно сделать меню в виде текста с ссылками.

Правда, наверное, это не самый изящный вариант, но я честно пыталась.


Затем наступил черёд картинки. Она никак не хотела помещаться в <div> при уменьшении экрана.

Я долго шаманила с media и блоками, потратила кучу времени. Но зато поняла, что в class можно вводить 2 названия. И это решило всю проблему, картинка легко встала в центр.

Блок с соцсетями я взяла из предыдущего макета, в интернете нашла отрывок кода с анимацией наведения на ссылку (появляется плавное подчёркивание).


А потом я сменила дизайн картинок, текста, и получился вот такой макет. Времени на изучение работы Bootstrap у меня ушло меньше, но 90% заняло исправление ошибок. Я часами сидела над одним единственным блоком, не понимала, как сделать всё правильно. Сворачивалась клубочком, грустила, а потом снова шла думать. Вы точно скажете: "Ой, Аня, что тут думать-то, легкотня". Но для меня это было настоящим испытанием, намного сложнее первой недели.

Правда, я ещё почти не приступала к адаптации. Если с маленькими экранами у меня всё хорошо, кроме блока с листочком и цветочком (он уходит далеко вправо при уменьшении экрана),

То на больших экранах у меня всё плохо.

И всё равно я чувствую себя молодцом ^^ Вот только дело ещё не закончено. Адаптивностью я займусь уже на третьей неделе :3

Вы смотрите срез комментариев. Показать все
DELETED
Автор поста оценил этот комментарий

Дизайн с русской душой. Не думал, что такой увижу. Какие книги читаешь по дизайну, CSS, html? Подпишусь на тебя.

раскрыть ветку (4)
0
Автор поста оценил этот комментарий
Хах, никакие х) просто векторы с банка картинок скачиваю, какие нравятся х) А по CSS с HTML, ну... Документацию разбираю. Смотрю примеры, разбираюсь, почему именно так написано.
раскрыть ветку (3)
0
DELETED
Автор поста оценил этот комментарий

http://htmlbook.ru - можете начать отсюда

0
Автор поста оценил этот комментарий
Я больше скажу - в класс можно записывать больше двух значений, по сути сколько влезет. И мало кто задумывается, но вся суть css находится в этой аббревиатуре. Я классами латаю косяки в верстке, достаточно объявить наследника и дописать в конец. Ах, да, чуть не забыл - бутстрап не любит сильных отклонений от его собственной структуры, в один прекрасный момент дизайн может превратиться в тыкву, если навертеть слишком сложную конструкцию.
0
Автор поста оценил этот комментарий
Прикольно получилось с графикой кстати)
про маленькие экраны - смотри в сторону media max-width, min-width,
для бс3-4 попробуй комбинировать классы. Например, если взять блок с фоточкой и блок "обо мне" и снабдить их набором классов "col-xs-12 col-12 col-md-6" - может получиться кое-что интересное.
а для больших экранов можно глянуть в сторону font-size в медиа-запросе. Или просто использовать размер шрифта, завязанный на ширину (vw). Моветон, конечно, но для общего развития попробовать можно)
Вы смотрите срез комментариев. Чтобы написать комментарий, перейдите к общему списку

Темы

Политика

Теги

Популярные авторы

Сообщества

18+

Теги

Популярные авторы

Сообщества

Игры

Теги

Популярные авторы

Сообщества

Юмор

Теги

Популярные авторы

Сообщества

Отношения

Теги

Популярные авторы

Сообщества

Здоровье

Теги

Популярные авторы

Сообщества

Путешествия

Теги

Популярные авторы

Сообщества

Спорт

Теги

Популярные авторы

Сообщества

Хобби

Теги

Популярные авторы

Сообщества

Сервис

Теги

Популярные авторы

Сообщества

Природа

Теги

Популярные авторы

Сообщества

Бизнес

Теги

Популярные авторы

Сообщества

Транспорт

Теги

Популярные авторы

Сообщества

Общение

Теги

Популярные авторы

Сообщества

Юриспруденция

Теги

Популярные авторы

Сообщества

Наука

Теги

Популярные авторы

Сообщества

IT

Теги

Популярные авторы

Сообщества

Животные

Теги

Популярные авторы

Сообщества

Кино и сериалы

Теги

Популярные авторы

Сообщества

Экономика

Теги

Популярные авторы

Сообщества

Кулинария

Теги

Популярные авторы

Сообщества

История

Теги

Популярные авторы

Сообщества