Как знания html и css довести до идеала?

Question

[Кирилл]

У меня есть знания, которые необходимы для выполнения каких либо задач, но все равно есть чувство, что я не знаю все достаточно хорошо.
Какие есть ресурсы для добивания всех моих знаний? Хочу изучить все нюансы, а уже потом дальше идти улучшать знания в других технологиях (js,jq,php,препроцессоры и тд.)

Comments

[Andrew]

Зависит от того, что ты хочешь делать дальше. Попросись джуном куда-то, там уже разберёшься куда дальше расти и в чем конкретно ты слаб (если контора нормальная), если знаний не хватает - спроси чего там нужно. Всё упирается в твоё желание и цели.

[Сергей delphinpro]

Читать, изучать и практиковаться.
Всё в больших количествах.
CSS — достаточно обширная тема, чтобы вот так взять и довести до идеала свои скиллы.

[BB 8]

учиться делать сетки самостоятельно, выучить несолько методологий и знать, в какой задаче будет оптимальней та или иная, много практиковаться и делать что-то подобное Top.

Answer 1

[xmoonlight]

Простой пример задания:

Здесь 3 слоя, 3 стиля, нет ни одного изображения, нет SVG, нет clip-path; полностью "резиновое" поведение с пропорциональным сохранением всех расстояний.

Могу написать ряд задач (с прямоугольными областями и расстояниями), которые нужно сделать на "чистом" CSS.
Если сможете - можно переходить на следующий уровень изучения CSS.

Comments

[Кирилл]

дать ширину в процентах, бордер радиус и цвет

[xmoonlight]

Кирилл, рабочий код на jsfiddle - там и посмотрим)

[BB 8]

xmoonlight,

https://codepen.io/fruity4pie/pen/JpzgJp

это какой lvl ? Almost God ?

[Кирилл]

BB 8,
было бы лучше, если бы ты дал абсолют двумя детям, а так норм

[BB 8]

Кирилл, чем было бы лучше ?)

[Кирилл]

BB 8, Ну в данном контексте ничем, а если сделать более правильнее, то лучше задать, хотя это и не обязательно

[xmoonlight]

BB 8, отдалённо похоже, но совсем не то, как на изображении...

[BB 8]

xmoonlight,
)) так убавить значения радиуса и будет то, что нужно. ДА и к тому же, Ваше изображение обрезано - по нему тоже сложно понять, что Вы хотите получить в итоге)

[xmoonlight]

BB 8, оно именно такое, какое требуется. там ничего не обрезано.

[Кирилл]

xmoonlight,
https://codepen.io/TeslaGogol/pen/LQvPNa

[xmoonlight]

Кирилл, те же ошибки, что и у BB 8 :
1. внимательно смотрите на прилегающие к краю углы,
2. ничего не указывается в абсолютных величинах.

[BB 8]

xmoonlight,

https://codepen.io/fruity4pie/pen/JpzgJp

"2. ничего не указывается в абсолютных величинах." - почему ?)

[xmoonlight]

BB 8, потому, что не будут сохраняться пропорции, если сжать или растянуть)

[xmoonlight]

BB 8, https://codepen.io/fruity4pie/pen/JpzgJp - вообще бред!

[BB 8]

xmoonlight,
"потому, что не будут сохраняться пропорции, если сжать или растянуть)"
что за бред ? Вы это сами придумали ?

[Кирилл]

xmoonlight, Можно взглянуть на правильную версию?

[xmoonlight]

BB 8, нет. это фактически так и есть.

[BB 8]

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

[BB 8]

xmoonlight,

что ? На основе чего такие выводы ?

Я скинул правильное решение и не смотря на то, что нижний элемент отпозиционирован абсолютно, он резиновый. А измерять высоту картинки и делать пиксель в пиксель.....Ну Вы сами понимаете....Правильное решение я привел выше

[xmoonlight]

BB 8, Кирилл,
Я обновил картинку в ответе на анимацию.
Должно быть именно так.

[BB 8]

xmoonlight, ааааа, еще и высоту....Даже не смотря на то, что Вы показали как должно быть, суть не меняется - абсолютно спозиционированный элемент останется резеновым.

В моем случае - адаптивная ширина, но нет высоты. И почему-то элемент абсолютный резиновый.

[BB 8]

xmoonlight,

Приблизительно вот так - тянется во все стороны вместе с абсолютно отпозиционированным нижним элементом)) :

vot

[xmoonlight]

BB 8, идея в том, что все пропорции должны соблюдаться и должны зависеть от размера окна.

[BB 8]

xmoonlight, Абсолютно отпозиционированные элементы соблюдают пропорции если их делать ризиновыми. Нужно лишь уметь) В последней ссылке все так, как надо ?)

[xmoonlight]

BB 8,

В последней ссылке все так, как надо ?)

Нет...

[BB 8]

xmoonlight, Эх, нет. В codepen'e это проверяется немного иным средством:

Нужно нажать на кнопку "На весь экран" и проверять то, что было сделано в редакторе, а не сам редактор кода(((

В правом нижнем углу возле надписи "последний визит".

[xmoonlight]

BB 8, да не важно: iframe - отображается согласно написанному коду (а не редактору). Видно, что пока не корректно работает.

[xmoonlight]

BB 8, и закругления в углах у блоков (ближе к средней линии) - должны почти отсутствовать!
Смотрите на пример...

[Кирилл]

xmoonlight, Так как сделать правильно?

[BB 8]

xmoonlight, Вы такой смешной, ей богу) Вы свою картинку сжимаете/увеличиваете пропорционально, а в моей убрали лишь ширину и пишите, что не так - смешно) Уберите ширину в своей и оставьте такую же высоту с учетом редактора кода сверху и сравните. Будет то же самое)

[xmoonlight]

Кирилл, как только заработает так, как в примере - это и будет правильно.
Если, на данный момент, не можете сделать как в примере - значит ещё нужно изучать CSS более детально. Начните разбираться отсюда. Затем - снова пробуйте сделать эту задачу.

[BB 8]

Кирилл, Так, как я написал выше) Это то же самое, что и задание сверху) Может где-то не сошлись %, т.к. не ставил задачу сделать 1 в 1)

[xmoonlight]

BB 8,

Будет то же самое)

не будет.
Не умеете верстать - не надо оправдываться. ))

[BB 8]

xmoonlight, Ну конечно, не умею) Куда мне до Вас, человека, который считает, что если элемент отпозиционирован абсолютно, значит он ФАКТИЧЕСКИ не может быть резиновым; и еще, человека, который не знает что такое относительные величины, пропорции(Сжали мой вариант непропорционально) и скинули скрин). Уж лучше я останусь на своем уровне и буду знать, что такое vh, % и пропорции, а не вот это вот все) Даже пример не привели, потому что знаете, что я скинул тоже самое, за исключением небольших неточностей в % радиуса. Спасибо за хорошее настроение)

[xmoonlight]

BB 8,

Уж лучше я останусь на своем уровне и буду знать, что такое vh, % и пропорции, а не вот это вот все) Даже пример не привели, потому что знаете, что я скинул тоже самое, за исключением небольших неточностей в % радиуса. Спасибо за хорошее настроение)

Как хотите... ))

Вот ужатый по вертикали и горизонтали:

[BB 8]

xmoonlight,


ну и ?? То же самое.

[BB 8]

xmoonlight, Разница лишь в том, что я не знаю какие пропорции верхненого, нижнего элемента и их радиусы углов.

[BB 8]

xmoonlight, Сори, но замерять линейкой мне было лень. Суть от этого не поменялась.

[xmoonlight]

BB 8, вообще не важно в чём разница: важен результат относительно поставленной задачи. У Вас он (на текущий момент) совсем не соответствует поставленной задаче.
Вывод: Вы не умеете верстать никакие шаблоны.

Совет:
Лучше подумайте: что Вы сделали не так и не доделали..
И исправьте.

[BB 8]

xmoonlight, Ох, какой же Вы дотошный.
Если Вас не устраивают мои скругления, можете увеличить % радиуса и сделать transform: scale().

+ к Вашему выводу)

[xmoonlight]

BB 8, ну вот, Вы же сами всё знаете/видите, а делать: или не хотите, или не можете)

[BB 8]

xmoonlight, я изначально не предполагал, что настолько критичны эти скругления. Без их учета начальное условие выполнено

[xmoonlight]

BB 8, у любой вёрстки есть только бинарное заключение: сделано по макету (и в соответствии с требованиями к поведению макета) и не сделано совсем.

[BB 8]

xmoonlight, здесь я согласен)

[evil_eyes]

xmoonlight, с радостью бы посмотрел на ваш список задач, ибо есть куда расти :)

[xmoonlight]

evil_eyes, Хорошо, я чуть позже опубликую здесь ссылку, после того как сделаю список задач доступным публично.

[ink]

xmoonlight, я просто подключился к задаче и мне стало интересно , так ? https://codepen.io/topicstarter/full/eVoZwx/

[xmoonlight]

ink, нет.
1. Все зоны, которые ближе к центру экрана - закруглённые, а у Вас они - прямой линией.
2. И углы - там не только border-radius...
Посмотрите внимательно на анимацию примера...

[ink]

xmoonlight, да я увидел ... теперь дошло о чём речь , спс ...приду с работы сделаю ....щас на работу мне

[xmoonlight]

ink, сочувствую! Удачи!

[xmoonlight]

ink, нет. совсем не то...

[ink]

xmoonlight, а щас оно ? https://codepen.io/topicstarter/pen/jZRYGP

[xmoonlight]

ink, ну опять:
1. Зазор между центральными полукругами - меняется, а размер верхней и нижней полукруглой части - нет. См. пример.
2. Углы, прилегающие - сравните тоже с примером.

[ink]

xmoonlight, навряд ли кто то сможет повторить - сделать копию по своему можно ... на сколько понимаю : если упереться то можно доказать любую теорию не соответствием ...

[xmoonlight]

ink, нет. Вы здесь на все 100% не правы...
Вёрстка - требует не только корректного неподвижного отображения согласно макету (кстати, это у Вас тоже не получилось!), но также требует корректного поведения элементов при изменении размеров окна или масштабировании.

Любое невыполнение требований к вёрстке для отображения и поведения свёрстанного макета - является НЕВЫПОЛНЕННОЙ работой по вёрстке.

[ink]

xmoonlight, если задача появится в реальности, реализую на SVG и что могу добавить , закодируйте css и выложите в сеть и покажите ссылку .. дам 100% что на моёй 4к форточке это будет выглядеть не как на анимации ...я уверен в этом

[xmoonlight]

ink, хоть 4к, хоть 12к - нет разницы... в коде нет указаний ни на размеры, ни на проценты...

[ink]

xmoonlight, не было бы тогда медиа запросов и 30+ вопросов на эту тему на тостере ... в любом случае спс

[xmoonlight]

ink, медиа-запросы - для адаптивной вёрстки, а не для "резиновой".
Не за что...

[ink]

xmoonlight, у меня тут проблема нарисовалась , комп открывает файл или папку только по пятому или больше клику ... но до этого поймал какой то uttorentien.exe который просил пароль какой то , я его замочил но теперя после его присутствия появилась эта проблема ... вирус какой то .. надо на убунту перепригывать ...винда одалела своими причудами

[xmoonlight]

ink, минимум, надо антивирусом проверить и почистить комп от malware/рекламных модулей.

[ink]

xmoonlight, щас восстановление делаю, потом KAV прогоню и удалю его ... пишу с планшета

Answer 2

[Дима Долготер]

пройди тесты на знание {название технологии} и потом будешь знать что знаешь, а что нет. также можно нагуглить типа -"вопросы на собеседовании верстальщику" и так поймешь свой уровень знаний.

Answer 3

[Alex Kizyma]

Много практики, качай PSD шаблони и верстай, смотри новие уроки