How to learn modern layout from 0?

Question

IT education

Hello. There was a problem, there are many resources on the Internet where they teach pure HTML, CSS, how to typeset without using anything. And there are tutorials on how to typeset using some strange things like plugins, gulp, etc... Well, I think those who know are in the know :) In general, I would like to somehow find a resource where there is either an explanation of this transition (from easy to complex layout) or to know the order of how to study. Can anyone help or advise? Thanks in advance.

Answer 1

I advise you to pay attention to the courses that I have indicated below.
• Josh Kaufman “The first 20 hours. How to Learn Anything... Quickly
• en.learnlayout.com
• htmlacademy.ru/program
• w3schools.com
• flexbox.ninja
• Web Developer Development
• htmlacademy "Basic HTML and CSS"
coursehunters.net/course /bazovyy-html-i-css-18-2017
• htmlacademy "Advanced HTML and CSS"
coursehunters.net/course/prodvinutyy-html-i-css-po...
• htmlacademy "Professional HTML and CSS Level 1" • htmlacademy "Professional HTML and CSS Level 2"
• htmlbook.ru
• webref.ru
• developer.mozilla.org/en/
• flukeout.github.io (learning selectors in CSS)
• flexboxfroggy .com/#ru (learning flexbox in CSS)
• flexboxdefense.com (learning flexbox in CSS)
• dmitrylavrik.ru/training/process/flexbox-grid (creating a grid on flexbox)
• cssgridgarden.com/#ru (learning gridbox in CSS)
Tasks for practice: htmlbook.ru/practical Layouts for practice: •
•
drive.google.com/drive/u/0/folders/0B8LYygUI_oGeSG...
• freebiesbug.com/psd-freebies/website-template/
• symu.co/freebies/templates- 4/
• dcrazed.net/free-photoshop-psd-website-templates/

Answer 2

I think this question is asked every day.
Html - academy as an option, for starters, that's it. There it is interactive, right away with practice and with a fairly correct order.

Answer 3

I personally started teaching from real objects. Namely. I drew the design of a small landing page in Photoshop, and began to typeset, little by little, to collect knowledge, so the learning process goes faster, but I wouldn’t say that it’s correct because at the initial stages the curve code and layout are on crutches, but we are learning)

Answer 4

Well, and a practical way: choose any psd source (training), preferably one where you know the implementation of not all elements, and typeset. When you get to such blocks, you start to google, turn to the documentation, and when you understand the mechanism of work, you can already apply it in other projects.