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

[Ilya Kashitsyn]

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

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

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

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

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

 

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

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

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

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

 

[WebNewbe]

Сразу видно в чем проблема, это я про 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 March 29, 2018 by WebNewbe

[Ilya Kashitsyn]

Большое спасибо, поправил. А подскажи где ты берешь шаблоны psd для своего портфолио?

[Schamil74]

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

Замечания

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 March 29, 2018 by Schamil74

[WebNewbe]

8 часов назад, Ilya Kashitsyn сказал:

Большое спасибо, поправил. А подскажи где ты берешь шаблоны psd для своего портфолио?

На всю жизнь хватит

https://cssauthor.com/templates/
https://psdfreebies.com/psd/category/web-elements/web-templates/
https://psdrepo.com/tag/free-psd-website-templates/
http://www.pcklab.com/templates
https://freebiesbug.com/psd-freebies/website-template/
http://www.os-templates.com/free-psd-templates
https://colorlib.com/wp/free-psd-website-templates/
https://speckyboy.com/free-photoshop-psd-web-design-template/
https://dcrazed.com/free-photoshop-psd-website-templates/
https://dcrazed.com/best-free-blogger-templates/
https://cssauthor.com/corporate-business-web-templates/
https://freshdesignweb.com/free-travel-website-templates/
https://inscribemag.com/free-psd-website-templates/
https://www.freepik.com/
http://blazrobar.com/tag/free-psds/
http://devfloat.net/business-corporate-bootstrap-templates/
https://freedesignresources.net/category/free-templates/psd-templates/

[user]

Вопрос не по теме-чем вы делали гифки?

[Ilya Kashitsyn]

Программа называется licecap https://www.cockos.com/licecap/