Гастроли Вадима Макеева с докладом «HTML: The Good Parts» продолжаются.

14 марта он выступит в Киеве на конференции для JavsScript-разработчиков — JavaScript fwdays'20, где расскажет про использование тегов в HTML.

https://fwdays.com/en/event/js-fwdays-2020

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

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

Первые четыре шага такие:
1. Понять основы HTML и CSS по книжкам, Ютюбу или онлайн-тренажёрам.
2. Вникнуть в тонкости вёрстки (и завести себе Гитхаб).
3. Пройти курсы по вёрстке и/или фронтенд-разработке и разобраться в нужных инструментах.
4. Найти наставника и показывать ему свой код.

Ещё четыре шага — в нашей статье.

Выпуск №219: Отладка перфоманса, --save-dev, CSS4 и другие мечты, что такое софт-скилы и зачем их качать. В гостях Андрей Смирнов. Слушайте на Ютубе https://youtu.be/fZEvoKhsCQI, читайте на Медиуме https://medium.com/p/3e5425604f40

00:01:46 События
00:07:25 Отладка перфоманса
00:12:04 Разный --save-dev
00:18:06 CSS4, продолжение
00:30:10 Мечты о CSS
00:37:51 Софт-скилы
00:46:59 Чему учить сотрудника
01:00:45 Что такое софт и хард
01:10:05 Мягкий фронтендер

Примеры использования CSS-счётчиков.

https://ishadeed.com/article/css-counters/

Вышли два новых тренировочных макета: «Магазин запчастей» и «Дизайнерская мебель».

https://tml.io/8l7xh

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

Сайт по продаже дизайнерской мебели проще: одна страница и мало сложных элементов. В нём также есть слайдеры, мобильное меню, адаптивные интерфейсные элементы и адаптивность до мобильного разрешения.

Создание аркадной игры на ванильном JavaScript. Перевод статьи Роберто Эрнандеса.

http://odinokun.com/2020-03-02-sozdanie-arkadnoj-igry-na-vanilnom-javascript.html

Даша — мама с двумя детьми — начала изучать фронтенд в 30 лет. Уже после первого интенсива ей удалось найти работу и начать карьеру в веб-разработке. Она поделилась с нами своей историей.

Четыре способа анимировать цвет текстовой ссылки по наведению.

https://css-tricks.com/4-ways-to-animate-the-color-of-a-text-link-on-hover/

​​А вот и она! Вышла новая глава курса «Знакомство с JavaScript» — «Коллекции и свойства элементов».

В этой главе вы познакомитесь с коллекциями элементов и циклом for of, научитесь с помощью свойств получать данные и управлять элементами, сделаете всплывающие подсказки и валидацию формы.

В конце вас ждёт испытание — запрограммировать виртуальную клавиатуру 💻

Адаптация SVG фавиконки к тёмной и светлой темам браузера с помощью медиавыражения prefers-color-scheme.

https://catalin.red/svg-favicon-light-dark-theme/

Читаем первые отзывы с 27 потока «HTML и CSS, уровень 1» и вот, что пишет выпускник Илья Исаченков:

«Скажу как есть, когда-то давно, ещё в 2008–2012 годах, я учился на программиста. Но по воле случая работать по этой профессии не пошёл. Спустя 7 лет случайно встретил однокурсника, который посоветовал мне Академию. Приехав домой, я зашёл на сайт и стал читать всю информацию, которая там только есть. После этого я оформил подписку на интерактивные курсы, и прошёл первые задания.

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

Спустя месяц я оформил в рассрочку профессию «Фронтенд-разработчик» и с нетерпением ждал, когда же он уже начнётся. А пока ждал, проходил интерактивные курсы.

Если честно, то поначалу было очень сложно, и если бы не прошёл до интенсива интерактивные курсы, думаю, вообще бы не справился. Также я не пожалел, что выбрал себе очень хорошего наставника, что немало важно!

На курсе обрёл очень много знаний, которые теперь буду применять на практике. Лекции — просто бомба, всё понятно, разбирают все мелочи. Учат разрабатывать и программировать сразу правильно и со всеми последними новшествами. Огромное спасибо Академии за то, что создали такой большой и полезный проект!»

Наш выпускник профессии «Фронтенд-разработчик» рассказал, чему он научился в «Лиге А.», и как после стажировки нашёл первую работу.

https://tml.io/4yobe

Поведение отрицательных внешних отступов в CSS.

https://www.quirksmode.org/blog/archives/2020/02/negative_margin.html

​​Мы создали чат для нашего телеграм-канала — вступайте, пожалуйста. Вы можете там задать нам вопрос, оставить отзыв на наши курсы, обсудить статьи в блоге или призвать на помощь коллег, если какая-то технология непонятна.

Как сделать размытие фона в CSS с помощью одной строки кода.

https://blog.prototypr.io/how-to-make-a-background-blur-in-css-with-one-line-of-code-e446c7236e60

Четыре года назад Лера Зелёная работала журналистом и подумать не могла, что станет автором интерактивных курсов. Она точно знает, с какими проблемами сталкиваются новички, и как их решать.

1. Программирование — это не моё

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

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

- Обращайтесь к разным источникам: книгам, опытным разработчикам, статьям, видео.
- Если вам совсем не даётся тема — пропустите её и вернитесь позже с новыми знаниями и новым опытом.
- Воспроизводите примеры кода, которые вам встречаются.
- Пишите код регулярно, хотя бы по паре часов каждый день.
- Придумайте себе задачу и решите её с помощью кода. Если вам нравятся игры — придумайте простую игру и напишите её, а если увлекаетесь фитнесом — напишите свой счётчик калорий. Не переживайте, если вам кажется, что ваша программа будет не слишком серьёзной. Главное — выбирайте то, над чем вам интересно будет работать.

2. Страх сделать ошибку

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

Так что же делать:

- Будьте заранее готовы к ошибкам и относитесь к ним спокойно. Они случаются у всех, даже у опытных разработчиков.
- Сначала пишите код так, чтобы программа работала, а затем улучшайте его.
- Обязательно разбирайтесь, почему произошла ошибка: заглядывайте в консоль, гуглите, проверяйте работу программы после каждого внесённого изменения.
- Если ошибка мелкая и найти её не получается — отвлекитесь, а потом свежим взглядом посмотрите на ваш код.

3. Страх перед большими задачами

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

- Составьте хаотичный список того, что нужно сделать. Пишите туда всё, что надо сделать в вашем проекте.
- Каждую задачу разбейте на маленькие подзадачи — можно задать себе вопрос: «что нужно сделать, чтобы это появилось (заработало)?»
- Теперь нужно упорядочить хаотичный список из первого и второго пунктов. Пропишите план действий по списку. Наверняка, что-то нужно сделать в первую очередь, чтобы двигаться дальше. Например, сначала создавать базовую разметку, а потом уже навешивать обработчики на элементы.
- Начните движение по списку.
- Редактируйте план по необходимости.

И помните, чтобы научиться программировать, надо перестать бояться и начать программировать. Это работает только так и никак иначе. Не надо себя ругать и давить, если сегодня писать код не хочется и хочется сделать передышку. Это нормально: мозгу нужно время, чтобы отдохнуть и построить новые нейронные связи. Не нужно упарываться, нужно обязательно отдыхать и не требовать от себя всего и сразу прямо сейчас. Всё придёт постепенно!

Попробовать себя в программировании можно в курсе «Знакомство с JavaScript». Вы узнаете, как работает JavaScript в браузере, и научитесь оживлять интерфейсы.

Выпуск №220: Цветовая гамма, история CSS, сборка в Rome, фильм про Vue, i18n, Google Fonts, геймдев, митапы. В гостях Александр Коротаев. Слушайте на Ютубе https://youtu.be/hCe_xaglY70, читайте на Медиуме https://medium.com/p/20637b9fb1ad

00:00:57 События
00:11:39 Широкая цветовая гамма
00:15:11 Этапы развития CSS
00:20:28 Вся сборка ведёт в Rome
00:26:16 Фильм про Vue.js
00:30:59 Интернационализация
00:36:30 Юбилей Google Fonts
00:40:11 Фронтендер в геймдеве
00:58:50 Зарубежные митапы