Jump to content

Верстка, Мой первый code review


Ilya Kashitsyn
 Share

Recommended Posts

Здравствуйте! Это мой первый код ревью. Знаю он далек от идеала, но Ваша помощь очень будет нужна.

Сайт https://ilyakash.github.io/Blitz/index.html

Шаблон https://github.com/ilyakash/ilyakash.github.io/tree/master/Blitz/Template%20Blitz

1. Проблема в html верстке. В блок <header> проваливается нижний блок, поэтому постарил <br>.

ezgif.com-resize.gif.7da95201eb6cc16c28f412fa61d23b9b.gif

2. Как сделать на странице Project иконку search при наведении по центру?  И правильно ли я вообще это сделал, может есть другие варианты? Может можно было как то отобразить иконку search не через html, а через оформление в css?

search.jpg.545e894947f04f1941f92ef33b1673d5.jpg  637.png.b3eab13295cb90178d710afca0bc2045.png

3. Еще практически на всех страницах footer проваливается в верхний блог. сделал я это через кОстыли. Знаю, что так делать не зя. Похоже я в Html разметке накосячил?

footer-crutches.png.27f846dccbab03a4c0c12239a03a38e6.png

4. Еще у меня образовалась разница/попрыгушка в заголовке на странице About.

about2.gif.e979f2f80ff8a0eb18d2949fa8ca0661.gif

———————————————

Выслушаю любую полезную критику по улучшению написания кода. Спасибо.

 

Link to comment
Share on other sites

Сразу видно в чем проблема, это я про header. Вы используете float'ы, но при этом родителям не прописываете clearfix.
Зайдите с браузера в режим разработчика и посмотрите, что у вашего header высота 0.

<br> выкидывайте из кода вообще, я так понимаю вы начинающий верстальщик, и пока что легче отказаться насовсем от br, потом как разберетесь с ним, можете юзать. Он на самом деле довольно редко, когда нужен.

Как легко центрировать элемент по горизонтали и вертикали в 2018? 
Смотрите, юзайте flexbox.
 

родитель {
  display: flex;
  align-items: center;
  justify-content: center;
}

По поводу иконки, саму иконку search можно смело брать с fontawesome. Можно и запариться и нарисовать самому, но зачем?
Окружающий его квадрат с закругленными бордерами пишем сами на css. 
Далее, футер. Никогда не называйте классы так, как называете их вы в этой работе. Почитайте на тему наименование элементов страницы, это несложно. Footer с названием margin-top это жесть:D
Не знаю в чем у вас тут проблема, я поставил пару clearfix на header .container и navbar, послего чего перешел к подвалу страницы, убрал оттуда этот ужасный margin и все работало как надо.

Edited by WebNewbe
Link to comment
Share on other sites

Если это первая верстка, то хорошо. У меня было хуже.

Замечания

1) Задавайте размеры, а от этого проблемы:

https://prnt.sc/iy5meu

 https://prnt.sc/iy5nht

2) Че-то ругается  https://validator.w3.org/nu/?doc=https%3A%2F%2Filyakash.github.io%2FBlitz%2Findex.html

3) слайдер в хедер, ну не знаю, я бы не стал.

 

Рекомендации, кратко:

Прочитайте про БЭМ.

Учитесь делать адаптив.

Переходите на препроцессор html и css (pug и scss, например)

Используйте сборщики.

Edited by Schamil74
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Vetal6666
      Как в верстке создать этот объект?🤔 (Углы по 60 градусов - то есть треугольник равносторонний)
    • By _dev_
      Всем привет, коллеги. Я - начинающий в этом деле, поэтому сильно не разносите) Если кому не сложно - оцените пожалуйста мою работу, укажите ошибки. Жду Вашу критику. Вот свёрстанный макет - https://cleaning-company-001.000webhostapp.com/
    • By dm-stanislav
      Здравствуйте, помогите, пожалуйста сверстать блок (в красной рамке). Как сделать слайдер на заднем фоне, и чтобы зеленая линия не смещалась при изменении размера окна?
       

    • By РоманФ
      Здравствуйте клиент хочет чтобы картинка была сверстанна полностью именно на html css, кто то сталкивался c такой проблемой? возможно есть советы по тому как это сделать правильно.
      Волна по центру и все остальные вещи должны быть заверстанны в том числе.Интересует как это сделать с минимумом костылей.
      И остро стоит вопрос чтобы это все дело было адаптивно.
      На данный момент все что смог сделать https://jsfiddle.net/RomanFF/jL9swq7h/37/ с border нормальный сделать смогу, не понимаю принцип по которому мне все сопоставить так чтобы не полетело все потом,  мне хотябы общие принципы объяснить в каком направлении дальше двигаться

    • By enkhe
      Доброго всем суток!
      Попросили оптимизировать сайт (поменять дизайн, обновить контент, добавить языки интерфейса - сайт на корейском cerokorea.com), помогите, пожалуйста, какие шаги необходимо предпринять. 
      Не являюсь "Сайтостроителем", но есть интерес разобраться самому. В следствии чего, я понимаю для начала необходимо зайти в админку поменять контент итп. Или же проще будет создать новый сайт на конструктарах и связать с доменом - какой конструктор выбрать и как связать с существующим доменом? 
       
      Буду рад любой ссылке и информации. Спасибо!
  • Обсуждения

    • Всем привет! Хотела бы представить свою работу новичка на обсуждение для получения конструктивной критики и/или советов, взглядов что можно улучшить или изменить, общее впечатление, конечно, тоже интересует.   https://alesia-k.github.io/Tajam-template/ Обратите, пожалуйста, внимание на: - блок "MEET OUR AMAZING TEAM". Немного не нравится как смещаются item при наведении мыши, как будто немного дергаются. Так ли по-вашему это должно работать или такое поведение блока нужно изменить? - инпут "subscribe" в футторе. При клике на инпут, немного смещается и сам инпут, и рядом стоящая кнопка. Было бы классно, если бы подкинули идею как сделать, чтобы такого не было. - и почему-то при клике на <a href="tel:(+62)2122243333">(+62)21-2224 3333</a>   не идет процесса соединения. Заранее спасибо!
    • Попробуйте убрать стиль: html.pum-open.pum-open-overlay, html.pum-open.pum-open-overlay.pum-open-fixed .pum-overlay { /* overflow: hidden; */ } в файле "pum-site-styles.css?generated=1634785690&ver=1.16.2"
    • Прошу прощения!! Акроми
    • По одному лишь скриншоту сказать сложно
    • Доброго времени суток. Возникло 4 проблемы, 2 из них решилось при включении внутренних функций отладки плагина. Уже сломал голову выискивая в 1 случае нужный css. 1. При нажатии оставить заявку или на блок в *Наши услуги* появляется черная рамка в окошке (на скрине видно), причем, появляется она рандомно, иногда с 1 раза иногда с 10... При нажатии в окошко она исчезает. 2. Всего на сайте 4 окна, всё в них одинаковое, настройки и шорт код контактной формы, разница только в логотипе и номере. Проблема: При открытии окна *Оставить заявку* страница мотается вверх и открывается окно, при закрытии отматывается обратно на ту часть, где было нажатие кнопки (Хотя отмотки страницы вообще не должно быть, нажал окно просто открылось). Так же есть кликабельные блоки в разделе *Наши услуги*, при нажатии они так же отматывают страницу вверх, а при закрытии не возвращается вниз. С данной проблемой (скорей всего проблема в совместимости скриптов, но в скриптах я полный 0) столкнулся в первые в данном плагине. Буду признателен любой помощи.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy