Путь самообучения «обучающихся подонков» с нулевого веб-интерфейса

внешний интерфейс

После окончания колледжа в 2013 году я спотыкался и сбивался с пути: работал официантом в ресторане, поступил на фабрику, работал на сборочной линии, работал в службе поддержки клиентов и работал в сфере телемаркетинга. можно сказать, что опыт довольно "богатый".

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

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

Со второй половины 2016 года я действительно коснулся передка, а это уже больше 2-х лет. В начале у меня не было никакой языковой базы, я начинал с нуля, я даже не мог понять "объекты", не говоря уже об инкапсуляции, наследовании, полиморфизме и так далее.

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

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

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

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

Я очень хорошо знаю, что мои навыки не высоки, и я все еще на пути к дальнейшему обучению». Есть некоторые рекомендации для тех студентов, которые «начинают с нуля» изучать интерфейс, а не так слепы, как были. вначале вам достаточно даже небольшой помощи.

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

предисловие

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

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

  3. Интерес - лучший учитель Многим очень противна эта фраза и их вынуждает жизнь Разве не смешно говорить о интересе? На самом деле нет, спросите себя, интересуетесь ли вы технологиями, вы можете идти дальше и дольше, занимаясь тем, что вам нравится и интересно. Многие этого не понимают, но однажды вы поймете. то время. Иногда это потому, что мне это очень нравится, и я ближе всего к пользователям. То, что я вижу и что я получаю, очень интересно, и я также чувствую, что зарплата довольно высока, поэтому я чувствую, что это хорошо быть фронтендом.

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

  5. Никогда не опаздывайте, просто действуйте и придерживайтесь этого, вы убьете 80% людей, есть много людей, которые учатся сами, но мало кто упорствует. Как сказал Го Дэган, дело не в том, насколько хороша моя болтовня, а в том, что «я выжил». Начав с нуля, он стал известным гуру маркетинга. Желающие могут обратить внимание на его одноименный паблик-аккаунт «Pony Song».

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

Инструменты

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

1. WebStorm

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

2. Visual Studio Code

Бесплатные продукты Microsoft с открытым исходным кодом нравятся многим техническим специалистам.Они стали незаменимым редактором для фронтенд-разработчиков.Мощные плагины-расширения позволяют гибко создавать их любимые стили. Спасибо, что отправили вам список часто используемых плагинов и удалили их.

3. atom

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

4. Научный Интернет

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

5. Google

Перед использованием "Гугля" необходимо научиться работать в Интернете с научной точки зрения, иначе вы не сможете получить к нему доступ. Обучение использованию поиска может помочь нам решить многие проблемы. Знания человека ограничены, и только овладев навыками поиска может ли он адаптироваться к изменениям без изменений Много раз Baidu выходит Вещи очень повторяются, и самое главное, что есть много спама Ответы, которые не могут быть найдены в Baidu, легко найти здесь, и Google мой обязательный поиск.

6. Github

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

7. Stack Overflow

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

8. SegmentFault

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

9. Markdown

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

HTML статьи

После некоторых приготовлений давайте начнем наше учебное путешествие, сначала мы начнем с HTML.

HTML, называемый «языком гипертекстовой разметки», является структурной основой всей страницы и несет в себе содержимое нашей страницы.

1. Основы

  • онлайн-уроки w3school: Содержание очень простое, подходит для начинающих и имеет начальное понимание HTML.
  • freeCodeCamp: очень хороший вводный обучающий веб-сайт. Он принимает режим прохождения уровней, как и игра, в которой нужно сражаться с монстрами и улучшать. Это очень весело. Те, кто готов учиться самостоятельно, могут попробовать.

2. Расширенный

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

CSS-статьи

HTML несет в себе содержимое страницы, но иногда оно бывает слегка однообразным и «некрасивым». Роль CSS заключается в том, чтобы добавить к этому содержимому стили, точно так же, как красивая женщина должна иметь красивое пальто, чтобы украсить его, чтобы быть красивее», люди полагаются на одежду, полагаются на седло». Содержание веб-страницы также должно носить красивое пальто, чтобы привлечь пользователей. А CSS делает украшение.

1. Основы

2. Расширенный

книги:

Демистификация CSS: Очень рекомендуемая книга по CSS, вы можете научиться многим малоизвестным навыкам.

Онлайн серия:

  • MDN CSS: и HTML являются документацией сообщества MDN, качество гарантировано.
  • Соглашения о кодировании HTML и CSS: овладейте некоторыми навыками кодирования, чтобы писать более качественный и качественный код.
  • Серия CSS Учителя Да Мо: Г-н Да Мо обладает очень глубоким пониманием CSS и богатым практическим опытом, а также является автором книги «Графический CSS3: основная технология и практические примеры».
  • Серия SASS учителя Дамо: Серия дерзких статей Учителя Да Мо.
  • Сайт SASS на китайском языке: зрелый, стабильный и мощный синтаксический анализатор языка расширений CSS, который позволяет писать CSS с использованием переменных, условных операторов и т. д.
  • Официальный сайт Стилуса: это также прекомпилятор CSS, но в нем отсутствуют некоторые символы, что делает CSS более кратким и освежающим.
  • HTML5 и CSS3: подробно объясните HTML5 и CSS3.

Очки знаний:

JavaScript-статьи

С HTML и CSS веб-страницы имеют контент и стили, но взаимодействие с пользователями будет недостаточным, и весь контент будет лежать там тихо и мертво. Это как красивая женщина, одетая в красивую одежду и стоящая перед тобой на месте, не кажется привлекательной, но если она поет, танцует и подмигивает тебе, ее действительно невозможно остановить. JavaScript предназначен для добавления такого «поведения» на веб-страницу.

Краткая история Javascript: Вы можете просто понять происхождение разработки JavaScript.

1. Основы

книги

  • Полное руководство по JavaScript (6-е издание): Широко известная как "Rhino Book", классика JS, обязательная книга для улучшения навыков JS, все мои базовые знания JS выгрызены из этой книги, может быть немного сложно читать в начале, но как пока вы придерживаетесь его Полный урожай.
  • Расширенное программирование с помощью JavaScript (3-е издание): широко известная как «Красная книга», супербестселлер по JavaScript, вся книга описывает различные компоненты реализации языка JavaScript, ECMAScript, DOM, BOM, события, объектно-ориентированный и т. д., выньте ее в любое время. и прочитайте его, и изучите JS более глубоко.

Онлайн сериал

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

2. Расширенный

Статьи о TypeScript

Надмножество расширений ES6, строгие типы данных, лучшее обслуживание, подходящие для разработки крупномасштабных проектов, некоторые люди говорят, что это будущая тенденция развития, вы хотите понять?

Jquery статьи

Хотя сейчас эра одностраничных приложений, есть мощные фреймворки, такие как React и Vue, которые можно использовать, но есть также некоторые старые проекты, которые необходимо поддерживать, и в начале обучения хорошо бы используйте его для двух простых приложений, вы можете относительно понять основное использование, это позволяет вам лучше и удобнее работать с DOM. Но глубокое обучение не рекомендуется.

Аякс статьи

Когда вы освоите HTML, CSS и JavaScript, вы можете попробовать сделать некоторые проекты самостоятельно, и в проекте обязательно будет взаимодействие с данными.В настоящее время используется Ajax.

NodeJS и модульность

Появление NodeJs вывело фронтенд-разработку в новую область и породило профессиональных Node-инженеров. Мало того, Node играет важную роль в модуляризации и инжиниринге фронтенда, поэтому необходимо понимание. можно углубиться.Обучаясь, вы можете развиваться до full stack инженера.

Рамочные статьи

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

Сейчас возможности фреймворка - один из необходимых навыков и трендов для фронтенд-разработчиков. "Конечная цель" у трех фреймворков одна и та же. Я не думаю, что разработчикам нужно беспокоиться о том, какой из них выбрать для изучения. Они могут выбрать двоих из них, один из них лучший. Тем, кто только начинает, рекомендуется для начала выбрать Vue, который является относительно простым и гибким.

1. Angular

  • Angular: Официальное сообщество Angular.
  • Угловой разработчик: Сайт поддерживается г-ном Да Моцюнцю, китайским евангелистом Angular.
  • NG-ZORRO: библиотека компонентов пользовательского интерфейса Angular, разработанная Alibaba.

2. Vue

3. React

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

видео уроки

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

Графическая визуализация

С постоянно растущим объемом данных, как эффективно использовать данные - это проблема, которую рассматривает каждое предприятие, и то, что люди видят, лучше, чем чтение. Как говорится, «картинка стоит тысячи слов». Поэтому визуализация данных будет особенно важно Ниже приведены некоторые технологии, книги и библиотеки визуализации с открытым исходным кодом, которые я часто читаю.

Инжиниринг и контроль версий

1. Git

Что касается инструментов контроля версий, многие новички часто не знают разницы между git и github — это разные вещи, и их нужно четко различать.

2. Gulp

Автоматизированные инструменты сборки, сжатие и консолидация перед упаковкой и развертыванием проекта экономят время и повышают эффективность разработки.

3. Webpack

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

4. Babel

Компилятор кода JavaScript может преобразовывать синтаксис ES6 и выше в синтаксис, поддерживаемый браузером, который обычно настраивается в каркасе фреймворка.

  • Babel: Учебник на официальном сайте.

5. Качество кода

  • ESLint: Инструмент обнаружения кода JavaScript помогает нам писать более стандартизированный код.

Браузеры и HTTP

оптимизация производительности

SEO

Серия блогов

1 человек

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

  • Личный сайт Руан Ифэн: Статус учителя Руан Ифэн в реках и озерах, разумеется, блоги не только технические, но теперь Али работает.
  • Официальный сайт Ляо Сюэфэна: Учитель Ляо Сюэфэн написал много отличных серий руководств, которые стоит изучить.
  • Чжан Синьсюй: Одна из крупных коров, занимающихся фронтенд-технологиями, опубликовала книгу «Мир CSS».
  • W3cplus: Г-н Да Мо работает в Hand Tao и имеет большой опыт работы с CSS и HTML.
  • Начальная запись и расширенные учебные заметки: Самостоятельное изучение с нуля, а затем зайдите на сайт JD.com, чтобы по ходу дела записывать авторские учебные заметки.
  • шесть маленьких денденов: Мой личный блог, в котором я записываю некоторые из моих собственных выводов об обучении, личностном росте, понимании мышления, хотя я еще новичок, но я был в дороге.

2. Команда

Премиум сообщество

  • Наггетс: сообщество, которое помогает разработчикам расти, есть много качественных статей, я читаю статьи каждый день, чтобы изучать техники, и мои статьи также будут синхронизированы.
  • InfoQ: Обязательный сайт сообщества для технарей.
  • CSDN: крупнейшее в Китае сообщество по обмену технологиями.
  • Блог Парк: сообщество, ориентированное на технологии.
  • v2ex: V2EX — это место для обмена и исследования, место встречи для программистов.
  • передняя часть рагу
  • Medium: Высококачественные зарубежные сообщества нуждаются в научном доступе в Интернет.
  • Front End Nine — Руководство для начинающих 2019: «Введение в веб-интерфейсную разработку», написанное командой клиентского интерфейса Alipay.

Ресурсы проекта

  • Резюме навыков фронтенда: очки навыков и учебные материалы, которые нужны фронтенд-инженеру.
  • You-need-to-know-css: высококачественный CSS-проект, чистый CSS реализует множество распространенных и редких стилей в нашем проекте.
  • JavaScript libraries: несколько отличных библиотек JavaScript с открытым исходным кодом.
  • awesome-web-dev-books: Передний план классического списка учебников.
  • Фронтенд ТОП 100: Он в основном охватывает все опенсорсные проекты, используемые фронтендом.Думаю, достаточно собрать этот.

Общие инструменты

  • CSS Sprites Generator: онлайн-инструмент для создания изображений спрайтов.
  • Lorem Picsum: удобный временный заполнитель для изображений.
  • Md2All: Отличный текущий редактор Markdown.
  • Убо Дизайн: отличный дизайн навигационного веб-сайта, который поможет вам лучше находить информацию.
  • книжный движитель: Поиск и загрузка книг.
  • Слизь Навигация: Поиск ресурсов.
  • codePen: онлайн-инструмент для редактирования кода.
  • Iconfont: библиотека значков шрифтов Ali, поддерживает несколько форматов, загрузку изображений, использование в Интернете, SVG и т. д.
  • Can I use: Вы можете проверить совместимость браузера с помощью CSS.
  • онлайн-инструменты: Навигация по ресурсам инструментов.

Наконец

  1. Выше приведены некоторые материалы, которые я собирал в пути более двух лет.На систематизацию этой информации у меня ушло несколько дней.Надеюсь, я смогу помочь вам на пути самостоятельного изучения.
  2. Опять же, я не великий бог, и я не думаю, что технология достигла такого уровня, но я продолжу ее изучать, и не пойму неправильно все знания в ней. Вот некоторые из материалов, которые у меня есть. узнал и хочу разобраться. , чтобы спасти некоторых Xiaobai, которые не знают, как проверить информацию.
  3. Ресурсы здесь могут подойти не всем, да и не все могут понадобиться, нужно только выбрать нужные части, чем больше вещей, тем не лучше.
  4. Путь самообучения веб-интерфейсаЯ буду продолжать обновлять этот ресурс.Вы можете общаться друг с другом.Если вы считаете, что это хорошо, вы можете поставить ему звезду.
  5. Я лично также создал официальный аккаунт.Я буду публиковать новые статьи и материалы на официальном аккаунте как можно скорее.Помимо обмена технологиями,я также буду делиться собственными действиями,новыми пониманиями,инсайтами,опытом и т.д., короче , не только технологии Давай, давайте расти вместе.
  6. Отсканируйте код, чтобы подписаться на общедоступную учетную запись WeChat, и по пути вы сможете получить полный набор учебных ресурсов.
  7. Наконец, если вы считаете, что статья хорошая и вас вдохновляет, лайк — это отношение и признание.
  8. Добро пожаловать в публичный аккаунт WeChat: Liuxiao Dengdeng, больше статей о галантерее, здесь много моих историй, добро пожаловать на общение друг с другом.

Категории