прокачиваем навыки владения CSS / Хабр
Архипкин Дмитрий
веб-разработчик в HTDev
Любые навыки прокачиваются опытным путём и упорным изучением – это факт, с которым сложно не согласиться. Изучение языков программирования и каскадных таблиц стилей не являются исключением – достичь высоких результатов в этом вопросе удастся только благодаря регулярной практике.
Владея знаниями по вёрстке, можно достичь поставленных целей и перейти на следующую ступень профессионализма. В этой статье я расскажу, какие материалы мы с коллегами используем в своей работе: уверен, эта информация будет полезна разработчикам на CSS.
На базовом уровне
Цель: Помнить все свойства в CSS. Достигается примерно за 300 часов
Что изучать?
В первую очередь, синтаксис. А дальше по порядку:
Блочная модель https://doka.guide/css/box-model/
Специфичность https://doka.guide/css/specificity/
Принцип каскада https://doka.
guide/css/cascade/Методологии именования классов
Доклад: https://www.youtube.com/watch?v=1VM-vEItVeA&ab_channel=moscowcss
Презентация https://wsd.events/2016/10/01/pres/css-methodologies.pdfПозиционирование https://fls.guru/cssposition.html
Псевдоэлементы https://doka.guide/css/pseudoelements/ и псевдоклассы https://doka.guide/css/pseudoclasses/
Единицы измерения css https://fls.guru/css-units.html
Фон https://fls.guru/cssbackground.html https://yoksel.github.io/css-patterns/
Способы выравнивания элементов https://www.internet-technologies.ru/articles/centrirovanie-v-css-polnoe-rukovodstvo.html
Сетки Flex
Теория: https://tpverstak.ru/flex-cheatsheet/
Практика: https://the-echoplex.net/flexyboxes/Основы SVG https://svgontheweb.com/ru/#preparation https://svgontheweb.
com/ru/#implementationTransform https://fls.guru/transform.html https://yoksel.github.io/pages/transform-functions/
Шрифты https://html5book.ru/css-shrifty/ https://doka.guide/css/font-face/
Подробно о шрифтах: https://github.com/urfu-2015/verstka-lectures/blob/master/text/text.md
Вариативные шрифты: https://yoksel.github.io/opentype-variable-fonts/Дефолтные стили браузера: reset, normalize. https://htmlacademy.ru/blog/html/short-13https://htmlacademy.ru/blog/html/about-normalize-css
Валидное написание кода – по стандартам Консорциума Всемирной паутины (W3C). Проверить можно с помощью валидатора.
Стиль кода, к примеру:https://codeguide.academy/html-css.html#css
guide/css/cascade/
com/ru/#implementationКак практиковаться?
С помощью платформ, например:
HTML Academy https://htmlacademy.ru/courses/299 и https://htmlacademy.
ru/courses/297Хекслет https://ru.code-basics.com/languages/css
W3Schools https://www.w3schools.com/css/default.asp
ru/courses/297Для тренировки и визуализации небольшого участка кода применяются редакторы кода:
Онлайн-редактор кода, например, https://jsbin.com/?html,output или https://codepen.io/
Редактор кода с плагином для отображения результата в браузере для VSCode это Live Server: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Современные редакторы WebStorm, VSCode через встроенный emmet помогают запомнить значения свойств. Изучить все возможности emmet можно здесь: https://epixx.github.io/emmet/
Где брать недостающую информацию?
Информацию по свойствам берём через онлайн-справочники:
https://htmlbase.ru/
https://doka.guide/css/
http://htmlbook.ru/css
На профессиональном уровне
Цель: Повысить скорость работы и использовать тонкости CSS на практике.
Достигается примерно за 1000 часов.
Что изучать?
Адаптивная вёрстка https://doka.guide/css/media/
Теоретические примеры: https://tpverstak.ru/adaptive-cheatsheet/Вёрстка под PixelPerfect https://htmlacademy.ru/blog/html/pixel-perfect
Особенности отображения стилей в разных браузерах
Препроцессоры SASS, Less, Stylus и постпроцессор PostCSS
Сетки Grid
Теория: https://tpverstak.ru/grid/
Практика: https://alialaa.github.io/css-grid-cheat-sheet/Работа с легаси (к примеру, float)
Продвинутые селекторы https://doka.guide/css/child/, http://css.yoksel.ru/nth-child/
Продвинутые фишки CSS
Например, z-index https://developer.mozilla.org/ru/docs/Web/CSS/z-indexCSS-функции
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions
https://dev. to/balaevarif/css-gio Стилизация скролла https://only-to-top.ru/blog/coding/2020-01-31-stilizaciya-skrolla-css.html
https://doka.guide/css/scroll-behavior/
https://doka.guide/css/scroll-padding/CSS-анимация https://fls.guru/cssanimation.html
https://animista.net/play/textУглублённое изучение SVG https://svgontheweb.com/ru/
https://yoksel.github.io/svg-decoration/SVG-анимация https://svgontheweb.com/ru/#animating
Библиотеки CSS:
Tailwind
Bootstrap
Foundation
to/balaevarif/css-gio Как практиковаться?
Самый эффективный способ – работая с макетами. Макеты можно найти в телеграм-каналах:
https://t.me/figmamakets
https://t.me/figma_start
Или на платформах:
CSSBattle
WebReference
Где брать недостающую информацию?
В онлайн-справочниках:
https://doka.
guide/css/
https://developer.mozilla.org/ru/docs/Web/CSS
В книгах:
Кит Грант «CSS для профи»
Дэвид Макфарланд «Большая книга по CSS»
Грег Сидельников «Наглядный CSS»
Леа Веру «Секреты CSS. Идеальные решения ежедневных задач»
На экспертном уровне
Цель: полная экспертность в вопросе и стремление развить свои навыки до высочайшего уровня. Достигается постоянным изучением CSS и практикой, измерение в часах невозможно.
Что изучать?
Фундаментальные механизмы CSS: обработка значений (value processing), каскад и наследование.
Оригинальная документация W3C https://www.w3.org/Style/CSS/Overview.en.html
Что практиковать?
Всё, включая апробацию новых фишек.
Где брать недостающую информацию?
Чтобы быть в курсе последних новостей:
Отслеживайте выход новых фишек в обновлениях браузеров
Читайте специализированные ресурсы, например, CSS-live
В заключение
Для человека, который только начинает изучать программирование, путь от первого знакомства с основами вёрстки до создания «одностраничника» без адаптивной версии займёт в среднем 70 часов.
Однако работа верстальщика может включать не только создание лендингов, но и работу над масштабными проектами, такими, как, например, корпоративные порталы для федеральных компаний. Удержать в голове огромное количество знаний об особенностях CSS – очень сложно, плюс, из-за регулярного обновления версий браузеров добавляются новые свойства, функции, дорабатываются уже имеющиеся данные и появляются свежие подходы к вёрстке. Именно поэтому специалист, хорошо владеющий базой, всегда сможет найти для себя новые интересные грани в этой сфере и перспективы для развития своего профессионального потенциала.
HTML, CSS, JavaScript и jQuery
General information
Domain Name: | html5book.ru |
Registration Date: | |
Expiration Date: | |
Registrar URL: | |
Registrar Contact: | |
Hosted In: | |
Safety: | Safe |
Domain Extension: | . ru |
IP address: | 172.67.139.195 |
Meta Data Analysis
Website Name:
HTML5BOOK.RU — HTML, CSS, JavaScript и jQueryWebsite Description:
HTML5BOOK.RU — сайт для тех, кто изучает веб-технологии и создает сайты.Website Keywords:
Rankings
Alexa Rank: | 77131 |
OverAll Traffic Chart | Search-Engine Traffic Chart |
Security & Safety
Google Safe Browsing: | Safe |
WOT Trustworthiness: | # |
Siteadvisor Rating: | # |
Geographics
City: | |
Country Name: | |
Latitude: | |
Longitude: |
DNS Analysis
| Host | Type | Class | TTL | Target |
html5book. ru | A | IN | 10799 | |
| html5book.ru | NS | IN | 10799 | ns4.jino.ru |
| html5book.ru | NS | IN | 10799 | ns3.jino.ru |
| html5book.ru | NS | IN | 10799 | ns1.jino.ru |
| html5book.ru | NS | IN | 10799 | ns2.jino.ru |
| html5book.ru | SOA | IN | 21599 | |
| html5book.ru | CAA | IN | 10799 |
SEO Analysis
Site Status | Congratulations! Your site is alive. |
Title Tag | The meta title of your page has a length of 46 characters. Most search engines will truncate meta titles to 70 characters. |
Meta Description | The meta description of your page has a length of 118 characters. |
Google Search Results Preview | HTML5BOOK.RU — HTML, CSS, JavaScript и jQuery |
Most Common Keywords Test | There is likely no optimal keyword density (search engine algorithms have evolved beyond
keyword density metrics as a significant ranking factor). It can be useful, however, to note which
keywords appear most often on your page and if they reflect the intended topic of your page. More
importantly, the keywords on your page should appear within natural sounding and grammatically
correct copy. -> css — 3 -> html — 3 -> htmlbookru — 2 -> — — 2 -> jquery — 2 |
Keyword Usage | Your most common keywords are not appearing in one or more of the meta-tags above. |
h2 Headings Status | Your pages having these h2 headigs. |
h3 Headings Status | Your page doesn’t have h3 tags. |
Robots.txt Test | Your page doesn’t have «robots.txt» file |
Sitemap Test | Your page doesn’t have «sitemap.xml» file. |
Broken Links Test | Congratulations! Your page doesn’t have any broken links. |
Image Alt Test | 1 images found in your page and 1 images are without «ALT» text. |
Google Analytics | Your page not submitted to Google Analytics |
Favicon Test | Your site doesn’t have favicon. |
Site Loading Speed Test | Your site loading time is around 0.99275517463684 seconds and the average loading speed of any website which is 5 seconds required. |
Flash Test | Congratulations! Your website does not include flash objects (an outdated technology that was sometimes used to deliver rich multimedia content). Flash content does not work well on mobile devices, and is difficult for crawlers to interpret. |
Frame Test | Congratulations! Your webpage does not use frames. |
CSS Minification | Your page having 7 external css files and out of them 2 css files are minified.  ru/wp-content/themes/html5book/css/linearicons.css?ver=5.7.2https://html5book.ru/wp-content/themes/html5book/css/prism.css?ver=5.7.2 https://html5book.ru/wp-content/themes/html5book/style.css?ver=5.7.2 https://html5book.ru/wp-content/themes/html5book/css/examples.css?ver=5.7.2 |
JS Minification | Your page having 4 external js files and out of them 2 js files are minified. |
Most search engines will truncate meta descriptions to 160 characters. 
Your
primary keywords should appear in your meta-tags to help identify the topic of your webpage to
search engines.
10 лучших Html5-книг 2023 года
| лучшие продукты
Результаты основаны на
8 501 Отзывы ОтсканированоРаботает на
Популярные запросы
- Создатели кубиков льда
- Спа для ног
- Одеяла
- Кофемашины
Питаться от
| 1 | Поваренная книга холста HTML5 | 9,7 | ||
| 2 | Поваренная книга HTML5: решения и примеры для разработчиков Html5 (Поваренные книги (O’Reilly)) | 9,6 | 9,6 | |
| 3 | Веб-разработка и дизайн для начинающих: изучите и примените основы HTML5 | 9,2 | 9,2 | |
| 4 | Полная веб-разработка для начинающих: изучите веб-разработку для электронной коммерции с использованием HTML5, CSS3 | 9,0 | 9,0 | |
| 5 | Адаптивный веб-дизайн с помощью HTML5 и CSS: создавайте перспективные адаптивные веб-сайты, используя | 8,6 | ||
| 6 | Краткое руководство по HTML и CSS: Упрощенное руководство для начинающих по разработке сильного | 8,3 | 8,3 | |
| 7 | Изучение веб-дизайна 5e: руководство для начинающих по HTML, CSS, JavaScript и Интернету | 8,0 | 8,0 | |
| 8 | HTML, CSS и JavaScript все в одном: охватывает HTML5, CSS3 и ES6, Sams | 7,8 | 7,8 | |
| 9 | Head First HTML5 Programming: создание веб-приложений с помощью JavaScript | 7,5 | ||
| 10 | HTML5 и CSS3 «все в одном» для чайников | 7.1 | 7.1 |
7″>
6″>
5″>Вам также может понравиться
10 лучших книг Ха
8 779 просмотрено отзывов
10 лучших подставок для книг
9 807 отзывов отсканировано
10 лучших сумок для книг
6 239 отзывов отсканировано
10 лучших книг S
8 889 отзывов отсканировано
Сравнительная таблица продуктов| 1 | Поваренная книга холста HTML5 | 9,7 | 9,2 | 9,8 | ||
| 2 | Поваренная книга HTML5: решения и примеры для разработчиков Html5 (Поваренные книги (O’Reilly)) | 9,6 | 9. | 9,7 | ||
| 3 | Веб-разработка и дизайн для начинающих: изучите и примените основы HTML5 | 9,2 | 8,7 | 9,3 | ||
| 4 | Полная веб-разработка для начинающих: изучите веб-разработку для электронной коммерции с использованием HTML5, CSS3 | 9,0 | 8,5 | 9.1 | ||
| 5 | Адаптивный веб-дизайн с помощью HTML5 и CSS: создавайте перспективные адаптивные веб-сайты, используя | 8,6 | 8.1 | 8,7 | ||
| 6 | Краткое руководство по HTML и CSS: Упрощенное руководство для начинающих по разработке сильного | 8,3 | 7,8 | 8,4 | ||
| 7 | Изучение веб-дизайна 5e: руководство для начинающих по HTML, CSS, JavaScript и Интернету | 8,0 | 7,5 | 8. | ||
| 8 | HTML, CSS и JavaScript все в одном: охватывает HTML5, CSS3 и ES6, Sams | 7,8 | 7,3 | 7,9 | ||
| 9 | Head First HTML5 Programming: создание веб-приложений с помощью JavaScript | 7,5 | 7,0 | 7,6 | ||
| 10 | HTML5 и CSS3 «все в одном» для чайников | 7.1 | 6,6 | 7,2 |
1
1См. Топ-10 {{name}}
{{/resultItems}}
Корпорация Майкрософт и партнеры могут получить компенсацию, если вы приобретете что-либо по рекомендуемым ссылкам в этой статье.
HTML5 книга. Эплог. Возьмем 2.
Несмотря на то, что эта книга посвящена HTML5, авторы предпочитают работать с скомпилированными языками, создающими приложения для запуска на виртуальных машинах.
Такие программные платформы более продуктивны для разработки и более предсказуемы для развертывания. При написании этой книги мы часто спорили о плюсах и минусах перехода на HTML5, и пока нас беспокоит то, что платформа HTML/JavaScript/CSS еще не готова для разработки корпоративных приложений. Мы живем в эпоху, когда любители чувствуют себя комфортно, создавая веб-сайты, и что JavaScript обеспечивает гибкость и настройку, которые Access и Excel обеспечивали во времена старых добрых ПК.
На сегодняшний день Microsoft Excel является самым популярным приложением среди бизнес-пользователей на предприятиях. Они запускают приложение локально, оно имеет локальное хранилище, что позволяет работать в эпизодически подключаемых сценариях. И данные, и код физически расположены близко к сердцу пользователя. Microsoft Excel позволяет пользователям иметь свои собственные небольшие фрагменты данных и любительский, но рабочий код (также известный как формулы) очень близко и лично. Прямо на рабочем столе.
Не нужно просить этих IT-примадонн об одолжении. Нет зависимости от подключения или каких-то загадочных серверов, которые работают медленно или отключены. Самые продвинутые бизнес-пользователи даже узнают, как работать с базой данных MS Access, чтобы еще больше снизить зависимость от ИТ.
Но с примитивными инструментами мало что можно сделать. Visual Basic был «JavaScript» девяностых — у него были похожие проблемы, но, тем не менее, у него было огромное количество поклонников. Сейчас те же люди занимаются JavaScript. Если мы не разорвем этот цикл, приняв общую для всех браузеров виртуальную машину, мы обречены на то, чтобы проходить поколение за поколением маломощного дерьма.
Недавно один из наших клиентов с Уолл-Стрит прислал нам список проблем, которые необходимо исправить в веб-приложении, которое мы разрабатывали с использованием среды Adobe Flex (Flash Player был виртуальной машиной, на которой работало это приложение). Одним из запрошенных исправлений было «удалить случайное мерцание, когда виджет перемещается в окне и привязывается к другому».
Мы исправили это. Вы можете возразить, что Flash Player, как и любой плагин для браузера, уходит. Но планка корпоративных приложений на основе Flash установлена довольно высоко. Мы надеемся, что будущие корпоративные веб-приложения, разработанные с использованием HTML6, повысят ожидания в области взаимодействия с пользователем. Придет время, когда HTML-виджеты не будут мигать ни в одном из основных браузеров.
Мы написали эту книгу, чтобы помочь людям понять, что представляют собой приложения HTML5. Но не делайте ошибок — мир HTML5 — это не прекрасное место в будущем, проповедуемое образованными и сострадательными учеными, а скорее неприятное прошлое, которое настигает толпу.
Это прошлое и это будущее. Шансы на то, что какой-то конкретный вендор завоюет весь или даже 80% рынка мобильных устройств, невелики. В конкурентном бизнесе возможности сделать приложение доступным ТОЛЬКО для 80% рынка недостаточно, поэтому шансы на то, что какая-либо конкретная нативная платформа будет доминировать среди веб-разработчиков, невелика.
HTML5 и связанные с ним технологии послужат общим знаменателем для мобильных разработчиков.
Авторы этой книги имеют более чем 100-летний опыт разработки корпоративных приложений. За эти годы мы узнали, что поговорка «Сегодня на Уолл-стрит, завтра на Мейн-стрит» работает. ИТ-подразделения финансовых компаний очень прагматичны в выборе инструментов для разработки своего программного обеспечения. В частности, мы следим за платформами, используемыми для разработки приложений для финансового трейдинга — они должны быть быстрыми, надежными, а любые задержки в обработке или неуклюжий пользовательский интерфейс могут привести к значительным денежным потерям. Кроме того, стоимость разработки резко возрастает, если ИТ-организация ставит перед собой цель предложить свое торговое приложение всему мобильному рынку, что является движущейся целью сегодня и останется такой же в обозримом будущем.
Проверьте торговое приложение tradeMonster. Он был разработан с использованием HTML5 и использует одинаковую кодовую базу для всех мобильных устройств (в десктопной версии используется Flash Player).