Learn Front End UI Design 2020
1.0.0
Apprenez la programmation / le développement frontal (HTML / CSS / JavaScript)
Les développeurs frontaux sont différents des développeurs back-end dans la mesure où les développeurs frontaux manipulent les navigateurs pour créer des pages Web et d'autres contenus interactifs. Pour apprendre le développement frontal, vous commencez avec HTML, puis CSS, puis JavaScript. Une fois que vous les avez appris, vous pouvez passer à d'autres choses comme des frameworks (bootstrap, réagir, angulaire, vue, etc.). Des cadres que vous pouvez commencer à apprendre une fois que vous avez appris les bases des trois. Les cadres facilitent les vies.
Un bon programmeur n'a pas à se souvenir de tout. Le code open source alimente le Web et permet aux programmeurs d'utiliser et d'échanger gratuitement du code (consultez certains guides open source contribuant sous "Mastering Front End"). Si vous êtes coincé sur quelque chose Google. Vous trouverez probablement la réponse.
Il y a un million de tutoriels. Faites attention à ne pas rester coincé dans ce qui est appelé "Hell Tutorial Hell" où vous regardez sans cesse des tutoriels mais n'apprends jamais rien de concret. La meilleure façon d'apprendre est de faire. Des sites d'exercices comme celui-ci sont utiles, mais vous voulez également penser aux projets à construire. Organisez ces projets sur GitHub pour votre portefeuille. Ou recherchez des numéros de projet.
À l'aide d'outils de développeur Google Chrome, vous pouvez inspecter le code derrière n'importe quel site Web ou apporter des modifications non vivant. D'autres navigateurs comme Firefox ont également ces outils. Faites-en votre meilleur ami.
YouTube est une très bonne ressource en général. Tout ce que vous voulez savoir. C'est probablement là. Beaucoup de programmeurs très respectés sont là comme Wes Bos. Suivez également d'autres développeurs sur Twitter.
Liste principale YouTube - https://github.com/erikch/devyoutubelist
L'autre chose importante à savoir est que vous n'avez pas à tout savoir pour obtenir votre premier emploi ou votre travail après cela. La programmation change toujours. Un bon travail vous permettra d'apprendre sur le travail, j'espère vous payer pour apprendre certaines choses et vous apprendre ce que vous n'avez pas déjà besoin de savoir.
Posez des questions - aucune question n'est stupide. Utilisez d'abord Google. Si cela échoue, contactez d'autres programmeurs via des forums, pilez le débordement, les groupes Facebook ou Twitter. Quelqu'un se fera un plaisir de vous aider.
Comment saurai-je quand je serai prêt?
Lorsque vous pouvez créer un site Web de base et avoir un portefeuille de quelques projets différents.
Site Web avec conceptions statiques et prototypes
Un github présentant votre code
Si vous travaillez sur un site Web déjà en direct, vous n'avez pas besoin d'un github pour cela. Mais ils sont bons pour les projets qui ne sont pas en direct.
Indépendamment de ce que vous faites, des projets indépendants ou bénévoles vous aideront à gagner de l'EXP au cas où vous ne pourriez pas obtenir de stage. Mais les stages des développeurs sont généralement ouverts aux personnes hors de l'école parce que tant de gens sont en carrière. Vous pouvez également commencer à postuler sur des positions de niveau junior. Découvrez les projets open source, la programmation appariée et la colloboration avec un ami.
Ressources de programmation
(Autres listes)
https://www.womenwhocode.com/resources
http://codingheroes.io/resources/
Essentiel-
GitHub - Un référentiel en ligne de code pour présenter et participer à des projets open-source
Tutoriel Git & GitHub - https://youtu.be/swyqp7iy_tc
Codepen- explorer et créer des choses à partir de votre navigateur - https://codepen.io/dashboard/
Texte sublime - un éditeur de code facile et gratuit - https://www.sublimetext.com/
VS Code- est l'éditeur de code gratuit actuel, plus avancé - https://code.visualstudio.com/
Chrome Dev Tools - Ouvrez directement dans votre navigateur pour tester, diagognose et explorer des sites Web - https://developers.google.com/web/tools/chrome-devtools
Blog pour les développeurs - https://dev.to/
Stack Overflow est idéal pour chercher des réponses et des trucs, mais la communauté n'est pas conviviale pour les débutants ou les femmes - https://stackoverflow.com/
Front End News - Restez à jour - https://fronttendfront.com/
Front End Focus - Restez à jour avec cette newsletter - https://frontendfoc.us/
Sujets et concepts essentiels
Comment fonctionnent Internet et les ordinateurs - https://www.khanacademy.org/computing/computer-science/computers-and-internet-code-org#internet-works-intro
Qu'est-ce que l'informatique? - https://www.freecodecamp.org/news/what-is-computer-programming-defining-software-development/
Conception Web réactive - https://www.smashingmagazine.com/2011/01/guidelines-for-onsponsive-web-design/
Développement du navigateur croisé - https://developer.mozilla.org/en-us/docs/learn/tools_and_testing/cross_browser_testing/introduction
Méthodologie agile - https://www.youtube.com/playlist?list=plwkjhjtqvabm0gpnunwf4pr4xv8i3geh-
Test de vitesse de la page Web - https://tools.pingdom.com/
Le roman en ligne de What Is Code de 10 000 mots de Paul Ford - https://www.bloomberg.com/graphics/2015-paul-ford-what-is-code/
Débogage pour les débutants - Le débogage est le processus de recherche et de fixation des erreurs - https://docs.microsoft.com/en-us/visualstudio/debugger/debugging-absolute-beginners?view=vs-2019
Mastering front-end
100 jours de code - L'idée derrière elle est solide, repitation, responsabilité et progrès - https://www.100daysofcode.com/
Guide des compétences Web - https://andreasbm.github.io/web-skills/
W3Schools - Apprenez la programmation et regardez des trucs - une ressource de référence- https://www.w3schools.com/
* Réseau du développeur de Mozilla - comme W3Schools, mais plus la sœur plus mature et plus approfondie-https: //developer.mozilla.org/en-us/
Outils que les développeurs frontaux utilisent en 2019 - https://ashleynolan.co.uk/blog/fronttend-tooling-survey-2019-results
TEMOPE DE RODE - Guide pour devenir un Dev front-End en 2020 https://roadmap.sh/frontend
Guide du développeur 2020 frontal - https://youtu.be/sppsnbqvt0k
Questions d'entrevue pour front-end (c'est-à-dire pouvez-vous y répondre?)
Questions et réponses d'entrevue des développeurs avant-end - https://www.fullstack.cafe/blog/front-end-developer-interview-questions
Dev illustré - illustrant les concepts du développeur - https://illustrated.dev/
Gâteau d'interview - Apprenez CS et comment résoudre les interviews du programmeur - https://www.interviewcake.com/
Programmation Interview YouTube - https://www.youtube.com/playlist?list=PLWKJTQVABLV09G3SFGRMSER0JNKQMJ9
Le guide défini pour contribuer à l'Open Source - https://www.freecodecamp.org/news/the-definitive-guide-to-ctreting-to-open-source-900d5f9f2282/
Comment faire des contributions - https://github.com/firstContributions/First-Contributions
Awesome List of Pr (Pull Demandes) - https://github.com/mungell/awesome-for-beginners
First Timers Only - Une ressource pour la première fois que vous contribuez à des projets open source - https://www.firsttimersonly.com/
Les avantages et les inconvénients de la programmation appariée (lorsque vous et un coéquipier travaillez ensemble sur le même code) - https://www.freecodecamp.org/news/the-benefits-and-pitfalls-of-porramming-in-the-workplace-e68c3ed3c81f/
Systèmes de gestion de contenu
WordPress - Il y a beaucoup d'emplois qui vous obligeront à savoir comment travailler avec ces derniers - wordpress.org / wordpress.com
Drupal
WebFlow (plus récent mais a beaucoup parlé)
Tutoriels et autres
Freecode Camp - L'une des meilleures ressources gratuites que vous pouvez utiliser - https://www.freecodecamp.org/
Khan Academy - a d'excellentes leçons de programmation et consultez aussi leurs affaires informatiques - https://www.khanacademy.org/computing/computer-programming
Codeacademy - Un favori mais vous devez payer maintenant à un certain point - https://www.codecademy.com/
Front-End Masters - Apprenez le développement frontal - https://frontendmasters.com/
Udemy - Découvrez leurs cours gratuits, puis attendez les ventes sur leurs cours - https://www.udemy.com/courses/free/
Webinaires réfléchis - a un tas de webinaires pour débutants gratuits - https://www.thinkful.com/webinars/
Tree House - un excellent site de médecine / portfolio / diplôme mais peut être cher - https://teamtreehouse.com/
Hackr.io- tutoriels et autres apprentissage - https://hackr.io/
Egghead - Tutoriels - https://egghead.io/
LinkedInlearning
Parcours
Scénario
Exercices
Exercice - Apprenez la programmation avec des exercices - https://exercism.io/
Edabit - Apprenez le codage avec des défis interactifs - https://edabit.com/
Code Wars - Défis quotidiens de programmation - https://www.codewars.com/
HTML / CSS / JavaScript Spécifiques
HTML Crash Courses - https://youtu.be/pqn-pnxpavg; https://youtu.be/ub1o30fr-ee
HTML et CSS Book - Un livre populaire avec des exemples de code en ligne - http://www.htmlandcssbook.com/
CSS Crash Course - https://www.youtube.com/watch?v=yfoy53qxeni
CSS Tricks - Un blog pour CSS et autres devants frontaux - https://css-tricks.com/
CSS Podcast- https://pod.link/thecsspodcast
Générateur CSS - Générez rapidement CSS - http://css3generator.com/
CSS Diner - https://flukeout.github.io/
GRID CSS - https://cssgrid.io/; https://learncssgrid.com/
Css flexbox- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
CSS Box Model - https://css-tricks.com/the-css-box-model/
Bootstrap - A CSS, framework front-end - https://getbootstrap.com/
CODROPS- Extraits de trucs de codage cool - http://tympanus.net/codrops/
Éloquent javascript - un livre de lecture (avec une pratique de programmation dans le navigateur) https://elognentjavascript.net/elognent_javascript.pdf
Javascript et jQuery - un livre populaire avec des exemples de code - http://www.javascriptbook.com/
Jslint- "Lints" sont des programmes qui trouvent des problèmes dans votre code - http://www.jslint.com/
JavaScript30 - Créez 30 projets JavaScript de vanille différents - https://javascript30.com/
Javascript pour débutant - un cours payant par Wes Bos - https://beginnerjavascript.com/
Just JavaScript - Une newsletter expliquant JavaScript - https://justjavascript.com/
Vanilla JavaScript Projects - +20 projets JavaScript simples - https://vanillawebprojects.com/
Vidéo de fondations JavaScript complète - https://youtu.be/pkzno7mfnfg
Html en 12 minutes - https://youtu.be/bwpmssvdpk
CSS en 12 minutes - https://youtu.be/0afzj1g0bie
Javascript en 12 minutes - https://youtu.be/ukg_u3cnjwi
Code plus avancé et topcis et informatique
Google Developers - Tutoriels et autres ressources - https://developers.google.com/
Choisissez un framework JS pour commencer (React, Angular, Vue). Peu importe ce que vous choisissez, mais certaines entreprises les préfèrent aux autres. React est le plus populaire, suivi par Angular, puis Vue. Peu de gens connaissent Vue, mais c'est vraiment recherché en fait. Alors peut-être que réagir ou Angular et Vue pourraient être un choix fort.
HISTOIRE DES CAMPS FACT END - https://youtu.be/kzeog8ytfae
React - https://www.youtube.com/playlist?list=plwkjhjtqvabkardmazoartnz1amwnwmvc; https://www.youtube.com/playlist?list=PLC3Y8-RFHVWGG3VAYJGHGNMODB54RXOK3
Angular -https: //www.youtube.com/playlist? List = plwkjhjtqvablnvgkk6aqvpajhxrrxxhts
Vue - https://youtu.be/wy9q22isx3u
Php -https: //www.youtube.com/playlist? List = plwkjhjtqvabkomsx4hgwxbjzw4ab0cbab
SQL- https://www.khanacademy.org/computing/computer-programming/sql
API - https://youtu.be/gzvsyjdk-us
Informatique de Havard - https://www.youtube.com/playlist?list=plwkjhjtqvabmgw5fn5bqlwuug-8bdmabi
Informatique - https://www.youtube.com/playlist?list=plwkjhjtqvabn5emq3rrg8gebqkhf_5vxd
Google Materials - https://material.io/design/
Qu'est-ce que la blockchain? - https://www.freecodecamp.org/news/what-is-blockchain-and---does-it-work/
Accessibilité
Guideaux d'accessibilité du contenu Web (WCAG) - https://www.w3.org/wai/standards-guidelines/wcag/
Liste de contrôle ADA (2019) - https://medium.com/@krisrivenburgh/the-ada-checklist-website-compliance-guidelines-for-2019-in-plain-english-123c1d58fad9
Liste de contrôle A11Y (consultez la newsletter A11Y) - https://a11yproject.com/checklist/
Accessibilité Web pour les développeurs - https://www.wuhcag.com/wcag-checklist/
15 choses que vous pouvez faire pour améliorer l'accessibilité de votre site Web - https://websitesetup.org/web-accessibility-checklist/
Juste pour le plaisir -
Traitement - Un langage de programmation basé sur Java utilisé pour créer des animations, des jeux et de l'art interactif - https://processing.org/
Assemblée générale - Un autre lieu de certificat mais a également des trucs gratuits - https://generalassemb.ly/blog/free-fridays/
Développeur et communautés technologiques
https://womeninwebdev.com/
https://www.hiretechladies.com/
Impliquez-vous en tant que développeurs - https://www.pluralsight.com/courses/get-involved
Codenewbie- https://www.codenewbie.org/
Hackernoon - un blog communautaire, des ressources d'apprentissage, etc.- https://hackeron.com/
http://ladydev.org/ (club local à Des Moines, ils dirigent également la zone515)
Panneaux d'emploi
Vettery - https://www.vettey.com/candidate/tech
Triplebyte- https://triplebyte.com/
AngelList - Jobs des start-ups - https://angel.co/jobs
Nous travaillons à distance - https://weworkremotely.com/
Dice - https://www.dice.com/
Stack Overflow - https://stackoverflow.com/
Codepen - https://codepen.io/jobs/
AIGA Design Jobs - https://designjobs.aiga.org/
Behance - https://www.behance.net/joblist
Conception Observer - https://designobserver.com/jobs/
Interface utilisateur, conception Web, conception visuelle, etc. Dans le monde magique de la conception UX, y vit une multitude de titres qui sont essentiellement les mêmes ou tous liés les uns aux autres. Si vous le vouliez vraiment, l'ordre peut être un concepteur visuel, un concepteur Web, un concepteur d'interface utilisateur, un concepteur d'interaction .... etc. (va dans UX assez rapidement).
L'UI n'est pas la même chose que UX. L'UX est l'étude de la conception et de l'interaction et de la psychologie humain-ordinateur. L'interface utilisateur traite des trucs visuels.
Restez à jour dans le domaine en lisant des articles de lieux comme
Smashing Magazine, https://www.smashingmagazine.com/
Muzli, https://muz.li/
UX Planet, https://uxplanet.org/
Protypr, https://blog.prototypr.io/
UX collectif https://uxdesign.cc/
Neilsen Norman Group https://www.nngroup.com/
Mockplus https://www.mockplus.com/blog
Hey Designer https://heydesigner.com/
Designer News https://www.designnews.co/
Et plus.
Prenez des cours en ligne et obtenez des certificats de lieux comme CareerFoundry, Interaction Design Foundation, LinkedIn Learning et autres. En savoir plus sur les options de UX Planet. https://careerfoundry.com/ ** https: //www.interaction-design.org/ (favori personnel, c'est ce que j'utilise) https://uxplanet.org/top-10-online-platforms-to-learn-ui-ux-design-dcfb613d097a
Commencez votre propre blog et écrivez sur ce que vous savez et recommandez. Devenir un leader d'opinion dans la communauté.
Écoutez des podcasts comme les défenseurs de l'expérience utilisateur, ce qui ne va pas avec UX et d'autres. Voici une liste des 25 meilleurs podcasts UX de Mockplus pour 2020.https: //www.mockplus.com/blog/post/ux-podcasts
Assistez aux rencontres de réseautage UX. (Meetup. Com)
Regardez les chaînes et vidéos YouTube sur UX.
AJ & Smart
Conseils de conception d'applications
Le futur
Caler Edwards
Carrière
Dansky
Inviter
Conception
Flux
LinkedInlearning
Nngroup
Restez à jour et regardez des tutoriels sur l'utilisation d'outils comme Sketch, Invitez, FIGMA et autres outils UX ou outils de recherche utilisateur.
Les défis UX et d'interface utilisateur complets et d'interface utilisateur comme le générateur UX Sharpen, le Good Brief et le 100 jours Dailyui Challenge. https://www.dailyui.co/ http://goodbrief.io/ https://sharpen.design/
Découvrez l'accessibilité et abonnez-vous à des newsletters comme la newsletter A11yweekly.
Systèmes de conception d'étude. https://designsystemsrepo.com/design-systems/
Étudiez l'utilisabilité. https://www.usability.gov/
Étude de la réflexion sur la conception. Vous pouvez commencer par regarder un documentaire ou regarder différentes méthologies comme d'Ideo, D.School, HCS, Design Council, Frog, Whatx4 ou Luma. http://www.designthinkingmovie.com/
Partagez des ressources sur les réseaux sociaux.
Rejoignez les groupes UX Facebook et LinkedIn. Suivez les concepteurs sur Twitter et Instagram.
Restez à jour avec les tendances dans UX et l'état de UX. https://trends.uxdesign.cc/
Continuez à améliorer votre portefeuille (trouvez des ressources sympas sur le site de Sarah Doody) et des études de cas (trouvez un générateur de modèle ici). Étudiez d'autres portefeuilles UX. https://www.sarahdoody.com/ https://design-stories.herokuapp.com/ux-ase-study-template
Trouvez un mentor ou devenez un mentor.
Lisez des livres sur UX / UI et d'autres sujets similaires. Comme «Ne me faites pas penser», «la conception des choses de tous les jours», «les éléments de l'expérience utilisateur», «un guide de projet pour UX», «Lean UX» et autres. https://www.mockplus.com/blog/post/ux-design-books
Plongeon profonde dans d'autres sous-ensembles d'UX comme la conception d'interaction, l'architecture de l'information, la conception visuelle, la recherche UX, l'interface utilisateur, l'écriture UX, etc.
Assistez à la Journée de la conférence mondiale de l'IXDA gratuitement ou à d'autres conférences. https://ixda.org/
Rejoignez des clubs locaux, des organisations et d'autres groupes communautaires.
Devenez un orateur ou commencez à héberger des ateliers.
Obtenez un diplôme universitaire en HCI, UX, UI ou d'autres programmes similaires.
Faire du bénévolat vos compétences ou votre freelance.
Pratique, pratique, pratique. Créez des projets passionnés et des études de cas dans votre temps libre.
