1526

Перевел интерактивные уроки "Базовый курс HTML"

Материал для новичков, кто хочет освоить HTML. Здесь есть около 30 интерактивных уроков, переведенных на русский: https://freecode.academy/learn/sections/ck4h36qjt0hoq0782jj6...


То есть это не просто теория, но и сразу выполнение заданий.


P.S. на самом деле там много и уроков и по другим разделам веб-разработки, но они пока в процессе перевода. О их готовности буду сообщать отдельно. А вообще уроки взяты с https://www.freecodecamp.org/, но перевод там машинный, так что часто вообще полная дичь. Без ручного перевода будет не обойтись.

Лига программистов

2.1K постов11.9K подписчиков

Правила сообщества

- Будьте взаимовежливы, аргументируйте критику

- Приветствуются любые посты по тематике программирования

- Если ваш пост содержит ссылки на внешние ресурсы - он должен быть самодостаточным. Вариации на тему "далее читайте в моей телеге" будут удаляться из сообщества

141
Автор поста оценил этот комментарий

Люди, ну откуда в Вас столько злости. Человек ни денег у вас просит, ни лайкнуть какую-то муть или подписаться. Потратил время, решил поделиться с людьми,  может кому интересно. Будьте добрее, а важность показывайте добрыми делами. Автору большая благодарность.

раскрыть ветку (1)
38
Автор поста оценил этот комментарий
Спасибо на добром слове! 😊
5
Автор поста оценил этот комментарий
Да как вы посмели спорить с ПРОФИ?!
раскрыть ветку (1)
9
Автор поста оценил этот комментарий

Так он в каждый мой топик приходит и спор начинает :)

показать ответы
9
Автор поста оценил этот комментарий

Одни люди делают и распространяют знания, а другие сидят на диване и подпивас вопрошают "а зачем?")

раскрыть ветку (1)
8
Автор поста оценил этот комментарий
Вся суть)))
6
Автор поста оценил этот комментарий

Так у него это только начало. Дальше он собирается JS переводить и обещает на следующей неделе выложить перевод(во всяком случае выше в комментах об этом говорит). Так что все правильно, кто будет начинать изучение с JS или с CSS пропустив HTML?

раскрыть ветку (1)
7
Автор поста оценил этот комментарий
Всё так. CSS вводный курс почти уже закончил переводить. Поддержка пикабушников придала мотивации)))
показать ответы
71
Автор поста оценил этот комментарий
Почитал комментарии сверхпрограммистов
Почитал комментарии о важности английского
После всего этого только еще больше хочу сказать спасибо автору за его труд.
раскрыть ветку (1)
19
Автор поста оценил этот комментарий
Приятно)))
Автор поста оценил этот комментарий

За что мне любить человека, который вредит мне и всей индустрии?

Я конечно понимаю, что для себя можно как угодно писать, но у меня бы такой код не приняли. Заменил бутстрап на это.

Тут речь не про оформление.

Иллюстрация к комментарию
Иллюстрация к комментарию
раскрыть ветку (1)
21
Автор поста оценил этот комментарий

Не слишком ли вы много на себя нагребаете, чтобы судить о вреде всей отрасли?)))


Подсказываю: это результат работы styled-components https://styled-components.com/

И есть специальный плагин для вебпака, который легко отключает техническое свойство displayName. https://styled-components.com/docs/tooling#better-debugging


В результате форгируются очень короткие className.


А на моем личном сайте мне эти технические класснеймы нужны, потому что я часто лезу в исходный код страницы и мне так проще понимать каким компонентом сгенерирован код (собственно, displayName и был придуман для отладки).


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


То же мне, герой.

показать ответы
10
DELETED
Автор поста оценил этот комментарий

Автор, ты ведь хорошо владеешь английским? я бы ооооочень тебе рекомендовал переводить не вот это, а курсы на Udemy, а именно https://www.udemy.com/user/jonasschmedtmann/ , хоть я и читаю одновременно англ титры, но русский бы ооочень помог. А в каком виде, в виде текстов или еще чего это уже вам решать, но качество контента там просто топ

раскрыть ветку (1)
6
Автор поста оценил этот комментарий

1. Нет, я не очень хорошо владею английским.

2. Я не вижу смысла в простом переводе. Как отмечалось здесь же, на том же MDN (https://developer.mozilla.org/ru/) полно годного материала. Так же очень много материала здесь: https://learn.javascript.ru/

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

3. Я не приемлю платный материал (у вами же представленного автора бесплатный только вводный курс, остальное платное).

показать ответы
1
DELETED
Автор поста оценил этот комментарий
Но всё же не все так быстро осваивают материал.

Как эти люди потом осваивают реакт? Не издеваюсь, интересно)

раскрыть ветку (1)
6
Автор поста оценил этот комментарий

Вот так. Просто кто-то год учится, а кто-то три.

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


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

показать ответы
DELETED
Автор поста оценил этот комментарий
Я имел в виду, что весь хтмл за одну методичку учится. А вот все остальное всю остальную жизнь))
раскрыть ветку (1)
6
Автор поста оценил этот комментарий
Есть в этом рациональное звено. Но всё же не все так быстро осваивают материал. Кому-то больше усилий приходится прикладывать. Вот так по чуть-чуть... Хорошо, что у всех есть выбор и каждый сам себе выбирает где учиться.
показать ответы
DELETED
Автор поста оценил этот комментарий

Кому в 2021 нужны уроки хтмл чтобы выучить три тэга?)

раскрыть ветку (1)
11
Автор поста оценил этот комментарий
Цель так-то Реакт. Но как известно, результат работы реакта - HTML. Так что нужен. И CSS нужен. Если не понимать как работает HTML, то о какой фронт-разработке вообще может идти речь?
показать ответы
4
Автор поста оценил этот комментарий

был бы очень благодарен за JavaScript

раскрыть ветку (1)
10
Автор поста оценил этот комментарий

На следующей неделе будет.

показать ответы
35
Автор поста оценил этот комментарий

Автору респект за труд, душнилам пожелаю геморроя.

раскрыть ветку (1)
10
Автор поста оценил этот комментарий
За респект спасибо:)
0
Автор поста оценил этот комментарий
А какие ещё курсы есть? Малым дам пусть пробуют
раскрыть ветку (1)
10
Автор поста оценил этот комментарий

Курсов-то там не мало https://freecode.academy/learn/sections

Но их все надо переводить. Почти закончил CSS вводный курс переводить https://freecode.academy/learn/sections/ck4h36qjt0hor0782m41..., затем будет вводный JavaScript и затем Реакт. В принципе, уже сейчас могут пробовать HTML. Если им зайдет, то как раз по этому пути и пойдут.

показать ответы
Автор поста оценил этот комментарий

А я поддержу. Зачем? В разработке абсолютно нечего делать без английского. Понятно, что яндекс карту к лендингу можно прикрутить по русскоязычной инструкции. А дальше что? Когда понадобится посерьёзнее задачки делать.

раскрыть ветку (1)
10
Автор поста оценил этот комментарий

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


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


И еще момент: один из моих первых наставников был дядька с более 25 лет стажа (это уже в 2007 у него было столько стажа). Он английский в принципе не знал. Это ему не мешало программировать все, что только программируется.

показать ответы
DELETED
Автор поста оценил этот комментарий
Бесполезной фигней заниматься.
раскрыть ветку (1)
16
Автор поста оценил этот комментарий

Шикарное экспертное мнение :)

Ответ простой: для того, чтобы.

Не тратьте свое время зря, пройдите спокойно мимо.

17
Автор поста оценил этот комментарий

Я аж напрягся: 30 уроков html это не шутка: можно и SASS и LESS изучить и БЭМ и все медиа. Но оказалось все проще: урок n - нумерованные списки, урок номер n+1- ненумерованные списки.  И так весь материал.

раскрыть ветку (1)
26
Автор поста оценил этот комментарий

В топике сразу написано: материал для начинающих. Даже если это было бы 30 академических часов в ВУЗе, вряд ли бы начинающий за эти 30 часов успел пройти основы HTML, CSS, да еще и LESS/SASS. А БЭМ - так это вообще не технология, а методология, которая не является необходимой (и тем более бесполезной в рамках css-in-js).

показать ответы
0
Автор поста оценил этот комментарий

Тот, кто уже изучил HTML по другой сотне-двум существующих переведенных, или вообще написанных на русском изначально, курсов. Я не говорю, что его не надо знать, я сказал, что курсов по нему и так хватает. И если курсы по JS, да черт с ним, даже по CSS, в 2015 и 2021 могут реально отличаться, то вот HTML за эти 5-6 лет не поменялся по сути.
На русском нет, например, толковых материалов по Solidity, по разработке dApp,  в этих сферах недостаток специалистов и высокие зарплаты, но зато есть десятки курсов по html, где рассказывается по сути одно и то же. Не поймите меня неправильно, я только за приток новых специалистов в сферу, но я бы направил усилия по переводу обучалок в другое русло. Фундаментальный подход - это хорошо в вакууме, но в реальном мире потратить ресурсы на то, что уже сделано десятки раз до тебя - имхо бессмыслица.

раскрыть ветку (1)
4
Автор поста оценил этот комментарий

Вы просто не видите всей картины. Прочитайте внимательно вот это: Освойте профессию Fullstack Developer за 3 дня (на самом деле нет))))

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

Это так, очень коротко.

6
Автор поста оценил этот комментарий
Иллюстрация к комментарию
раскрыть ветку (1)
4
Автор поста оценил этот комментарий

10 шакалов из 10)))

Но мысль ясна.

1
Автор поста оценил этот комментарий

Да он давно искал что-то подобное по JS+HTML, а с английским ему даже удобнее работать, т.к. он переводчик XD

раскрыть ветку (1)
4
Автор поста оценил этот комментарий
Ну я так и понял. В целом я сам всех убеждаю, что надо английский прокачивать, без него в программировании никуда. Но речь же о новичках. Им надо для начала попробовать. Какой смысл изучать английский, если ещё не ясно, надо им будет или нет. Сейчас им хоть что-то попробовать. Но с тем ломанным переводом эти первые шаги сделать очень сложно.


Вот, как вам такой пример?


UPD: К слову, на самом freecodecamp.org даже нельзя выбрать русский язык, там он не доступен.

Иллюстрация к комментарию
показать ответы
Автор поста оценил этот комментарий

Зачем мне это делать? Ты ещё скажи риелторам создавать других риелторов.

Элементы h1 часто используются для основных заголовков, а элементы h2 обычно используются для подзаголовков. Существуют также элементы h3 , h4 , h5 и h6 для обозначения разных уровней подзаголовков.

У тебя уроки в стиле скопируй-вставь.

Как думаешь, к чему такой урок приведёт? Для основных заголовков. А вот списки новостей, там каждый заголовок основной. Где, что он должен быть один на всю страницу?

раскрыть ветку (1)
10
Автор поста оценил этот комментарий
Ааа, ты из серии "Я тоже могу, просто не хочу".
Дальнейший диалог завершён за неимением смысла.
показать ответы
Автор поста оценил этот комментарий

Сказал бутстрап-мастер

раскрыть ветку (1)
10
Автор поста оценил этот комментарий

У меня персональный хейтер появился? :)

Нет, я бутстрап не юзаю уже несколько лет. Сейчас в основном styled-components. И еще раз: я все-таки больше бэк, чем фронт, так что оформление - это не мое.

показать ответы
4
Автор поста оценил этот комментарий
Будет любопытно, спасибо.
Только вот со смарта сайт выглядит шикарно, конечно =)
Иллюстрация к комментарию
раскрыть ветку (1)
6
Автор поста оценил этот комментарий
Да, этот раздел совсем не адаптивный:) Но мне и не известны программисты, которые с телефонов программируют (хотя может они и есть). В общем, адаптивка здесь совсем не главная функция, есть задачи важнее. Но исходный код сайта в открытом доступе https://github.com/freecode-academy/freecode.academy
Есть желание исправить? Вери велкам!
показать ответы
2
Автор поста оценил этот комментарий
Ты прежде чем тс в говно коде уличать дай ссыль на свой гитхаб.
раскрыть ветку (1)
3
Автор поста оценил этот комментарий

Так просили уже #comment_215866329

Оказалось, с нами гуголь на связи.

DELETED
Автор поста оценил этот комментарий

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

раскрыть ветку (1)
3
Автор поста оценил этот комментарий

Нет, реакт сам по себе не сложен, тем более сейчас с функциональными компонентами стало сильно проще (практически перестали требоваться навыки ООП).

раскрыть ветку (1)
3
Автор поста оценил этот комментарий

Я могу быть не объективен в своей оценке, но все же.

1. Зарегистрировался. Результат? Основная часть страниц стала тупо рекламой.

2. Где список всех пользователей?

3. Где все обсуждения? Нет их, ибо обсуждения через сторонний сервис Discuss.

И еще много моментов, которые для меня имеют значение.


В общем, тут много всего того, чего я как раз пытался избегать, и много нет того, что я пытался сделать (что-то уже сделал, что-то в процессе). Но опять-таки, каждый выбирает себе сам. Может кому-то такое ОК.

Иллюстрация к комментарию
Иллюстрация к комментарию
Иллюстрация к комментарию
Иллюстрация к комментарию
Иллюстрация к комментарию
Автор поста оценил этот комментарий

без английского будет не обойтись

раскрыть ветку (1)
3
Автор поста оценил этот комментарий

Еще раз, но коротко: когда пойдут в углубленный уровень, тогда и английский будут прокачивать.

7
Автор поста оценил этот комментарий

Спасибо за ссылку на оригинал - скинул товарищу, он порадовался =)

раскрыть ветку (1)
3
Автор поста оценил этот комментарий

Я не скрываю первоисточника.


скинул товарищу, он порадовался =)
Можно узнать, чему именно порадовался?

показать ответы
DELETED
Автор поста оценил этот комментарий
Все понятно кроме одного. Зачем?
раскрыть ветку (1)
9
Автор поста оценил этот комментарий

Зачем что именно?

показать ответы
Автор поста оценил этот комментарий

Ты меня решил фреймворками удивить? Хочешь сказать, что я вот этот "супер-сложный сервис" перепишу без фрейма и по нормальным правилам, он будет работать "хуже и медленее"? чта?

Я не говорю, что они плохо делают, это тоже решение. Также как и какой-нибудь конструктор сайтов.

Моё утверждение - ты плодишь не пользующихся гуглом.

Последствия твоих действий вредят всем, кроме тебя.

раскрыть ветку (1)
7
Автор поста оценил этот комментарий

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

показать ответы
Автор поста оценил этот комментарий

Я вижу, что ты используешь.

Знаешь почему отказываются от маленькой библиотеки бутстрап?

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

p.s. Зачем мне плодить тех, кто не умеет пользоваться гуглом?

Писцы по итогу меньше получает, а люди тратят время и деньги.

Обучение процесс бесконечный. Себя бы обучил, а не других "основам html". Куда же они без тебя.

раскрыть ветку (1)
9
Автор поста оценил этот комментарий

Говорю же, потом мне за вами переделывать
Ржу в голосину! Да ты прям спаситель Мира!))))

Блин, кинь ссылку на свой гитхаб-аккаунт, хоть гляну твой мегакод)))

показать ответы
Автор поста оценил этот комментарий

За что мне любить человека, который вредит мне и всей индустрии?

Я конечно понимаю, что для себя можно как угодно писать, но у меня бы такой код не приняли. Заменил бутстрап на это.

Тут речь не про оформление.

Иллюстрация к комментарию
Иллюстрация к комментарию
раскрыть ветку (1)
5
Автор поста оценил этот комментарий

Вы, видимо, еще не в курсе, что на дворе 21 год 21 века. Сейчас несколько другие технологии используются, нежели, вероятно, в вашем прошлом. Давным давно уже в порядке вещей бить единый бандл на отдельные части (и гугл это рекомендует). Если бы это был сайт-визитка, то можно было и все в кучу запихать, вес не большой. Но здесь какой-никакой, но все-таки сервис. Здесь много разделов и страниц есть, которые вы сразу и не заметите. И если все это фигачить в один общий бандл, то пользователи с медленным интернетом будут ооочень долго ждать загрузки....


А еще есть PWA, слыхали про такое?


В общем, еще для справки: основу не я придумал, а взят довольно популярный на сегодня Next.JS https://nextjs.org/

И они привлекли уже не один лям бачинских на этот проект.

Если вы считаете, что они все очень плохо делают, идите им сообщите об этом. Хотя не думаю, что они вас будут слушать.

Иллюстрация к комментарию
показать ответы
Автор поста оценил этот комментарий

ТС, я не для доебки, мне интересно. Я знаю HTML и CSS, но как на этом сегодня можно заработать? Все же хуярят визуальными редакторами, не приходя в сознание.

раскрыть ветку (1)
2
Автор поста оценил этот комментарий

Все же хуярят визуальными редакторами, не приходя в сознание.
Вы, вероятно, имеете ввиду всякие конструкторы сайтов? Ну да, есть такие. Но это не львиная доля коммерческой разработки. Вы можете себе представить, что какой-то крупный банк возьмет что-то типа тильды и зафигачит на нем личный кабинет пользователя, где тот платежи будет проводить? Я такое представить не могу. Банк наберет программистов со знанием React/Vue/Angular/ТвойЛюбимыйФреймворк и будет фигачить свое проприетарное решение. А для этого надо знать в том числе HTML и CSS.

показать ответы
0
Автор поста оценил этот комментарий
Это без претензий)
Просто в силу обстоятельств чаще со смартфона сижу, тем более азы для начинающих редко бывают очень объёмными
раскрыть ветку (1)
2
Автор поста оценил этот комментарий
Ну вот попробуйте с мобилы в оригинале https://www.freecodecamp.org/learn/responsive-web-design/bas...

Адаптивка да, есть. Но по-моему все равно не очень удобно учиться. С компьютера удобней.
4
Автор поста оценил этот комментарий

был бы очень благодарен за JavaScript

раскрыть ветку (1)
0
DELETED
Автор поста оценил этот комментарий
интерактивные задачи не структурированы, начало изучения хтмл почему-то в самом конце, это точно изучение для новичков?
раскрыть ветку (1)
1
Автор поста оценил этот комментарий

Это не мои проекты. За структуру и уровень материала никак не отвечаю.

Автор поста оценил этот комментарий

Для того чтобы часик поиграться с простейшим кодом достаточно открыть mdn и прочитать любые 2 главы из раздела про веб-технологии.

раскрыть ветку (1)
1
Автор поста оценил этот комментарий

Не скажите. Конечно mdn - это очень хороший источник (и я на него часто ссылаюсь, в том числе в уроках), но там нет тестов. Здесь же можно не только теорию прочитать, но и что-то написать, еще и с проверкой результата. Можно еще и вопросы позадавать.

Так что это совсем не одно и то же.

0
Автор поста оценил этот комментарий

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

раскрыть ветку (1)
0
Автор поста оценил этот комментарий
Ну так это только от вас и зависит.
показать ответы
0
Автор поста оценил этот комментарий

а на долгом пути к нормальному прогеру где можно монетизировать свои знания HTML и CSS?

раскрыть ветку (1)
0
Автор поста оценил этот комментарий

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

показать ответы
1
Автор поста оценил этот комментарий
Мне 31 год, я всю жизнь работал менеджером по продажам, более 10 лет, год как работаю юристом, но желание быть востребованным , развиваться, и изучать новые профессии-всегда присутствовало, будущее за технологиями и мне всегда было интересно освоить IT сферу, поэтому мне интересна данная тема, спасибо автору за такую работу
раскрыть ветку (1)
0
Автор поста оценил этот комментарий
Не за что! Вливайтесь. Уже же ещё несколько курсов переведено.
Перевел интерактивные уроки "React"
0
Автор поста оценил этот комментарий
Спасибо! Подписался+
раскрыть ветку (1)
0
Автор поста оценил этот комментарий

Не за что!

0
Автор поста оценил этот комментарий

С freecodecamp как-то согласован вопрос авторских прав? Они всё-таки постоянно плашечку о донатах показывают, т.е. так или иначе имеют с этого доход

раскрыть ветку (1)
0
Автор поста оценил этот комментарий

Их сайт и все уроки лежат в открытом доступе https://github.com/freeCodeCamp/freeCodeCamp/tree/main/curri... (я же не с сайта их натырил).

Уроки эти создаются сообществом. На уроки у них даже отдельная лицензия: https://github.com/freeCodeCamp/freeCodeCamp/blob/main/curri...

Если найдете там что-то, что запрещает так делать, сообщите, плиз. Я не нашел.

показать ответы
0
Автор поста оценил этот комментарий

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

раскрыть ветку (1)
0
Автор поста оценил этот комментарий
Ну вот там с этим основная проблема и связана: там описания и задания целиком переведены через автоматический переводчик, вместе с тегами. Иногда вообще не понятно что к чему.