Open Nolra opened 1 year ago
Сверстал рецепт: https://github.com/pashbespaloff/one Поправлю сегодня-завтра ещё кое-что.
@pashbespaloff все действительно хорошо, нет никаких замечаний, одно только маленькое здесь. Лучше использовать относительные пути в ссылках на файлы и ресурсы.
Сверстал макет: https://github.com/pashbespaloff/homework
Адаптивный дизайн не сделал, всё разъезжается. Хотел бы посмотреть на примере своего кода, как его лучше сделать, если возможно.
Загрузил проект: https://github.com/andrisfree/html-css
макет с фигмы на ревью))) https://github.com/nedostatoksna/course-front-end/tree/figma-layout
На ревью) https://github.com/JanMayen/Work_1
На ревью (постараюсь завтра поправить кнопку 'Next') https://github.com/diydude/happy-front-end
на ревью ещё потыкаю завтра футер а то стоит как неродной простите за картинки без папки https://github.com/Vykrutasy/course-project.git
картинки теперь в папке)
Все работы выше проверены
апдейт! теперь в ветви. шрифты из папки. в целом доведено до некоторого ума. но пока без медиа https://github.com/Vykrutasy/course-project/tree/project1
1) Шрифт не подключен (подключать нужно через css) 2) В css требуется одинаковый стиль, на данный момент его нет, там хаос по стилю кода. Это видно даже в репозитории если открыть файл. Эта тема подробно рассматривалась на прошлом занятии, ссылка на видео есть в чате. 3) Необходимы конкретные максимальные размеры контейнеров. Эта тема подробно рассматривалась на прошлом занятии, ссылка на видео есть в чате. 4) Есть баги в html (например страница находится внутри странного тега font-face), это видно если открыть структуру страницы в dev tools. 5) В css нужно реализовать медиа запросы
наделал говна - налетай https://github.com/ReginaStorm/front-end
наделал говна - налетай https://github.com/ReginaStorm/front-end
1) main стоит сделать таким же контейнером как header и footer, с размерами и таким же margin, а внутри него поубирать везде margin aд, вроде .hero { margin: 40px 427px 75px 428px; ... }
2) убрать из css правило gap
3) по поводу input search - лучше сделать input большого размера (сейчас он маленький) пусть он будет вместо form-container
элемента по стилям. Но форм-контейнер удалять не нужно, он нужен чтобы дать ему position:relative и разместить таким образом правильно селектор и иконку лупы.
4) пофиксить свитчер, чтобы он открывался внизу а не на месте селекта.
https://github.com/NastyaKamalova/firstCSS/tree/firstHomework
1) code-style в CSS (нужно везде в табуляции заменить пробелы на табуляцию)
2) добавить иконки через background в селектор стрелочку, лупу в инпут, кнопки download инонку скачивания в карточках и в кнопку next page стрелку
3) пофиксить стили в пагинации (кнопки справа)
4) указать точные размеры (карточек - не проценты, а пиксели как в макете - при включении медиа запроса адаптивности потом сделать их 100% относительно контейнера), размер текста дескрипш в карточках
5) добавить медиа-запросы (адаптивность)
https://github.com/StanislavGrig/stanislav
многое не успел, до ума сайт не доведен
да простит меня Владимир Есионов за мой проект
Сверстал макет: https://github.com/pashbespaloff/homework
Адаптивный дизайн не сделал, всё разъезжается. Хотел бы посмотреть на примере своего кода, как его лучше сделать, если возможно.
@Nolra Сделал исправленную версию, дай пожалуйста комментарий здесь или в Телеге как сможешь посмотреть: https://github.com/pashbespaloff/homework/commit/9764ef19477559d33447833fa9dbdb103143382d
Адаптивный дизайн сделан и работает. По поводу изображений в CSS задал вопрос комментарием.
https://github.com/ncerror/kvak.project Огромная недоделка, хз как сделать бэкграунд у карточек с существами Боже, спаси и сохрани.....здоровья погибшим..........
Фух!
1) Code-style в css одно место с пробелами нужно поменять на tab (строки 161-163)
2) css 23 строка забыл указать px (не работает правило на размер header, та же проблема в footer)
3) Элементы поиска стоит сделать так - form это position relative контейнер c шириной и margin auto. Input 100% display block с background и padding left, select - position absolute, чтобы поставить над input.
4) Блок main нужно сделать контейнером, как header c размером и margin auto
5) card стоит убрать фиксированную высоту блока и вообще стараться не использовать высоту, кроме экстренных случаев (в макете таких нет).
6) Нужно доделать css для навигации справа Page < 1 > of 120
7) Добавить media запросы для адаптивности
Сверстал макет: https://github.com/pashbespaloff/homework Адаптивный дизайн не сделал, всё разъезжается. Хотел бы посмотреть на примере своего кода, как его лучше сделать, если возможно.
@Nolra Сделал исправленную версию, дай пожалуйста комментарий здесь или в Телеге как сможешь посмотреть: pashbespaloff/homework@9764ef1
Адаптивный дизайн сделан и работает. По поводу изображений в CSS задал вопрос комментарием.
оставил комментарий к коммиту
https://github.com/StanislavGrig/stanislav
многое не успел, до ума сайт не доведен
да простит меня Владимир Есионов за мой проект
0) На первой строке правилу нужно указать селектор *
(чтобы это правило применялось для всех элементов)
1) CSS Code-style. Нужно сделать весь CSS файл правильно в плане стиля. Только tab для вложенности. В последнем уроке (четвертом) было много об этом.
2) Шрифты не подключены. В папке fonts лежит zip архив с шрифтами. Его нужно распаковать и потом проверить что шрифт подключился.
3) Контейнеры - header
не работает из-за синтаксической ошибке в правиле margin. Пробел перед px не нужен. main
стоит сделать таким же контейнером как header
, c размером и margin auto.
4) search элемент лучше сделать 100% размером и высотой как его родитель. По сути bg родителя лучше отдать input
, родитель нужен тут только для позиционирования select
.
5) Таким элементам как card-text
не нужно указывать высоту (конкретно этому лучше дать margin auto чтобы он встал посередине)
6) next
стоит позиционировать через position absolute, для этого родителю его нужно задать position relative. И вместо margin-right 570, нужно указать правило left: calc(50% - 121px) - это разместит его по центру родительского тега.
7) добавить media запросы для адаптивности
https://github.com/ncerror/kvak.project Огромная недоделка, хз как сделать бэкграунд у карточек с существами Боже, спаси и сохрани.....здоровья погибшим..........
0) На первой строке правилу нужно указать селектор * (чтобы это правило применялось для всех элементов)
1) Папки fonts даже нет в проекте, шрифты не будут работать от нахождения zip архива просто в основной папке. Нужно распаковать шрифты и создать папку для них, чтобы путь указанный в CSS на 10 строке работал и шрифт подгружался на страницу.
все остальные комментарии зеркальны для Стасяна, не хочу даже знать кто у кого списал.
@snoopdoch https://github.com/snoopdoch/snoop
1) HTML c 34 по 63 убрать пробелы из табуляции
2) папка называется imege, а не image. Лучше назвать правильно. Аналогичная проблема в HTML c классом imege-wrapper
он не работает, потому что в css правило называется правильно - image-wrapper
3) CSS на 10 строке тоже орфографическая ошибка src
поэтому шрифт не подгружается на страницу
4) search элемент лучше сделать 100% размером и высотой как его родитель. По сути bg родителя лучше отдать input, родитель нужен тут только для позиционирования select.
5) Таким элементам как card-text не нужно указывать высоту (конкретно этому лучше дать margin auto чтобы он встал посередине)
6) next стоит позиционировать через position absolute, для этого родителю его нужно задать position relative. И вместо margin-right 570, нужно указать правило left: calc(50% - 121px) - это разместит его по центру родительского тега.
7) card не нужен margin-left, нужно просто настроить flex контейнер родителя правильно.
8) добавить media запросы для адаптивности
Внеманее праезошла адапапцея https://github.com/Vykrutasy/course-project/tree/adaptation
1. По ссылке доступен код занятия - https://github.com/Nolra/front-course/tree/html-css-2 Скачивайте, и локально пробуйте разбирать этот код.
2. На уроке будут разбились следующие темы: Семантика HTML - https://htmlacademy.ru/blog/html/semantics Медиа запросы - https://developer.mozilla.org/ru/docs/Web/CSS/Media_Queries/Using_media_queries Формы - https://developer.mozilla.org/ru/docs/Web/HTML/Element/form Формы и Инпуты - https://developer.mozilla.org/ru/docs/Web/HTML/Element/input
(необязательно!) Читайте материал, разбирайте код по ссылке и пробуйте написать тоже самое, с немного другими вариациями (больше элементов, другие стили) и присылайте в комментариях к этому уроку ниже ссылку на свой код, выложенный в своем публичном репозитории. Для этого создайте в своем репозитории ветку, назовите ее "html-css" и закомитьте туда свои изменения (если это вызывает сложности и вы не смогли на ютуб найти простую инструкцию как делать ветки и комитить в гитхаб, обратитесь ко мне я выложу простую инструкцию в чат)
3. Кроме того мы посмотрели и проанализировали макет, пока без разработки. https://www.figma.com/file/MGNRRsnOAhw9PGERkWRuOn/My-Vectors-Site---Landing-Page-(Community)?node-id=0%3A1&t=SW1xsA7bOARMMP8B-0
Домашнего задания нет, подтягивайте хвосты. Следующее занятие будет началом выпускного проекта по верстке, того который выше указан в ссылке на figma.