Как выучить HTML/CSS/JS с нуля, без математического бэкграунда, без понятия что это такое , и соответственно без специализированного образования?
(Уточнения: этих знаний, не хватит чтобы найти работу. Это, так сказать, «скелет», «алфавит», который нужно выучить, чтобы продолжить дальнейшее обучение)
С чего начать?
Я надеюсь эта статья и ресурсы помогут вам немного сэкономить ваше время, и более правильно направить ваше время и энергию, а не бегать от ссылки — к ссылке, на какой же курс «За 2 недели готовый фронтендщик податься»?
Если бы год назад мне сказали, что учиться в такой «по очередности» моя жизнь была бы легче, поэтому я решила вам упростить жизнь. ☺️😄
В интернете очень много ресурсов, уроков, курсов, он-лайн курсов… а особенно тех, кто обещает «Frontend за 3 месяца»….
Я конечно не знаю, может и есть гении и усидчивые, кто вот просто сядет и сделает.. за 3 месяца… и найдет работу сразу после…
Этот случай, конечно же не про меня…
Я отношусь к тем людям, которые «сели — прочитали — ничего не поняли — закрыли — пошли плакать»… да -да , именно так 😄
Через месяц открыли… забыли всё, что до этого читали.. начинаем всё заново…
Но! Секрет в том, что если вы прочитаете 2–5–10–100 раз, то на 101 все-таки дойдет!!! ДА!!! Именно!! Все работает именно так 😄
Не отчаиваетесь, если вы абсолютно ничего не понимаете, если вы думаете «Зачем я туда полез?! Может это не моё?! Зачем я трачу свое время..» — это именно мои мысли, чуть ли не каждый день….😄
Но, когда видишь, что год назад ты вообще не понимал, что происходит, а сейчас ты можешь верстать «сайтики», то твоя самооценка очень даже повышается 😄.. главное, не читайте статьи об «искусственном интеллекте» и о 14-ти летней девочке, которая сделала стартап на 10000000$, и жалеет, что так поздно начала кодить…. Это всё только понижает самооценку и идешь плакать 😁
Всё же, по какой хронологии и по очередности мне все-таки удалось (не хочу говорить «выучить», я только в процессе), но вообще понять, что здесь происходит.. и что куда-зачем? 😄
Что НЕ стоит делать, если вы полный новичок и ничего не знаете об фронтенде?
Не идти на платные оффлайн курсы, которые предлагают за 1–3–6 месяцев сделать из вас программиста.
Чем короче срок, тем более сжатая программа курса и очень быстрый темп, который, я думаю 90% людям не под силу.
В описании курса, конечно же будет «Вам ничего не нужно знать, с 0 мы всему научим сами..приходите..».
Если провести параллель, то это как будто курсы языка, где вам говорят, мы выучим с вами алфавит, правописание, произношение звуков.. и вместе мы будем учиться с 0… а получается, что ты приходишь, и первым делом вам показывают фотку алфавита — запомнили буквы? А теперь давайте писать диктанты, слушать тексты и отвечать на вопросы по тексту на НОВОМ языке и общаться на новом языке… 😳 я думаю, после первого занятия вы будете в шоке, не поймете, что здесь происходит, и у вас отпадет желание туда ходить…
На таких курсах чаще 20–30 людей в группе, естественно, что за 2–3 часа (а это теория + практика) каждому «разжевывать» никто не будет, и всё, что в конце произойдет, так это — вы просто с экрана переписываете код, не вникая в него… после 3–4 занятия вы абсолютно не понимаете, что происходит.. домашку не проверяют.. вы ее и не делаете… конец курса — вы забили и не ходите на них…
(Повторяю, это мой личный опыт, возможно у кого-то другая история с оффлайн курсами)
Итог: зря потратили деньги, лучше бы купили курс (дешевле!) на Udemy или Coursera.
С чего бы я начинала, и в какой по очередности год назад… мой пример..
Так же, я сделала свои примеры и задания, на которых вы можете попрактиковаться.
- Учим основы HTML.
Как ни крути, начинаем с теории
На сайте https://www.w3schools.com/html/default.asp проходим все подряд «уроки». В конце каждого урока ест Quiz Test.
Когда чуть разобрались, что происходит, на сайте https://learn.freecodecamp.org/ проходим «Basic HTML and HTML5» уже в виде маленьких практических заданий.
Также, для теории используем MDN web docs https://developer.mozilla.org/en-US/docs/Web/HTML
Когда уже, есть представление об HTML — переходим на CodeAcademy https://www.codecademy.com/learn/learn-html
Вышеперечисленные ресурсы бесплатные, на некоторых просто нужна регистрация.
Мои примеры заданий
- Сделать самый простой сайт, чтобы разобраться с тегами.
- Сделать сайт на вашу любимую тематику. (по типу Википедии).
Все ресурсы для заданий с готовыми примерами здесь:
https://github.com/YaninaTrekhleb/learn-html-css
2. Учим основы CSS
Источники и ресурсы все те же самые, порядок такой же.
Начинаем с теории на https://www.w3schools.com/css/default.asp.
Продолжаем практиковать «Basic CSS» на https://learn.freecodecamp.org/
Почитываем https://developer.mozilla.org/en-US/docs/Learn/CSS
Учим СSS и делаем сайт на Сode Academy https://www.codecademy.com/learn/make-a-website
https://www.codecademy.com/learn/learn-css
Самое понятное объяснение flex и grid https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide-grid/
Упражнения на селекторы Diner selector — https://flukeout.github.io/
Мои примеры заданий
- Поменять цвета в шрифтах.
- Стилизация текста (шрифты, цвета, подчеркивание).
- Селекторы.
- Flex.
- Grid.
- Открыть сайт, который нравится, попытаться сделать такой же (например: блог, сайт ресторана, отеля, свадебная организация..), используя CSS.
3. Учим основы JavaScript… здесь, я мало, что могу посоветовать, так как прочно сама «в процессе» 😄.. думаю можно будет писать продолжение по JS, когда я найду работу.. 😄
Из теории и мини практики, все те же ресурсы
https://www.w3schools.com/js/default.asp
https://learn.freecodecamp.org/
https://developer.mozilla.org/en-US/docs/Web/JavaScript
https://www.codecademy.com/catalog/language/javascript
Надеюсь эта статья вам будет полезной и терпения, терпения вам в учебе! 😄 🤯
