Как сверстать шаблон, учусь, не сердитесь, как правильно и с чего здесь начинать?

Question

[Патимон Фейлик]

С HTML и CSS знаком.

Comments

[alex-1917]

Когда дойдешь о финала, сравни то что получится с этим:

spoiler

уже давно готовой версткой))):
таки не сказал, хочешь научиться или разово сделать и забыть?))
если разово, то
_vengelweb.ru/models/black/black.php

..

Answer 1

[Johnny Gat]

Начинаете сверху самыми крупными элементами (сверстайте просто дивы):


Затем переходите на один уровень "глубже":

-


А затем все "глубже" и "глубже":

Answer 2

[Никита Кит]

Начинаете с правильной инициализации проекта и обращения с основами nodejs и npm в качестве среды разработки
yeoman.io
https://github.com/yeoman/generator-webapp
Устанавливаем среду разработки и учимся пользоваться cli
Иначе всю жизнь будешь колотить весь код в main.css и main.js .
Если ты хочешь научиться забивать гвозди в доску, сначала нужно изучить молоток, а то будешь забивать рукояткой.

Comments

[Одиночка Айс]

Молодой человек, голые css и js и есть молоток, а всякие прочие плюшки это уже приспособы, облегчающие заколачивание гвоздей

[Никита Кит]

Одиночка Айс, не молоток, а гвозди. Не путайте инструмент со стройматериалами и загуглите понятие "исходный код". Облегчающие... мягко сказано. Взгляните на календарик. Там уже 17й год. Никто из нормальных спецов header в html из страницы в страницу не копипастит.

[Одиночка Айс]

Никита Кит, мне вот интересно, зачем человеку, который только учится, знать о каком-то там node.js. Он пока основ не знает, а Вы ему советуете нечто, что к верстке на 100% отношения не имеет

[Никита Кит]

Одиночка Айс, nodejs имеет отношение к вёрстке на все 100%. gulp тоже к вёрстке не имеет отношения? Может ещё sass, stylus, less, babel, typescript, pug, ejs - это всё не к вёрстке, да? Это всё лесом идёт. Лучше всё в main.js и main.css писать. Так удобно, что можно любой проект написать. Свой google в эти два сверхволшебных файла.

мне вот интересно, зачем человеку, который только учится, знать о каком-то там node.js

Да зачем что-то вообще знать, пока учишься? Действительно, даже в универах так не делают, что уж там о самообразовании говорить? Зачем вообще головой думать? Иди дворником работай. В мире станет меньше на одного говнокодера.

[Одиночка Айс]

Никита Кит, Эм... Поясните, каким боком бэкендовый фреймворк имеет отношение к верстке? Он что, бутстрап?

[Никита Кит]

Одиночка Айс, backend фреймворк - это Yii или Symphony... MODX... А nodejs - это не фреймворк. Это платформа. Некое подобие ngnix или apache, только куда более расширенная по возможностям. В ответе выше я дал всю необходимую информацию о том как, и зачем её применять на десктопе в качестве системы сборки front-end интерфейсов.
Также можешь посмотреть Spotlight от Sorax, который даст тебе полную картину о nodejs. Ему примерно пару лет - тогда нода была в зародыше, но инфа до сих пор актуальна.
Чтобы увидеть живую картину инициализации проекта, можешь взглянуть на мой подкаст, в котором я постарался как можно подробнее описать, что нужно делать с этим даже если ты нуби и не знаешь js.

[Одиночка Айс]

Никита Кит, епрст, я вам про удава, вы мне про ежа. Верстка это создание HTML-страниц с оформлением в CSS, какие нахрен node.js и иже с ними? ТС разве что-то говорил про фронтенд? Ну ок, выучу я ноду, дальше что? Как мне сверстать страницу, а не писать приложение с серверной частью?

[Никита Кит]

Одиночка Айс, прости, но мне кажется ты просто глуп. Я с самых азов использовал ноду для вёрстки. Это не значит что все мои шаблоны - приложения с серверным ядром. Нода - это компилятор в контексте разработки вёрстки. Компилятор для препроцессоров, псевдоязыков js типа дарта или тайпа, кофе, бабеля, это компилятор для postпроцессинга синтаксиса. Конечно додик вроде тебя будет расставлять префиксы руками и орать скрепя зубами "ой как сложна, пойду чистый css html писать". Но пойми, что ты очень отстал от жизни. Всячески не хочешь догонять поезд новых технологий. Хватит упираться ногами. Вкури материал что я тебе дал. Ты по новому взглянешь на разработку, чуви - это будет глоток свежего воздуха.

Верстка это создание HTML-страниц с оформлением в CSS

Ты крайне неправ. Это не вёрстка. Это компиляция (да и то неполная - ты про сборку js забыл... хотя ты о ней и не знаешь)... для профессионального кодера само собой.

[Никита Кит]

Одиночка Айс, просто... ты можешь остаться при своём. Мне как-то неважно послушаешь ты меня, или нет - честно. Плевать. Это сыграет роль для тебя. Насколько ты заинтересован в своей сфере. Конечно ты можешь забить на мои слова и дальше писать то, что за тебя уже умеет ИИ. А можешь познать новое для себя и открыть себе новые возможности - тебе решать

[Одиночка Айс]

Никита Кит, переходить на личности очень умно, а привести конкретный пример, когда нода формирует готовую верстку слабо?

[Одиночка Айс]

Никита Кит, молодец, научился пользоваться шурупевертом, только дай тебе отвертку в руки, и ты сразу сдуешься, полемика окончена.

[Никита Кит]

Одиночка Айс, не притворяйся, что у тебя хромосома лишняя. Я тебе дал две ссылки на подкасты, в которых nodejs формирует вёрстку. И не надо её называть готовой. Нода даёт инструменты. Удобство. Готовишь ты.
Просто я не могу не переходить на личности когда человек уже просто брызжет дибилизмом

[Никита Кит]

Одиночка Айс, нет, я вкурю мануал к отвёртке, спрошу у столяров как и что. Какую отвертку лучше применить. И применю. А ты не будешь прислушиваться ни к чему и ни к кому.
В мире всё движется. Один атом толкает другой, другой - толкает третий. Точно так же происходит с людьми. Один другому что-то говорит, другой либо слушает и пробует - двигается вперёд, либо не слушает и не пробует - остаётся при своём. Если принять во внимание относительность ко вселенной это равносильно деградации. Задумайся об этом. Ангуляр уже 4й версии.

[Одиночка Айс]

Никита Кит, да хоть 10, дальше что? Всем дружно сваливать на ноды и ангуляры?

[Никита Кит]

Одиночка Айс, да, если ты хочешь быть классным спецом. Если не хочешь, если тебе это неинтересно, значит ты лошара, а не прогер - и до конца жизни будешь фапать на jquery, не в состоянии написать ничего крупнее каталога, не в состоянии работать в команде с профессионалами над интерфейсами крупных проектов

[Одиночка Айс]

Никита Кит, мдааа, ты типичный слоупок, возомнивший себя крутым разработчиком, печально

[Никита Кит]

Одиночка Айс, лол. Я обосновал свои причины идти в ногу со временем. У меня унижение подкреплялось конструктивизмом. Ты просто решил ядом плеваться. Ну окей. Оставайся при своём - хуже от этого только тебе

[Одиночка Айс]

Никита Кит, кто ты такой, чтобы кого-то "унижать"?)) Невъебенный разраб? Сомневаюсь

Answer 3

[vladimir_html]

1.Шапка: почитайте про флексбоксы
2.Сетка: почитайте про CSS Grid
3: снова флексы
4: до подвала идут сетки-флексы
5: флексы

В общем, как-то так)
P.S: не слушайте меня, глупого верстальщика
P.P.S.: а можно ссылочку на макет, это тренировочный?