Evaluation of the first layout?

Laid out in his life first training layout, and from
I would like to hear criticism, what I did wrong that could have been done differently or better.
u77707.netangels.ru/barber
March 23rd 20 at 18:49
2 answers
March 23rd 20 at 18:51
1. responsive interface!
This is insanely important.
All interactively, should respond to user actions
the desired styles for the :hover pseudo-class for button
when you hover over links to social.networks, they also need to react. For example, the simplest opacity: .8
And don't forget about the cursor: pointer for just what you can interact

2. not seen the layout, but are You sure that the buttons have to be doubtful this grey border?
I think it is better (green arrow) border: 0
remove orange outline when :focus (blue arrow)
5cf439fd3ee49933461037.png

3. the phone needs to be a link and then it is clickable
<a href="tel:+74956660266">+7 (495) 666-02-66</a>
4. HOW TO FIND US? in the footer, as I understand it, this should also be a link

5. I would have removed the outline from the input in focus
and placeholder should disappear when the cursor is in the field, and it disappears from you only when you enter

You did the right padding-left from the input fields, but why doesn't the padding-right. In General, it's not very nice.
5cf43a1be49f4012430270.png

Doing the right thing by using the time tag)

About semantics
In General, the green arrows signify that you have correctly used the tags h2 and p
Reds say about the misuse of these tags
5cf43a848f547575902900.png

Where the red arrows I would suggest to use div and span
See div and span is simply the building blocks of semantics

headings and paragraphs have semantic meaning, so it is advised to use them where they're needed.

When I started, a mentor threw this message:
Paragraphs/Paragraphs level semantics must be used to markup content that should not be used in end-to-end blocks, since they are not content.
In fact, the paragraph/the paragraph is the same thing as in the Russian language, and should only be used to markup text.


6. the footer is not pushed to the bottom
5cf43c84e503a132867640.png
Thank you very much for the detailed answer) - Alexandre_Hegmann commented on March 23rd 20 at 18:54
@Alexandre_Hegmann, good luck with the layout)

p.s. not necessarily everywhere, where the text is in large letters it to print that way.
Just mount it in the styles
text-transform: uppercase; - vivianne_Wilderman97 commented on March 23rd 20 at 18:57
@vivianne_Wilderman97know It. Just the layout was great, just copied and pasted) - Alexandre_Hegmann commented on March 23rd 20 at 19:00
and placeholder should disappear when the cursor is in the field, and it disappears from you only when you enter

A controversial issue.
In General, the green arrows signify that you have correctly used the h2 and p tags
Reds say about the misuse of these tags

Too controversial.
From the point of view of the semantics of this header.
Whether they are there from the point of view of SEO it is a different story, but not entirely the concern of the coder.
headings and paragraphs have semantic meaning, so it is advised to use them where they're needed.

<p> in HTML is used to group any related content, including form fields, pictures, etc., and not just in the sense of the paragraph in the universal sense. - genoveva.Murazik commented on March 23rd 20 at 19:03
5. I would have removed the outline from the input when focus.
Very bad advice, it is not necessary to do so - Osbaldo commented on March 23rd 20 at 19:06
@Osbaldo, I would say that the outline can be removed, but then have to replace something else that was visible and in focus. - genoveva.Murazik commented on March 23rd 20 at 19:09
@genoveva.Murazik, the issue with placeholder controversial?
I think it's more than expected behavior


From the point of view of the semantics of this header.
Whether they are there from the point of view of SEO it is a different story, but not entirely the concern of the coder.


And why do we need semantics if not for SEO?
(This question is not rhetorical, I just think that the semantics is only needed for SEO, but maybe it wasn't)
And if we understand that "fast", "cool" and "expensive" it is doubtful titles, and especially the h3, it is better to use a div

Outline clearly to remove!
Yes, it is better to highlight the focus on the field, but these prehistoric orange line from spoiling the layout. - vivianne_Wilderman97 commented on March 23rd 20 at 19:12
@vivianne_Wilderman97,
And why do we need semantics if not for SEO?

For example, there is still a reader. But you never know what other raspoznavalka content can be for different purposes.
Not a single SEO..
the issue with placeholder controversial?
I think it's more than expected behavior

Yes, it holivar, you can Google a lot of them. To participate in it, I don't want to.
The most reasonable solution, in my opinion, is to raise the placeholder when you focus to see what format he is required to enter the data.

Outline clearly to remove!
Yes, it is better to highlight the focus on the field, but these prehistoric orange line from spoiling the layout.

It is possible to remove and replace or repaint. The vast majority of them are gay and don't look so scared. Remove without replacement is impossible.
In this case it is better to leave the default browser behavior and people (maybe) wince, but understand where the focus than clean up at all, and he just simply lost. - genoveva.Murazik commented on March 23rd 20 at 19:15
I would have removed the outline from the input in focus

I hope something alternative you usually add, and look, the pot will separate. - timmothy.Smi commented on March 23rd 20 at 19:18
@vivianne_Wilderman97 , but what about accessibility? Then you need something else to invent, and even change the color of bg buttons

remove orange outline when :focus (blue arrow)
- Tremayne commented on March 23rd 20 at 19:21
March 23rd 20 at 18:53
5cf431073ffff962689373.png

Whether you need something to comment on?

5cf4310ef3316998204595.png
This is what device?
Adaptiv did not. Above 960 pixels everything seems OK. - Alexandre_Hegmann commented on March 23rd 20 at 18:56
@Alexandre_Hegmann, laptop, Windows 10, HD, Chrome, browser 70% of the screen. - Matilda.Jacobi commented on March 23rd 20 at 18:59
Very strange
5cf4335f4ac04908097567.png5cf43362e50f2640237047.png - Alexandre_Hegmann commented on March 23rd 20 at 19:02
@Alexandre_Hegmann, hmm, interesting, opened again and all the rules. - Matilda.Jacobi commented on March 23rd 20 at 19:05
@Matilda.Jacobi's Mac

And on windows in virtualke
5cf4340aba48c059638455.png - Alexandre_Hegmann commented on March 23rd 20 at 19:08
@Matilda.Jacobimay in fonts the problem was, hooked after Your first posts - Alexandre_Hegmann commented on March 23rd 20 at 19:11
@Alexandre_Hegmann, most likely :) - Matilda.Jacobi commented on March 23rd 20 at 19:14
@Matilda.Jacobi, So are there any comments? To which for example a client may complain about)) of Course not taking into calculation adaptiv, he is still ahead. - Alexandre_Hegmann commented on March 23rd 20 at 19:17
@Alexandre_Hegmann, problems in the layout of lots, narrow lot of places, but for the first time more than adequately. - Alyson_Crooks1 commented on March 23rd 20 at 19:20
@Alexandre_Hegmann, Yes the rules, but I would choose the time made a drop-down list, and date calendar. To drive four fields a chore :) - Matilda.Jacobi commented on March 23rd 20 at 19:23
@Alyson_Crooks1, what sort of problems and bottlenecks? For the future)) - Alexandre_Hegmann commented on March 23rd 20 at 19:26
normaliz need to connect to styles - theodore_Kutch commented on March 23rd 20 at 19:29
@Alexandre_Hegmann, too lazy to write, just put in his two cents worth. This is only with experience will come. - Alyson_Crooks1 commented on March 23rd 20 at 19:32

Find more questions by tags LayoutHTMLCSS