search

Nolra / front_course_2023

charity course
7 stars 0 forks source link

HTML CSS #2 #2

Open Nolra opened 1 year ago

Nolra commented 1 year ago

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.

voidaugust commented 1 year ago

Сверстал рецепт: https://github.com/pashbespaloff/one Поправлю сегодня-завтра ещё кое-что.

Nolra commented 1 year ago

@pashbespaloff все действительно хорошо, нет никаких замечаний, одно только маленькое здесь. Лучше использовать относительные пути в ссылках на файлы и ресурсы.

Screenshot_3
voidaugust commented 1 year ago

Сверстал макет: https://github.com/pashbespaloff/homework

Адаптивный дизайн не сделал, всё разъезжается. Хотел бы посмотреть на примере своего кода, как его лучше сделать, если возможно.

andrisfree commented 1 year ago

Загрузил проект: https://github.com/andrisfree/html-css

nedostatoksna commented 1 year ago

макет с фигмы на ревью))) https://github.com/nedostatoksna/course-front-end/tree/figma-layout

JanMayen commented 1 year ago

На ревью) https://github.com/JanMayen/Work_1

diydude commented 1 year ago

На ревью (постараюсь завтра поправить кнопку 'Next') https://github.com/diydude/happy-front-end

Vykrutasy commented 1 year ago

на ревью ещё потыкаю завтра футер а то стоит как неродной простите за картинки без папки https://github.com/Vykrutasy/course-project.git

Vykrutasy commented 1 year ago

картинки теперь в папке)

Nolra commented 1 year ago

Все работы выше проверены

Vykrutasy commented 1 year ago

апдейт! теперь в ветви. шрифты из папки. в целом доведено до некоторого ума. но пока без медиа https://github.com/Vykrutasy/course-project/tree/project1

Barkhosha commented 1 year ago

https://github.com/Barkhosha/project1.1/tree/final.pro

Nolra commented 1 year ago

https://github.com/Barkhosha/project1.1/tree/final.pro

1) Шрифт не подключен (подключать нужно через css) 2) В css требуется одинаковый стиль, на данный момент его нет, там хаос по стилю кода. Это видно даже в репозитории если открыть файл. Эта тема подробно рассматривалась на прошлом занятии, ссылка на видео есть в чате. 3) Необходимы конкретные максимальные размеры контейнеров. Эта тема подробно рассматривалась на прошлом занятии, ссылка на видео есть в чате. 4) Есть баги в html (например страница находится внутри странного тега font-face), это видно если открыть структуру страницы в dev tools. 5) В css нужно реализовать медиа запросы

ReginaStorm commented 1 year ago

наделал говна - налетай https://github.com/ReginaStorm/front-end

NastyaKamalova commented 1 year ago

https://github.com/NastyaKamalova/firstCSS/tree/firstHomework

Nolra commented 1 year ago

наделал говна - налетай 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) пофиксить свитчер, чтобы он открывался внизу а не на месте селекта.

Nolra commented 1 year ago

https://github.com/NastyaKamalova/firstCSS/tree/firstHomework

1) code-style в CSS (нужно везде в табуляции заменить пробелы на табуляцию)

2) добавить иконки через background в селектор стрелочку, лупу в инпут, кнопки download инонку скачивания в карточках и в кнопку next page стрелку

3) пофиксить стили в пагинации (кнопки справа)

4) указать точные размеры (карточек - не проценты, а пиксели как в макете - при включении медиа запроса адаптивности потом сделать их 100% относительно контейнера), размер текста дескрипш в карточках

5) добавить медиа-запросы (адаптивность)

brigadapoum commented 1 year ago

Фух!

https://github.com/brigadapoum/new

StanislavGrig commented 1 year ago

https://github.com/StanislavGrig/stanislav

многое не успел, до ума сайт не доведен

да простит меня Владимир Есионов за мой проект

voidaugust commented 1 year ago

Сверстал макет: https://github.com/pashbespaloff/homework

Адаптивный дизайн не сделал, всё разъезжается. Хотел бы посмотреть на примере своего кода, как его лучше сделать, если возможно.

@Nolra Сделал исправленную версию, дай пожалуйста комментарий здесь или в Телеге как сможешь посмотреть: https://github.com/pashbespaloff/homework/commit/9764ef19477559d33447833fa9dbdb103143382d

Адаптивный дизайн сделан и работает. По поводу изображений в CSS задал вопрос комментарием.

ncerror commented 1 year ago

https://github.com/ncerror/kvak.project Огромная недоделка, хз как сделать бэкграунд у карточек с существами Боже, спаси и сохрани.....здоровья погибшим..........

Nolra commented 1 year ago

Фух!

https://github.com/brigadapoum/new

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 запросы для адаптивности

Nolra commented 1 year ago

Сверстал макет: https://github.com/pashbespaloff/homework Адаптивный дизайн не сделал, всё разъезжается. Хотел бы посмотреть на примере своего кода, как его лучше сделать, если возможно.

@Nolra Сделал исправленную версию, дай пожалуйста комментарий здесь или в Телеге как сможешь посмотреть: pashbespaloff/homework@9764ef1

Адаптивный дизайн сделан и работает. По поводу изображений в CSS задал вопрос комментарием.

оставил комментарий к коммиту

Nolra commented 1 year ago

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 запросы для адаптивности

Nolra commented 1 year ago

https://github.com/ncerror/kvak.project Огромная недоделка, хз как сделать бэкграунд у карточек с существами Боже, спаси и сохрани.....здоровья погибшим..........

0) На первой строке правилу нужно указать селектор * (чтобы это правило применялось для всех элементов)

1) Папки fonts даже нет в проекте, шрифты не будут работать от нахождения zip архива просто в основной папке. Нужно распаковать шрифты и создать папку для них, чтобы путь указанный в CSS на 10 строке работал и шрифт подгружался на страницу.

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

Nolra commented 1 year ago

@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 запросы для адаптивности

Vykrutasy commented 1 year ago

Внеманее праезошла адапапцея https://github.com/Vykrutasy/course-project/tree/adaptation