Learn Front End UI Design 2020
1.0.0
프로그래밍/프론트 엔드 개발 배우기 (HTML/CSS/JavaScript)
프론트 엔드 개발자는 프론트 엔드 개발자의 백엔드 개발자와 다릅니다. 프론트 엔드 개발자는 브라우저를 조작하여 웹 페이지 및 기타 대화식 콘텐츠를 만듭니다. 프론트 엔드 개발을 배우려면 HTML, CSS 및 JavaScript로 시작합니다. 그것들을 배운 후에는 프레임 워크 (부트 스트랩, 반응, 각도, vue 등)와 같은 다른 것들로 넘어갈 수 있습니다. 프레임 워크 세 가지의 기본 사항을 배운 후에는 학습을 시작할 수 있습니다. 프레임 워크는 삶을 더 쉽게 만듭니다.
좋은 프로그래머는 모든 것을 기억할 필요가 없습니다. 오픈 소스 코드는 웹에 전원을 공급하고 프로그래머는 무료로 코드를 사용하고 교환 할 수 있습니다 ( "마스터 링 프론트 엔드"아래에 기여하는 오픈 소스 가이드를 확인하십시오). Google에 갇혀 있다면. 당신은 아마 답을 찾을 것입니다.
백만 개의 튜토리얼이 있습니다. 튜토리얼을 끝없이 시청하지만 콘크리트를 배우지 않는 "튜토리얼 지옥"이라고 알려진 것에 갇히지 않도록주의하십시오. 배우는 가장 좋은 방법은하는 것입니다. 이와 같은 운동 사이트는 편리하지만 건설 할 프로젝트도 생각하고 싶습니다. 포트폴리오를 위해 Github에서 이러한 프로젝트를 주최하십시오. 또는 프로젝트 tutortials를 찾으십시오.
Google Chrome 개발자 도구를 사용하면 모든 웹 사이트 뒤의 코드를 검사하거나 실현되지 않은 변경을 수행 할 수 있습니다. Firefox와 같은 다른 브라우저에는 이러한 도구도 있습니다. 가장 친한 친구로 만드십시오.
YouTube는 일반적으로 정말 훌륭한 리소스입니다. 당신이 알고 싶은 모든 것. 아마 거기에있을 것입니다. Wes Bos와 같이 많은 존경받는 프로그래머가 있습니다. 트위터에서 다른 개발자들도 팔로우하십시오.
YouTube 마스터 목록 -https://github.com/erikch/devyoutubelist
알아야 할 다른 중요한 것은 그 후 첫 직장이나 직업을 얻기 위해 모든 것을 알 필요가 없다는 것입니다. 프로그래밍은 항상 변화하고 있습니다. 좋은 직업은 당신이 직장에서 배우고, 당신에게 몇 가지를 배우기 위해 돈을 지불하고, 당신이 아직 알 필요가없는 것을 가르쳐 줄 것입니다.
질문하십시오 - 의심의 여지가 없습니다. 먼저 Google을 사용하십시오. 실패하면 포럼, 스택 오버플로, 페이스 북 그룹 또는 트위터를 통해 다른 프로그래머에게 연락하십시오. 누군가가 당신을 도와 드리겠습니다.
언제 준비가되었는지 어떻게 알 수 있습니까?
기본 웹 사이트를 만들고 몇 가지 다른 프로젝트의 포트폴리오를 가질 수 있습니다.
정적 및 프로토 타입 디자인이있는 웹 사이트
코드를 보여주는 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 도구 - 브라우저에서 직접 열려 웹 사이트를 테스트, 대각선 및 탐색 -https://developers.google.com/web/tools/chrome-devtools
개발자를위한 블로그 -https://dev.to/
스택 오버 플로우는 답과 물건을 찾는 데 좋지만 커뮤니티는 초보자 나 여성에게 친숙하지 않은 것으로 알려져 있습니다 -https://stackoverflow.com/
Front End News- 최신 정보 -https://frontendfront.com/
프론트 엔드 포커스 -이 뉴스 레터를 최신 상태로 유지하십시오 -https://frontendfoc.us/
필수 주제와 개념
인터넷 및 컴퓨터 작동 방식 -https://www.khanacademy.org/computing/computer-science/computers-andinternet-code-org#internet-works-intro
컴퓨터 과학이란 무엇입니까? -https://www.freecodecamp.org/news/what-is-computer-programming-defining-software-development/
반응 형 웹 디자인 -https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/
크로스 브라우저 개발 -https://developer.mozilla.org/en-us/docs/learn/tools_and_testing/cross_browser_testing/intruction
민첩한 방법론 -https://www.youtube.com/playlist?list=plwkjhjtqvabm0gpnunwf4pr4xv8i3geh-
웹 페이지 속도 테스트 -https://tools.pingdom.com/
Paul Ford 's What Is Code 10,000 Word Online 소설 -https://www.bloomberg.com/graphics/2015-paul-ford-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 Developer 's Network- W3Schools와 같이, 그러나 더 성숙하고 더 독립적 인 최신 자매 -https : //developer.mozilla.org/en-us/
프론트 엔드 데브가 2019 년에 사용하는 도구-https://ashleynolan.co.uk/blog/frontend-tooling-survey-2019-20
로드맵- 2020 년 프론트 엔드 데브가되는 가이드 https://roadmap.sh/frontend
프론트 엔드 개발자 2020 안내서 -https://youtu.be/sppsnbqvt0k
프론트 엔드에 대한 인터뷰 질문 (예 : 답변 할 수 있습니까?) https://github.com/h5bp/front-end-developer-interview-questions
프론트 엔드 개발자 인터뷰 질문 및 답변 -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-definitive-guide-to-contriping-to-open-source-900d5f2282/
기부금을 만드는 방법 -https://github.com/firstcontripions/first-contritions
PR의 멋진 목록 (풀 요청) -https://github.com/mungell/awesome-for-beginners
첫 번째 타이머 전용 - 오픈 소스 프로젝트에 처음으로 기여한 리소스 -https://www.firsttimersonly.com/
쌍을 이루는 프로그래밍의 장단점 (귀하와 팀원이 같은 코드에서 함께 일할 때) -https://www.freecodecamp.org/news/the-benefits-and-pitfalls-of-pair-programming-in-the-workplace-e68c3ed3c81f/
컨텐츠 관리 시스템
WordPress- 이들과 함께 일하는 방법을 알아야하는 많은 일자리가 있습니다- WordPress.org / WordPress.com
드 루팔
웹 플로우 (새롭지 만 주변에 많은 이야기가 있습니다)
튜토리얼 및 기타
Freecode Camp- 사용할 수있는 최고의 무료 리소스 중 하나 -https://www.freecodecamp.org/
Khan Academy- 훌륭한 프로그래밍 레슨을 가지고 컴퓨터 과학을 확인하십시오 -https://www.khanacademy.org/computing/computure-programming
Codeacademy- 좋아하는지만 특정 시점에서 지불해야합니다 -https://www.codecademy.com/
프론트 엔드 마스터 - 프론트 엔드 개발 학습 -https://frontendmasters.com/
Udemy- 무료 코스를 확인한 다음 클래스에서 판매를 기다리십시오 -https://www.udemy.com/courses/free/
Thinkful Webinars- 무료 초보자 웹 세미나가 있습니다.
Tree House- 훌륭한 tutortial/portfolio/degre 사이트이지만 비싸지 만 -https://teamtreehouse.com/
Hackr.io- 튜토리얼 및 기타 학습 -https://hackr.io/
egghead- 튜토리얼 - https://egghead.io/
LinkedInLearning
Coursera
Skillshare
수업 과정
연습 - 연습으로 프로그래밍 학습 -https://exercism.io/
EDABIT- 대화식 과제로 코딩 배우기 -https://edabit.com/
코드 전쟁 - 일일 프로그래밍 과제 -https://www.codewars.com/
HTML/CSS/JavaScript 세부 사항
html 충돌 과정 -https://youtu.be/pqn-pnxpavg; https://youtu.be/ub1o30fr-ee
HTML 및 CSS Book- 온라인으로 코드 예제가있는 인기있는 책 -http://www.htmlandcssbook.com/
CSS 충돌 과정 -https://www.youtube.com/watch?v=yfoy53qxeni
CSS Tricks- CSS 및 기타 프론트 엔드 데브 블로그 -https://css-tricks.com/
CSS Podcast- https://pod.link/thecsspodcast
CSS 생성기 - CSS를 신속하게 생성 -http://css3generator.com/
CSS Diner -https://flukeout.github.io/
CSS 그리드 -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, 프론트 엔드 프레임 워크 -https://getbootstrap.com/
Codrops- 멋진 코딩 물건의 스 니펫 -http://tympanus.net/codrops/
Eloquent 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 일반 JavaScript 프로젝트 -https://vanillawebprojects.com/
전체 JavaScript Foundations 비디오 -https://youtu.be/pkzno7mfnfg
12 분 안에 html -https://youtu.be/bwpmsssvdpk
12 분 안에 CSS -https://youtu.be/0afzj1g0bie
12 분 안에 JavaScript -https://youtu.be/ukg_u3cnjwi
보다 고급 코드 및 Topcis 및 컴퓨터 과학-
Google 개발자 - 자습서 및 기타 리소스 -https://developers.google.com/
(React, Angular, Vue)로 시작할 JS 프레임 워크 하나를 선택하십시오. 당신이 선택한 것은 중요하지 않지만 일부 회사는 다른 회사보다 선호합니다. React가 가장 인기가 있고 Angular, Vue가 뒤 따릅니다. 많은 사람들이 Vue를 알고 있지는 않지만 실제로는 실제로 추구됩니다. 따라서 아마도 반응하거나 각도와 함께 함께하는 것이 강력한 선택 일 수 있습니다.
프론트 엔드 프레임 워크의 역사 -https://youtu.be/kzeog8ytfae
React -https://www.youtube.com/playlist?list=plwkjhjhjhjtqvabkardmazoartnz1amwnwmvc; 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 = plwkjhjtqvabkomsx4hgwxbjw4ab0cbab
sql- https://www.khanacademy.org/computing/computer-programming/sql
APIS -https://youtu.be/gzvsyjdk-us
Havard의 컴퓨터 과학 -https://www.youtube.com/playlist?list=plwkjhjhjtqvabmgw5fn5bqlwuug-8bdmabi
컴퓨터 과학 -https://www.youtube.com/playlist?list=PlwKJHJTQVABN5EMQ3RRG8GEBQKHF_5VXD
Google 자료 -https://material.io/design/
블록 체인이란 무엇입니까? -https://www.freecodecamp.org/news/what-is-blockchain-and-how-does-it-work/
접근성
웹 컨텐츠 접근성 가이드 라인 (WCAG) -https://www.w3.org/wai/standards-guidelines/wcag/
Ada Checklist (2019) -https://medium.com/@krisrivenburgh/the-adade-checklist-website-compliance-guidelines-for-2019-in-plain-english-123c1d58fad9
A11y Checklist (A11y 뉴스 레터 확인) -https://a11yproject.com/checklist/
개발자를위한 웹 접근성 -https://www.wuhcag.com/wcag-checklist/
웹 사이트 접근성을 향상시키기 위해 할 수있는 15 가지-https://websitesetup.org/web-accessibility-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/ (Des Moines의 지역 클럽, 그들은 또한 Area 515를 운영합니다)
일자리 보드
Vettery -https://www.vettery.com/candidate/tech
Triplebyte- https://triplebyte.com/
스타트 업의 Angellist -Jobs -https://angel.co/jobs
우리는 원격으로 일합니다 - https://weworkremotely.com/
주사위 - https://www.dice.com/
스택 오버플로 -https://stackoverflow.com/
Codepen- https://codepen.io/jobs/
Aiga 디자인 작업 -https://designjobs.aiga.org/
Behance -https://www.behance.net/joblist
Design Observer -https://designobserver.com/jobs/
UX 디자인의 마법 세계 내에서 사용자 인터페이스, 웹 디자인, 비주얼 디자인 등은 기본적으로 서로 관련이있는 여러 타이틀이 있습니다. 정말로 원한다면 주문은 비주얼 디자이너, 웹 디자이너, 사용자 인터페이스 디자이너, 인터랙션 디자이너 등 일 수 있습니다. (ux에 꽤 빨리 들어갑니다).
UI는 UX와 같지 않습니다. UX는 디자인 및 인간 컴퓨터 상호 작용 및 심리학 연구입니다. UI는 시각적 인 것들을 다룹니다.
같은 장소에서 기사를 읽어 현장에서 최신 상태를 유지하십시오.
Smashing Magazine, https://www.smashingmagazine.com/
Muzli, https://muz.li/
UX Planet, https://uxplanet.org/
protypr, https://blog.prototypr.io/
UX Collective https://uxdesign.cc/
Neilsen Norman Group https://www.ngroup.com/
mockplus https://www.mockplus.com/blog
헤이 디자이너 https://heydesigner.com/
디자이너 뉴스 https://www.designernews.co/
그리고 더.
온라인 수업을 듣고 CareerFoundry, Interaction Design Foundation, LinkedIn Learning 등과 같은 장소에서 인증서를 받으십시오. UX Planet의 옵션에 대해 자세히 알아보십시오. https://careerfoundry.com/ ** https : //www.interaction-design.org/ (개인적으로 좋아하는 것은 https://uxplanet.org/top-10-online-platforms-to-learn-ui-design-dcfb613d097a
자신의 블로그를 시작하고 알고 있고 추천하는 것에 대해 쓰십시오. 커뮤니티의 사고 리더가 되십시오.
User Experience Defenders, UX의 문제 및 기타와 같은 팟 캐스트를 듣습니다. 다음은 2020.https : //www.mockplus.com/blog/post/ux-podcasts의 Mockplus에서 최고의 25 UX 팟 캐스트 목록입니다.
UX 네트워킹 모임에 참석하십시오. (Meetup. com)
UX에 대한 YouTube 채널 및 비디오를 시청하십시오.
AJ & Smart
앱 디자인 팁
미래
Caler Edwards
CareerFoundry
댄스키
Invision
디자인 코스
유량
LinkedInLearning
nngroup
Sketch, Invision, Figma 및 기타 UX 도구 또는 사용자 연구 도구와 같은 도구 사용에 대한 튜토리얼을 최신 상태로 유지하십시오.
The Sharpen UX Generator, Good Brief 및 100 Day Dailyui Challenge와 같은 Mock UX 및 UI 도전. https://www.dailyui.co/ http://goodbrief.io/ https://sharpen.design/
접근성에 대해 배우고 A11YWeekly 뉴스 레터와 같은 뉴스 레터를 구독하십시오.
연구 설계 시스템. https://designsystemsrepo.com/design-systems/
유용성을 연구하십시오. https://www.usability.gov/
연구 디자인 사고. 다큐멘터리를 보거나 Ideo, D.School, HCS, Design Council, Frog, Whatx4 또는 Luma와 같은 다른 메스테르를 보면서 시작할 수 있습니다. http://www.designthinkingmovie.com/
소셜 미디어에서 리소스를 공유합니다.
UX Facebook 및 LinkedIn 그룹에 가입하십시오. 트위터와 인스 타 그램에서 디자이너를 팔로우하십시오.
UX 및 UX 상태의 트렌드를 최신 상태로 유지하십시오. https://trends.uxdesign.cc/
포트폴리오 (Sarah Doody 사이트에서 멋진 리소스 찾기) 및 사례 연구 (템플릿 생성기 찾기)를 계속 개선하십시오. 다른 UX 포트폴리오를 연구하십시오. https://www.sarahdoody.com/ https://design-stories.herokuapp.com/ux-case-study-template
멘토를 찾거나 멘토가 되십시오.
UX/UI 및 기타 유사한 주제에 관한 책을 읽으십시오. “Do n't Me Me Think”,“일상적인 것들의 디자인”,“사용자 경험의 요소”,“UX에 대한 프로젝트 가이드”,“Lean UX”등과 마찬가지로. https://www.mockplus.com/blog/post/ux-design-books
인터랙션 디자인, 정보 아키텍처, 시각적 디자인, UX 연구, UI, UX 작문 등과 같은 UX의 다른 하위 집합에 대한 깊은 곳
IXDA World Conference Day에 무료 또는 기타 회의에 참석하십시오. https://ixda.org/
지역 클럽, 조직 및 기타 커뮤니티 그룹에 가입하십시오.
스피커가되거나 워크샵을 주최하십시오.
HCI, UX, UI 또는 기타 유사한 프로그램에서 대학 학위를 취득하십시오.
기술이나 프리랜서 자원 봉사.
연습, 연습, 연습. 여가 시간에 열정 프로젝트 및 사례 연구를 만드십시오.
