Well, how can you still learn to professionally make up (the question is inside)?

Question

css

Sources (psd layout and initial layout): https://cloud.mail.ru/public/f0083aa7b4bc/222.rar
Link to codepen (without sass): codepen.io/evg_/pen/RNdEVO
In general, I started trying to layout layout. Something like almost as it should be, marked out the grid. I started making separate blocks. Started from the top menu. And damn it, problem on problem. This is how it is for me with every layout, everything is more or less normal, and so I have not made a single layout in 4 months.
I can lay out any components (separately), but here the full layout does not work out, there are always problems and there is always something that I can’t find a solution for. I read the theory as much as I could, but I need to practice and I try everything, but it doesn’t work out.
Please help, with advice, what and how, how best to practice, how you practiced, etc. How to learn all the same to make layouts normally, preferably any).
Are there text tutorials somewhere, where layouts would be laid out step by step, (adaptive, sass / susy, etc.)?
Yes, and who is not lazy, look at the code posted above, help to figure out at least why the black block of the basket flies out?
PS. In general, say at least something adequate, otherwise my hands are already lowered and there are thoughts of quitting everything, but I don’t want to quit.

Answer 1

It's all right, I started with video tutorials, and then by myself. Almost the same way as you, I didn’t complete layouts to the end. Many things did not work out, I did not understand why the position relative is needed, and much more. But in the process, when I learned what I knew well enough, I began to gradually raise my level. First, I completed the old layouts, then I started to layout more complex layouts. There is nothing like that in this, the learning process is thorny, and it’s difficult to figure it out even with sesses from the first run if you haven’t dealt with programming before. Don’t get too hung up on this, for example, I devoted 3-4 hours a day to this and didn’t really sweat it when it didn’t work out, but just got up from the computer and went with friends to get drunk or go to the sauna. I advise you to do the same. Good luck with your studies mate

Answer 2

But a week ago this person was going to create his own css framework.

Answer 3

It seems to be nothing complicated.
I advise:
1. At the first stage, forget about all buggy and left-handed browsers, make up only for the latest chrome and fox (although there are adventures here too).
2. Use only the latest technologies
3. Something goes wrong, buggy, immediately google (in fact, go to the link only with stackoverflow) and read the description of buggy properties.
4. Everything will come with practice
PS don't be afraid of position:absolute, it's often needed

Answer 4

Please help, with advice, what and how, how best to practice, how you practiced, etc. How to learn all the same to make layouts normally, preferably any).

Go to themeforest.net (or some other site with templates ... open the template .... look at it, you can take a screenshot of the page.
Cut it in PS and typeset, something is not clear - see how it was done on a ready-made template.
Yes and why do you immediately need lessons on adaptive, sass / susy, etc. , if you can’t make up a regular template yet. You need to do everything step by step and measuredly. Something is not clear - take the time to figure out why and how yourself.

Answer 5

The advice for the ladies is this: more practice, but not just stupid code, but look for a competent one, look at youtube there are a lot of channels for layout (sorax, looftblog, master-css, webdesign master, magisters, psd to html, etc.) Look , repeat every day and the result will be. Choose simpler layouts, get the hang of it, then take it harder. In general, go and register on https://htmlacademy.ru , get 3 cool layouts every month to test your knowledge and typeset for yourself. And yet you don’t know the basis yet, why do you need sass? Your file structure should now look like this: css and img folders and an index.html file, eventually include the js folder when you learn javascript. And only then compilation, preprocessors and assembly managers.

Answer 6

Your structure is wrong. Do so awesomescreenshot.com/05b4rc4c4b

<header class="header"></header>
<div class="container">
  <section class="content"></section>
  <aside class="sidebar"></aside>
</div>
<footer class="footer"></footer>

Answer 7

Since you posted a few comments on the code (without looking at the template itself):

• Use semantic tags, as Andrey B. already wrote , don't use solid divs, you don't have a single h header
  
• Don't wrap block elements in inline - li in a, it's not forbidden by the html5 spec, but it's better not to do that
  
• Use shorthand values ​​for e.g. margin
  

Answer 8

I would recommend to start with a simple template, fixed, using pure CSS. Repeat two or three times, but with more complex patterns. After that, make rubber / adaptive. And only after the pens understand what, and how, to use preprocessors.
I usually use a validator at the end, but first run your code and check every n-minutes/hours.
Don't do this, you can't wrap a list item in a link:

<ul class="main-menu">
          <a href="#"><li>MEN</li></a>
</ul>

Exactly how to write words in caps - not very effective (suddenly a hypothetical content manager does not know how to clamp caps or shift), here it is better to set caps to words through css.