Learn Front End UI Design 2020
1.0.0
Изучить программирование/фронтальное развитие (HTML/CSS/JavaScript)
Разработчики фронт-эндов отличаются от средних разработчиков в этом фронте-разработчиках, которые манипулируют браузерами для создания веб-страниц и другого интерактивного контента. Чтобы изучить фронтальную разработку, вы начинаете с HTML, затем CSS, а затем JavaScript. Как только вы узнаете об этом, вы можете перейти к другим вещам, таким как рамки (начальная загрузка, реагирование, угловалось, Vue и т. Д.). Фреймворки, которые вы можете начать изучать, как только вы узнаете основы трех. Рамки облегчают жизнь.
Хороший программист не должен вспоминать все. Открытый исходный код способствует веб -сайту и позволяет программистам использовать и обмениваться кодом бесплатно (посмотрите на некоторые вклад в руководства с открытым исходным кодом под «Mastering Front End»). Если вы застряли в чем -то, Google это. Вы, вероятно, найдете ответ.
Есть миллион учебных пособий. Будьте осторожны, чтобы не застрять в том, что известно как «Учебник ада», где вы просто бесконечно смотрите учебники, но никогда не узнаете ничего конкретного. Лучший способ учиться - это делать. Такие сайты упражнений пригодятся, но вы также хотите подумать о проектах для строительства. Разместите эти проекты на GitHub для вашего портфеля. Или посмотрите на Turtortials Project.
Используя инструменты разработчика Google Chrome, вы можете осмотреть код, стоящий за любым веб-сайтом, или внести изменения в жизнь. Другие браузеры, такие как Firefox, также имеют эти инструменты. Сделайте это своим лучшим другом.
YouTube - действительно отличный ресурс в целом. Все, что вы хотите знать. Это, наверное, там. Многие уважаемые программисты там, как Wes Bos. Также следите за другими разработчиками в Твиттере.
Master List YouTube - https://github.com/erikch/devyoutubelist
Важная вещь, которую нужно знать, это то, что вам не нужно знать все, чтобы получить свою первую работу или работу после этого. Программирование всегда меняется. Хорошая работа позволит вам учиться на работе, надеюсь заплатить вам, чтобы узнать кое -что, и научит вас тому, что вам еще не нужно знать.
Задайте вопросы - нет вопросов глупо. Сначала используйте Google. Если это не удается, обратитесь к другим программистам через форумы, переполнение стека, группы Facebook или Twitter. Кто -то будет рад вам помочь.
Как я узнаю, когда буду готов?
Когда вы можете создать базовый веб -сайт и иметь портфель нескольких различных проектов.
Веб -сайт со статическими и прототипами дизайна
GitHub, демонстрирующий ваш код
Если вы работаете на веб -сайте, который уже живет, вам не нужен GitHub для этого. Но они хороши для проектов, которые не живут.
Независимо от того, что вы делаете, внештатные или волонтерские проекты помогут вам получить Exp в случае, если вы не сможете пройти стажировку. Но стажировки разработчиков, как правило, открыты для людей вне школы, потому что так много людей в карьере. Вы также можете начать подавать заявку на позиции младшего уровня. Проверьте проекты с открытым исходным кодом, парное программирование и коллабов с другом.
Ресурсы программирования
(Другие списки)
https://www.womenwhocode.com/resources
http://codingheroes.io/resources/
Основы-
GitHub - онлайн -репозиторий кода для демонстрации и присоединения к проектам с открытым исходным кодом
Учебник GIT & GitHub - https://youtu.be/swyqp7iy_tc
Codepen- Исследуйте и создайте вещи из вашего браузера - https://codepen.io/dashboard/
Sublime Text - простой, бесплатный редактор кода - https://www.sublimetext.com/
VS Code- - это текущий, более продвинутый, бесплатный редактор кода - https://code.visualstudio.com/
Chrome Dev Tools - Откройте непосредственно в вашем браузере для тестирования, Diagognose и изучения веб -сайтов - https://developers.google.com/web/tools/chrome-devtools
Блог для разработчиков - https://dev.to/
Переполнение стека отлично подходит для поиска ответов и прочего, но сообщество, как известно, не дружелюбно с новичками или женщинами - https://stackoverflow.com/
Новости Front End - Оставайся в курсе - https://frontendfront.com/
Front End Focus - оставайтесь в курсе этого информационного бюллетеня - https://frontendfoc.us/
Основные темы и концепции
Как работают интернет и компьютеры-https://www.khanacademy.org/computing/computer-science/computers-and-internet-code-org#internet-works-intro
Что такое информатика? -https://www.freecodecamp.org/news/what-is-computer-programming-deafing-software-development/
Адаптивный веб-дизайн-https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/
Развитие браузера Cross - https://developer.mozilla.org/en-us/docs/learn/tools_and_testing/cross_browser_testing/introduction
Agile Методология - https://www.youtube.com/playlist?list=plwkjhjtqvabm0gpnunwf4pr4xv8i3geh-
Тест на скорость веб -страницы - https://tools.pingdom.com/
Пол Форд «Что такое код 10 000 слов» онлайн роман-https://www.bloomberg.com/graphics/2015-paul-what-is-code/
Отладка для начинающих-отладка-это процесс поиска и исправления ошибок-https://docs.microsoft.com/en-us/visualstudio/debugger/debugging-absolute-beginners?view=vs-2019
Освоение фронта
100 дней кода - Идея, стоящая за ним, солидно, рептиция, подотчетность и прогресс - https://www.100daysofcode.com/
Руководство по веб -навыкам - https://andreasbm.github.io/web-skills/
W3Schools- Изучите программирование и смотрите вверх- справочный ресурс- https://www.w3schools.com/
*Сеть разработчиков Mozilla -как w3schools, но более зрелые, более независимых обновленных сестер -https: //developer.mozilla.org/en-us/
Инструменты, которые Devs используют в 2019 году-https://ashleynolan.co.uk/blog/frontend-tooling-survey-2019-results
Дорожная карта- гид, чтобы стать фронтальным разработчиком в 2020 году https://roadmap.sh/frontend
Руководство по разработчику Front End 2020 - https://youtu.be/sppsnbqvt0k
Вопросы интервью для фронта (т.е. вы можете ответить на них?)
Вопросы и ответы для интервью с фронт-эндом-https://www.fullstack.cafe/blog/front-end-developer-interview-questions
Иллюстрированный Dev - Иллюстрация концепций разработчика - https://illustrated.dev/
Пирог с интервью - изучить CS и как решить интервью программиста - https://www.interviewcake.com/
Интервью по программированию YouTube - https://www.youtube.com/playlist?list=plwkjhjtqvablv09g3sfgrmser0jnkqmj9
Определенное руководство по содействию открытому исходному коду-https://www.freecodecamp.org/news/the-dfinitive-guide-to-contributing-to-open-source-900d5f9f2282/
Как сделать вклад - https://github.com/firstcontributions/first-contributions
Потрясающий список PR (запросы на вытягивание)-https://github.com/mungell/awesome-for-beginners
Только первые таймеры - ресурс для вашего впервые внести свой вклад в проекты с открытым исходным кодом - https://www.firsttimersonly.com/
Профи и минусы парного программирования (когда вы и товарищ по команде работают вместе по одному и тому же коду)-https://www.freecodecamp.org/news/the-benefits-and-pitfalls-ofpair-programming-in the-workplace-e68c3ed3c81f/
Системы управления контентом
WordPress- есть много рабочих мест, которые потребуют, чтобы вы узнали, как работать с ними- WordPress.org / WordPress.com
Drupal
Webflow (новее, но много разговоров с ним)
Учебные пособия и другие
Freecode Camp- Один из лучших бесплатных ресурсов, которые вы можете использовать - https://www.freecodecamp.org/
Кханская академия - имеет отличные уроки программирования и проверяйте их компьютерные науки - https://www.khanacademy.org/computing/computer-programming
CodeAcademy - любимый, но вы должны заплатить сейчас в определенный момент - https://www.codecademy.com/
Front -End Masters - Learn Front -End Development - https://frontendmasters.com/
Udemy - Проверьте их бесплатные курсы, а затем дождитесь продаж на их классах - https://www.udemy.com/courses/free/
Thinkful Вебинары- есть куча бесплатных вебинаров для начинающих- https://www.thinkful.com/webinars/
Tree House - Отличный сайт Tutortial/Portfolio/Degree, но может быть дорогой - https://teamtreehouse.com/
HACKR.IO- Учебные пособия и другое обучение - https://hackr.io/
Egghead - Учебные пособия - https://egghead.io/
LinkedInlearning
Курсера
Skillshare
Упражнения
Упражнения - изучать программирование с помощью упражнений - https://exercism.io/
Edabit - изучать кодирование с интерактивными проблемами - https://edabit.com/
Кодовые войны - ежедневные проблемы программирования - https://www.codewars.com/
HTML/CSS/JavaScript
HTML Crash Courses - https://youtu.be/pqn-pnxpavg; https://youtu.be/ub1o30fr-ee
Книга HTML и CSS - популярная книга с примерами кода онлайн - http://www.htmlandcssbook.com/
CSS Crash Course - https://www.youtube.com/watch?v=yfoy53qxeni
CSS -трюки - блог для CSS и других фронтальных разработчиков - https://css-tricks.com/
CSS Podcast- https://pod.link/thecsspodcast
Генератор CSS - быстро генерируйте CSS - http://css3generator.com/
CSS Diner - https://flukeout.github.io/
CSS GRID - https://cssgrid.io/; https://learncssgrid.com/
CSS Flexbox- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Модель коробки CSS-https://css-tricks.com/the-css-box-model/
Bootstrap - A CSS, Front -And Framework - https://getbootstrap.com/
Codrops - фрагменты крутого кодирования - http://tympanus.net/codrops/
Eloafent JavaScript - книга Читать (с практикой программирования в браузере) https://eloquentjavascript.net/eloquent_javascript.pdf
JavaScript и jQuery - популярная книга с примерами кода - http://www.javascriptbook.com/
Jslint- "lints" - это программы, которые находят проблемы в вашем коде - http://www.jslint.com/
JavaScript30 - Создать 30 различных проектов ванильных JavaScript - https://javascript30.com/
Новичок Javascript - платный курс Wes Bos - https://beginnerjavascript.com/
Just JavaScript - информационный бюллетень, объясняющий JavaScript - https://justjavascript.com/
Проекты ванильного JavaScript - +20 Plain JavaScript Projects - https://vanillawebprojects.com/
Полное javaScript Foundation Video - https://youtu.be/pkzno7mfnfg
Html за 12 минут - https://youtu.be/bwpmsssvdpk
CSS за 12 минут - https://youtu.be/0afzj1g0bie
JavaScript за 12 минут - https://youtu.be/ukg_u3cnjwi
Более продвинутый код, а также Topcis и компьютерные науки-
Разработчики Google - Учебные пособия и другие ресурсы - https://developers.google.com/
Выберите одну рамку JS, чтобы начать с (React, Angular, Vue). На самом деле не имеет значения, что вы выбираете, но некоторые компании предпочитают их другим. React является самым популярным, за которым следует угловой, а затем Vue. Не многие люди знают Vue, но на самом деле это действительно ищет. Так что, возможно, реагировать или угловать, и Vue вместе могут быть сильным выбором.
История Front End Frameworks- https://youtu.be/kzeog8ytfae
React - https://www.youtube.com/playlist? https://www.youtube.com/playlist?list=plc3y8-rfhvwgg3vayjghgnmodb54rxok3
Angular -https: //www.youtube.com/playlist? List = plwkjhjtqvablnvgkkk6aqvpajhxrrxxhts
Vue - https://youtu.be/wy9q22isx3u
Php -https: //www.youtube.com/playlist? List = plwkjhjtqvabkomsxx4hgwxbjzw4ab0cbab
Sql- https://www.khanacademy.org/computing/computer-programming/sql
API - https://youtu.be/gzvsyjdk-us
Компьютерная наука от Havard - https://www.youtube.com/playlist?list=plwkjhjtqvabmgw5fn5bqlwuug-8bdmabi
Компьютерная наука - https://www.youtube.com/playlist?list=plwkjhjtqvabn5emq3rrg8gebqkhf_5vxd
Материалы Google - https://material.io/design/
Что такое блокчейн? -https://www.freecodecamp.org/news/what-is-lockchain-and-how-does-it-work/
Доступность
Рекомендации по доступности веб -контента (WCAG) - https://www.w3.org/wai/standards-guidelines/wcag/
Контрольный список ADA (2019)-https://medium.com/@krisrivenburgh/the-ada-checklist-website-compliance-guidelines-for-2019-in-lain-engshish-123c1d58fad9
Контрольный список A11Y (посетите информационный бюллетень A11Y) - https://a11yproject.com/checklist/
Доступность к веб -разработчикам - https://www.wuhcag.com/wcag-checklist/
15 вещей, которые вы можете сделать, чтобы улучшить доступность вашего веб-сайта-https://websitesetup.org/web-ccessionbuity-checklist/
Просто для развлечения -
Обработка - язык программирования на основе Java, используемый для создания анимации, игр и интерактивного искусства - https://processing.org/
Генеральная Ассамблея- еще одно место в сертификате, но также имеет несколько бесплатных вещей- https://generalassemb.ly/blog/free-fridays/
Разработчики и технические сообщества
https://womeninwebdev.com/
https://www.hiretechladies.com/
Примите участие в разработчиках - https://www.pluralsight.com/courses/get-involved
Codenewbie- https://www.codenewbie.org/
Hackernoon- блог сообщества, учебный ресурс и т. Д.- https://hackernoon.com/
http://ladydev.org/ (местный клуб в Де -Мойне, они также управляют областью 515)
Доски вакансий
Vettery - https://www.vettery.com/candidate/tech
Triplebyte- https://triplebyte.com/
Angellist- Работа от Startps - https://angel.co/jobs
Мы работаем удаленно - https://weworkremotely.com/
Dice - https://www.dice.com/
Переполнение стека - https://stackoverflow.com/
Codepen - https://codepen.io/jobs/
AIGA Design Jobs - https://designjobs.aiga.org/
Behance - https://www.behance.net/joblist
Design Observer - https://designobserver.com/jobs/
Пользовательский интерфейс, веб -дизайн, визуальный дизайн и т. Д. В магическом мире дизайна UX, там живет множество названий, которые в основном одинаковы или все связаны друг с другом. Если вы действительно хотите, порядок может быть визуальный дизайнер, веб -дизайнер, дизайнер пользовательского интерфейса, дизайнер взаимодействия .... и т.д. (входит в UX довольно быстро).
Пользовательский интерфейс - это не то же самое, что UX. UX-это изучение дизайна и человеческого компьютерного взаимодействия и психологии. UI имеет дело с визуальными вещами.
Оставайтесь в курсе на местах, прочитав статьи из таких мест, как
Журнал Smashing, https://www.smashingmagazine.com/
Музли, https://muz.li/
UX Planet, https://uxplanet.org/
Protypr, https://blog.prototypr.io/
UX Collective https://uxdesign.cc/
Neilsen Norman Group https://www.nngroup.com/
Mockplus https://www.mockplus.com/blog
Привет, дизайнер https://heydesigner.com/
Дизайнерские новости https://www.designernews.co/
и еще.
Получите онлайн -занятия и получите сертификаты из таких мест, как CareerFoundry, Foundation Interaction Design, LinkedIn Learning и другие. Узнайте больше о параметрах с UX Planet. https://careerfoundry.com/ ** https: //www.interaction-design.org/ (личный фаворит, это то, что я использую) https://uxplanet.org/top-10-online-platforms-learn-ui-ux-design-dcfb613d097a
Начните свой собственный блог и напишите о том, что вы знаете и рекомендуете. Станьте лидером мысли в сообществе.
Слушайте подкасты, такие как защитники пользователя, что не так с UX и другими. Вот список лучших 25 UX-подкастов от Mockplus за 2020.https: //www.mockplus.com/blog/post/ux-podcasts
Посетите встречи UX Networking. (встреча. com)
Посмотрите каналы YouTube и видео о UX.
AJ & Smart
Советы по дизайну приложения
Футур
Кален Эдвардс
Карьера
Данский
Invision
Дизаймовый отчет
Поток
LinkedInlearning
Nngroup
Будьте в курсе учебных пособий по использованию таких инструментов, как Sketch, Invision, Figma и другие инструменты UX или инструменты исследования пользователей.
Полные проблемы с макетом UX и пользовательского интерфейса, такие как генератор оттолов UX, хорошее краткое изложение и 100 -дневная вызов Dailyui. https://www.dailyui.co/ http://goodbrief.io/ https://sharpen.design/
Узнайте о доступности и подпишитесь на информационные бюллетени, такие как информационный бюллетень A11yeekly.
Системы дизайна исследования. https://designsystemsrepo.com/design-systems/
Изучить удобство использования. https://www.ussability.gov/
Изучить дизайнерское мышление. Вы можете начать с просмотра документального фильма или посмотреть на различные метологии, такие как Ideo, D.School, HCS, Design Council, лягушка, Wathx4 или Luma. http://www.designthingmoningmovie.com/
Делиться ресурсами в социальных сетях.
Присоединяйтесь к UX Facebook и LinkedIn Groups. Следуйте за дизайнерами в Twitter и Instagram.
Будьте в курсе тенденций в UX и состоянии UX. https://trends.uxdesign.cc/
Продолжайте улучшать свой портфель (найдите несколько классных ресурсов с сайта Сары Дуди) и тематических исследований (найдите здесь генератор шаблонов). Изучить другие портфели UX. https://www.sarahdoody.com/ https://design-stories.herokuapp.com/ux-case-study-template
Найдите наставника или станьте наставником.
Читайте книги о UX/UI и других подобных темах. Например, «Не заставляй меня думать», «Дизайн повседневных вещей», «Элементы пользовательского опыта», «Руководство по проекту по UX», «Lean UX» и другие. https://www.mockplus.com/blog/post/ux-design-books
Глубокое погружение в другие подмножества UX, такие как дизайн взаимодействия, информационная архитектура, визуальный дизайн, исследования UX, UI, письменность UX и т. Д.
Посетите День Всемирной конференции IXDA бесплатно или другие конференции. https://ixda.org/
Присоединяйтесь к местным клубам, организациям и другим общественным группам.
Станьте докладчиком или начните хостинговые семинары.
Получите высшее образование в области HCI, UX, пользовательского интерфейса или других подобных программ.
Добровольно проведите свои навыки или внештатный.
Практика, практика, практика. Создайте страстные проекты и тематические исследования в свободное время.
