Мобильные приложения для самообучения от сайта webref.ru

У меня получился большой перерыв в постах, с одной стороны — Новый год, да и вообще как-то лениво, а с другой — я все два месяца летал туда-сюда с разборками с банком и наследным делом. Крайне ненужная вам информация.

А потом еще один лысый дед решил начать войну.

Но суть в том, что за компом времени посидеть потыкать тесты, задачки не было. Поэтому я обратился к мобильным приложениям, поставил себе несколько на телефон и за время перелётов и протирания задницы в аэропортах и такси, я успел несколько из них уже пройти.

Выбор пал на приложение «Самоучитель HTML», но пройдя какое-то количество заданий, я таки зашел в меню и там уже нашел список приложений от разработчика. Я решил, как мне казалось, начать с начала и поставил «Основы HTML и CSS».

«Основы HTML и CSS»

Приложение построено в формате «Страница теории → Тест по материалу», иногда несколько тестов подряд. В конце блока тест по больше — по сути компиляция тестов из всего блока. Не пройдя эту «Проверку знаний», не получишь доступ к следующему блоку. Справедливо.

Отдельно есть вкладка «Практика», но есть она только у раздела про HTML. Вообще, конечно, то еще удовольствие с телефона редактировать код, но для закрепления полезная штука, хотя задачки там супер-тривиальные.

Введение

Основы здесь — это прям основы вообще, есть блок «Введение в Интернет». Там краткий экскурс в то, как работает сеть — что такое браузер, сервер, ip-адрес, домен и, разумеется, что такое HTML и как он работает в Интернете.

Хорошо объясняется, что такое протоколы и чем они отличаются. Про протокол IRC я впервые узнал отсюда. Так же хорошо написано про формирование URL, казалось бы, там 3-4 абзаца, но написано понятно.

HTML

Познакомившись с Интернетом, переходим к разделу HTML. Здесь нам рассказывают, естественно, что такое HTML и как с помощью него формируется веб-страница. Что такое элементы HTML, теги и содержимое, атрибуты тегов — хорошо прописана грань между этими сущностями.

Рассказывают какие теги бывают — открывающие, закрывающие, «самозакрывающиеся». Также достаточно хорошо описана разница между блочными элементами, которые формируют структуру, и строчными, которые структурируют текст задавая функцию и смысл разным участкам.

Кратко рассказано про правило вложенности и иерархию в HTML. В части про «Семантику» хорошо написана цель верстки в HTML:

Также в «Семантике» хорошо рассказано про условные подгруппы элементов — структурные, которые формируют страницу (<header>, <footer>, <aside> и т. д.), текстовые, которые определяют содержимое (<p>, <ul>, <blockquote> и т. д.), и строчные, про которые уже писал выше (<strong>, <em>, <abbr> и т. д.).

Уделён урок и даже несколько тестов форматированию документа HTML — использовать древовидное написание кода, табулицию, не стесняться писать комментарии и вообще писать HTML для себя, чтобы комфортно его читать.

Далее блок посвящен содержимому элементов, какие теги и для какого содержимого используются. Абзацы <p>, списки <ul>,<ol> и <dl>, заголовки <h1> — <h6>, цитаты <blockquote>, также некоторые строчные элементы.

Отдельно рассказано как работают ссылки <a>, тут упомянуто про якоря, абсолютные и относительные ссылки. В тестах очень наглядно можно разобраться с относительными ссылками и как правильно эту «относительность» записывать в атрибут.

Кратко написано про изображения <img> и про их атрибуты. В этом самоучителе настаивают на обязательном использовании alt="", с чем я спорить не буду, но именно про его обязательность я впервые вижу.

Интересно было почитать про таблицы <table>, у них оказывается тоже есть шапка <thead>, тело <tbody> и подвал <tfoot>. В htmlacademy я, по-моему, до них еще не дошел, но я по мере своей работы с ними уже сталкивался. Для меня долгое время таблицы были «шото из 2005-го» — устаревший тег, который я использовал еще в uCoz. До момента пока я не узнал, что поисковики любят таблицы и при определённых запросах могут отдать предпочтение документу с таблицей <table>, где есть релевантные данные, нежели документу, где таблица сделана в виде <div>-ов и сеток.

Далее немного затронуты структурные теги <header>, <footer>, <main>, <section> и <aside>, но почему-то пропущен <article> — про него даже не упоминается.

В завершение раздела разбираются формы <form> — что это, для чего они и их основные атрибуты. Также некоторые из элементов внутри форм — разного вида <input>'ы, <label> и его прикольный атрибут for="" который связывает его с полем, <textarea> и <select> и их атрибуты.

За сим теория и тесты в этом разделе заканчиваются, но в разделе по HTML есть практика. Он представляет из себя около 60 задачек (в сумме на оба блока) вида «Исправь код» и выглядят вот так:

Помогает закрепить теорию, да, но вводить код с телефона — это пиздец геморрой. Кнопочки снизу помогают, конечно, я рад что разработчик их предусмотрел, но даже с ними — во-первых, нужно еще своими сардельками натыкать нужный участок кода, а во-вторых, у меня (и судя по отзывам у большинства) багается ввод тегов, удаляя первое слово на строке. Кое-как, но сделал все задания.

CSS

Далее идет раздел CSS и он сильно больше раздела HTML, как по количеству блоков, так и по наполненности внутри них. Постараюсь покороче.

Нам рассказывают что такое Каскадные таблицы стилей, как они взаимодействуют с элементами в вёрстке и как связать структуру документа HTML и стили из документа CSS.

Разбираем синтаксис CSS — правила, селекторы, свойства и их значения. Нас сразу знакомят с тремя базовыми типами селекторов — по тегу, по классу и по id.

Еще знакомят с объединением селекторов в правилах — p.alert {} читается как «только <p> с классом date», и иерархией селекторов указываемых в правилах — header a {} читается как «все <a> внутри <header>».

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

Также затронули тему приоритетов селекторов — по id > по классу > по тегу, и несколько советов по избеганию конфликтов свойств.

Рассказывают как работать с цветом в CSS — цветовые модели rgb(), rgba(), hsl(), hsla() и hex. Последнюю используют чаще всего.

Далее прошлись по теме единиц размера — пиксели, проценты и em/rem. Именно отсюда я наконец понял, как работает em — это относительная единица зависящая от font-size элемента. На примерах просто чудесно показано как ее можно использовать, например, для интерлиньяжа.

Целый отдельный блок посвящен текстовым свойствам:

• семейства шрифтов font-family и применение списка шрифтов;
• свойство font и его производные — размер font-size, «стиль» текста font-style, толщина font-weight и вариант написания font-variant;
• свойство высота строки line-height которое тоже может входить в font;
• отдельно разобраны свойства выравнивания текста text-align, добавления линии к тексту с помощью text-decoration и малоприменимое свойство text-indent смещающий первую строку текста;
• упомянуто свойство text-shadow позволяющее задать тексту тень, но даже на примере видно, что это очень спорное свойство, следует использовать только когда точно знаешь зачем.

Следующий блок посвящен стилям блочных элементов. Начали с фона — как задать цвет, как поместить на фон картинку, также разобрали градиенты, которые формально тоже картинка и задается через background-image. Также разобрали background-position и -repeat.

Далее для меня интересный урок, посвященный свойству display. До этого я использовал его только в случае, когда мне надо было что-то скрыть display:none, но с помощью этого урока стало понятно, что иногда можно, например, использовать семантически строчный элемент в виде блока и как раз display нужен для этого. К display:none прибавился visibility:hidden и в уроке объяснили их разницу.

Немного объяснили работу свойства overflow и почему не стоит про него забывать, особенно если работаешь с фиксированными размерами.

Далее несколько уроков посвящены свойствам border, margin и padding. По моим ощущениям эти свойства хоть и делают разные вещи, находятся в одной условной группе, отвечающие за границы блока. С ними любой верстальщик встречается, наверное, с первого же дня.

Еще один урок посвящен «сокращенным» свойствам — это когда не
margin-top: 10px, а margin: 10px 0 0 0. И хорошо объяснили, как работает порядок значений в подобных свойствах.

Следующий блок затрагивает тему «потока». Тема, на самом деле, объемная и важная, но если вкратце это три правила, действующие по умолчанию (т.е. если не задано иное) на документ:

• Блочные элементы гибкие и адаптируют свою компоновку в зависимости от окружающих факторов.
• Все элементы идут в порядке, заданном в коде — сверху вниз.
• Порядок наложения элемента напрямую зависит от вложенности — вложенный элемент появится поверх родительского.

Далее уроки посвящены как раз тем свойствам, которые могут нарушать эти правила — это position и float. С помощью position: fixed, например, фиксируют
сверху плашку <header> с лого, меню и т. д. Значение relative позиционирует элемент относительно текущей позиции, а вот absolute я, честно говоря, до сих пор не понимаю. Нужна практика, видимо.

Про float написано, что это «море возможностей и проблем», но для меня его возможности пока туманны. По сути, это параметр обтекания текста вокруг заданного элемента. Я бы понял если мы верстали журнал, но сайты… в общем, видимо, нужна практика!

Последний блок называется «Продвинутый CSS» и первой здесь идёт, на мой взгляд, очень крутая штука — псевдоклассы. В уроке, конечно, далеко не все — :hover,:visited и :focus на затравочку, про которые, наверное, знает даже новичок, и интересные :fist-child,:last-child и nth-child, про которые я узнал отсюда.

Продвинутый блок в принципе мне показался наиболее интересным, далее в нём детальнее разобрали градиенты — линейный linear-gradient и радиальный radial-gradient и их «ключевые слова» — читай как свойство свойства.

Далее идет просто охренительно интересные блоки про переходы transition, анимацию animation, трансформацию transform и специальные функции (?) анимации @keyframes которые используются в них. Я как бы знал про это всё, но до этого взаимодействовал только с переходами. Обожаю анимацию, сам балуюсь в After Effects и теперь обязательно сделаю что-нибудь в чистом CSS!

Финальный урок в блоке про так называемые медиа-запросы @media () — это, наверное, главный инструмент адаптивной вёрстки и/или верстки для разных устройств. По своей сути это блок стилей, которые подключаются только при определенной ширине экрана или в редких случаях, высоте, ориентации и разрешении экрана устройства.

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

Sass

Никогда до этого не пользовался препроцессорами CSS и было очень интересно про них почитать. Здесь упоминают три — Less, Sass и его дополнительный или упрощенный (?) синтаксис SCSS.

Автор не стал углубляться в разницу между ними, но написал, что SCSS просто легче учить. Поверим на слово, хоть с чего-то надо начать.

Препроцессор Sass дает несколько возможностей, которые упрощают жизнь при работе с CSS:

• Можно создавать переменные — $yellow: #fce473;
• Правила CSS можно вкладывать друг в друга .block { a { ... } };
• Можно создавать примеси @mixin в которые записываются наборы часто используемых свойств и уже их вкладывать @include в селекторы;
• Можно использовать расширения @extend которые позволяют наследовать свойства из другого селектора или специального %заполнителя.

В курсе поверхностно прошлись по всем этим опциям, но даже так явно видно, что писать на препроцессорах значительно удобнее и быстрее. Главное не запутаться по началу в создаваемых абстракциях.

Итог

На этом все, приложение полностью пройдено, курс завершен. На мой скромный взгляд — полезная штука. Для начинающего, кто хочет хотя бы понять «Что это за ХТМЛы ваши» и как они связаны с созданием сайтов будет очень полезно, наглядно, интерактивно.

Маловато практики, но её отсутствие в этом приложении компенсируют другие приложения автора, к ним потихоньку и перейдем.

«Самоучитель HTML»

Честно говоря, после прохождения «Основ», этот самоучитель оказался немного разочаровывающим. Я, конечно, сам не знаю чего ждал, но по своей сути это немного по другому структурированный раздел HTML из «Основ».

Большая часть блоков — это поделённые на части одноименные уроки из «Основ». Да, там немного больше текста и количественно больше тестов, но в целом тоже самое.

Но, справедливости ради, отмечу предпоследние два блока — про разделы и формы. Здесь действительно плотнее прошлись по всем структурным элементам и всевозможным полям в формах, плюс немного затронули саму работу форм.

Зато практика здесь есть в каждом блоке и её достаточно дофига — 136 практических задания, если я не сбился при подсчете. То есть более чем в два раза больше (почти 30 из них, кстати, в Формах).

По итогу — приложение прошел чисто для галочки, потому что было время. С другой стороны «повторение — мать учения» и практики сильно больше. Короче, двоякое впечатление.

Но если рассматривать его отдельно, то самоучитель отличный, жаль у них нет такого же по CSS.

«Практика по HTML и CSS»

Более чем на половину состоит из практики по HTML, которая полностью взята из «Самоучителя», поэтому смело пропускаем их и проходим только практические задания по CSS.

По смыслу это такие же задания, что и в HTML, только теперь надо дописывать или исправлять код в CSS. Однако, в заданиях есть моменты, которые, например, в тех же «Основах» не упоминались.

К примеру, в «Списках» я встретил задание с применением псевдоэлементов ::after и ::before, которые отвечают за стиль и/или наполнение после или перед указанным элементом. До этого я их, естественно, встречал, но не пользовался, поэтому про свойство content и вообще, как выполнить задание мне пришлось гуглить.

Затем в «Таблицах» встретил задание на котором завис, причем по двум причинам. Во-первых, формулировка задания — написано, блин, «Задайте выравнивание таблицы по центру» — первое о чем я подумал, это выравнивание текста, то бишь text-align. Но нет, не текст имелся ввиду — окей, мои проблемы, что я не так подумал.

Во-вторых, я в общем-то не знал, как выровнять объект по центру без использования внешнего div’а и пытался перебрать все возможные align’ы, в итоге уже с помощью всемогущего гугла, опять же, нашел про margin:auto и все-таки победил задание. Тут можно оценить уровень моего дилетантства.

Следующий затык произошел в «Фонах», нужно было задать полупрозрачный фон с помощью rgba(). Казалось бы, легко, но приложение со мной не согласилось.

Здесь дело в свойстве backgroun-color — почему-то приложение требовало указать не его, а  комбинированное свойство background. Тут, я считаю, уже косяк приложения, я чисто случайно обнаружил решение в одном из следующих заданий.

Потом идут блоки «Трансформации» и «Анимации» с которыми у меня проблем не возникло, уж очень мне эта тема зашла. А напоследок был для меня крайне странный блок «Многоколоночная вёрстка». Имеется ввиду свойство column-count, который разделяет текстовый блок на колонки, как в журналах. Я честно думал, что это делается через отдельные блоки, а оно вон как.

На этом всё, поздравлений в конце ты не получаешь, поэтому похвалиться нечем. Приложение было би идеально совместить с «Основами» — получился бы крутой самоучитель с практикой во всех разделах.

Остальные приложения

Про остальные приложения из списка напишу вкратце, потому что они представляют собой не самоучители, а либо справочники, либо немного более подробно написанные статьи по HTML и CSS.

«HTML и CSS на примерах»

Приложение представляет собой большой набор статей, составленный почти по той же структуре, что и в остальных приложениях выше. Сами статьи действительно намного подробнее чем уроки в «Основах» и почти к каждому свойству, а иногда даже значению есть свой пример кода и результата.

Однако, здесь нет тестов, которые «проверка знаний», и практики. То есть всё приложение — это именно учебник, причем он немного сложнее чем «Основы».

«Учебник по CSS»

Из названия следует описание — здесь также очень подробные статьи, практически на все основные аспекты CSS. Из наиболее важного:

• Затронута и подробно разобрана тема наследования, значения inherit, initial и unset, с примерами как они работают;
• Достаточно подробно разобрано само «каскадирование» в CSS и как в нем работают уровни приоритета свойств или специфичности, включая опцию (или как это назвать?)! important.

Немного, кстати, структура блоков отличается от всех вышеуказанных приложений. Здесь блоки посвящены не свойствам определенных сущностей, а скорее логике и синтаксису CSS. Вообще это одно из наиболее полезных приложений оказалось.

«Викторина по HTML»

Тут даже особо ничего и не напишешь — это почти копия тестов из приложения «Самоучитель HTML», но здесь, по сути, только они и есть, без уроков и примеров. Я все проходить не стал, т. к. там явно повторяются вопросы.

«CSS Playground»

Единственное приложение на английском языке, точнее как такового текста там нет вообще. Это своего рода справочник по большому количеству свойств CSS с интерактивными примерами разных значений этих свойств.

Можно потыркать на разных свойствах values и наглядно посмотреть изменения. Правда, некоторые свойства либо не работают совсем, либо работают очень всрато, скорее всего из-за телефона.

Также тут, естественно, далеко не все свойства. Штука сама по себе интересная, но я не могу себе представить, что с ней делать. Оставить как справочник - зачем он на телефоне? Разработка явно ведётся с десктопа и все изменения и так можно посмотреть наглядно. Хотя я, наверное, уже придираюсь.

Итог

По поводу приложений – сразу скажу, что я понимаю почему их несколько, скорее всего дело в релевантности заголовков к популярным запросам в AppStore и Play Market по теме обучения этим вашим фронт-эндам. И схема в общем-то рабочая.

Другой вопрос — надо ли их все проходить? Конечно нет. На мой взгляд новичку хватит «Основ» и дальше уже курить YouTube или какие-либо курсы. Если хочется прям основательно поковыряться в телефоне, то лучшая комбинация это:

1. «Основы HTML и CSS»;
2. «HTML и CSS на примерах»;
3. «Практика по HTML и CSS».

Остальные скорее нет, чем да, кроме, пожалуй, «Учебника по CSS» — его можно четвертым поставить.

У разработчиков есть сайт с различными курсами, оставлю на них ссылку:
https://webref.ru/

Возможно, как-нибудь пройду их курсы там.

И наконец я на финишной прямой! Я эту статью писал отрывками - начал еще аж в Феврале, сегодня же уже Апрель. Многострадальная статья получается, поэтому разные части могут быть по разному написаны - мне сейчас уже лень что-то редактировать.

Огромное спасибо тому, кто дочитал эту гига-колбасу до конца или хотя бы пролистал. Я говорю себе, что прежде всего делаю это для себя, но всегда приятно если хоть кто-то обращает внимание. :)

Много перелинковок оставлять не буду, т.к. с htmlacademy я уже конкретно пролетел, оставлю только о себе:

Привет, я фрилансер-самоучка – статья обо мне, почему я завел блог.

Остальные статьи можно посмотреть у меня на главной странице блога.

Также я завел себе несколько соц. сеток, в надежде найти тех, кому это будет интересно и тех, кто также как и я занимается самообучением. Кстати, вполне не безрезультатно!

Мой Twitter
Мой Telegram
Мой Паблик ВК

Заходите куда удобно вам и подписывайтесь! Еще раз спасибо за внимание!