나는 웹 개발에 관심이 있고 W3Schools에서 몇 년 전 HTML과 CSS에 관한 몇 가지 기본 사항을 배웠지 만 오늘날의 표준에 맞는 웹 사이트, 즉 표를 사용하지 않고 자유롭게 흐르는 사이트를 개발하는 방법을 배운 적이 없다 사이트 디자인을 관리합니다.

내가 시작할 수있는 좋은 자료는 무엇입니까?

CSS 젠 가든

CSS Zen Garden을 확인하고 다양한 결과를 마무리하십시오. 그것들은 매우 다재다능하며 동일한 소스 코드에 비해 많은 차이를 제공합니다. 최신 CSS 기술에 대해 많이 배울 것입니다. 당신이 그것들을 완전히 해부하지 않더라도 최소한 접근 가능한 HTML에 대해 많은 영감과 CSS 능력을 찾을 것입니다. CSS Zen Garden의 가장 큰 장점은 스타일에 대한 의미론입니다. 내용은 스타일이 아닙니다. 스타일은 CSS에 의해 순수하게 수행됩니다. CSS는 다양한 방식으로 데이터를 사용할 수 있고 스타일을 시각화 한 사용자 만 스타일을 적용 할 수 있기 때문에 올바른 방식입니다.

서적

책에서 배우는 것과 관련하여 이것은 CSS를 시작하는 것처럼 보입니다 .

인터넷

인터넷에서 Smashing Magazine 을 읽고 많은 예제와 접근 방식을 제공합니다. 그것은 디자인 비즈니스에서 웹 디자인 등의 훌륭한 접근 방식에 이르기까지 다양한 기사를 포괄합니다.

웹 사이트와 응용 프로그램을 만드는 방법을 배우는 가장 좋은 방법은 실제로 만드는 것입니다 . 즉, 프로젝트를 만들고 항상 수행해야합니다. 이 짧은 비디오 는 새로운 이민자의 감정을 전달하고 주제에 대한 좋은 조언을 제공합니다.

또한 웹 개발 학습에 관심이있는 사람들에게 시작하기 전에 읽어야 할 다른 권장 사항 을 작성 했습니다 .

그러나, 당신이 단어를 모르는 언어를 할 수없는 것처럼, 유용한 프로젝트를 만들기 전에 기초를 잘 이해해야합니다. 다음은 스스로 알아볼 수있는 몇 가지 기본 사항과 사이트를 선택할 수있는 자료입니다.

웹 개발의 기초를 무료로 배울 수있는 좋은 곳이 있습니다. 여기서 시작하지만 직접 가르치지 않는 것들을 가지고 놀기 위해 그들에게서 분기하십시오. 몇 가지 과정을 거친 후 처음부터 다른 사이트 / 프로젝트를 직접 만들어보십시오. 그렇게하면 개념을 강화하고 구현 세부 사항을 가르치며 추가 사항도 배울 수 있습니다. 당신은 간단하게 할 수없는 읽기 전용으로 좋은 개발자 나 디자이너가되고, 당신은 만들어야합니다 !

웹 개발을 배우는 디자이너를위한 충돌 코스를 만들었습니다.

확인 해봐! 그들은 디자인 기반의 청중을 위해 맞춤화되었지만 학습하는 모든 사람에게 적용됩니다. 슬라이드 / 포스트 / 비디오의 기본 사항을 가르치고 각 프로젝트 끝에 작은 프로젝트를 할당하여 실제 프런트 엔드 개발을 가르칩니다.

• 레슨 1-웹 개발의 이유와 이유
• 레슨 2-HTML 및 CSS 시작
• 레슨 3-JavaScript 시작 (JS)

다른 좋은 튜토리얼 웹 사이트

• CodeAcademy- 여러 언어의 일반적인 지식 기초.
• Mozilla의 "웹 학습"시리즈 -시작 단계부터 시작하여 좀 더 복잡한 주제로 안내 할 수 있습니다. 훌륭한 자원, 나는 그것을 강력히 추천합니다.
• Udacity- 일반 웹 개발 클래스.
• Tuts + -보다 구체적인 주제에 대한 자습서.
• KhanAcademy- 개인적으로 사용하지는 않았지만 매일 좋아지고 있습니다.

W3Schools를 사용하지 마십시오. 일반적으로 구식이며 오류가 발생하기 쉽습니다. 대신 위와 같은 자습서 웹 사이트를 사용하여 특정 문서를 찾을 때 아래 설명서 사이트 중 하나를 배우고 사용하십시오.

선적 서류 비치

우수한 웹 개발자가 되려면 속성, 라이브러리 등에 대한 설명서를 보는 것이 중요합니다. 다음은 사용 가능한 최상의 문서 중 하나입니다.

• W3.org- 웹 브라우저로 구현 된 대부분의 공식 문서. 이 문서들을 읽는 법을 배우는 것은 매우 중요합니다! 이것은 W3Schools와 아무런 관련 이 없습니다 .
• Mozilla Docs-최신 버전의 FireFox 제작자가 제공하는 매우 안정적인 타사 리소스입니다.
• WHATWG.org -W3에 대한 일종의 오픈 소스 경쟁자. 일부 브라우저는 때때로 여기에서 W3 이상의 특정 제안을 구현합니다.
• DevDocs- 공식은 아니지만 한 사이트에 많은 언어 문서가 있습니다. 꽤 편리합니다.

유용한 피드

• WebPlatformDaily- 웹에서 매일 업데이트되는 모든 내용 (주말 제외)을 다루는 뉴스 목록입니다.
• SitePoint- 다양한 것들에 대한 유용한 기사.
• WebDesignerDepot- 스팸성 일 수 있지만 실제 기사 대부분이 좋습니다.
• 스매싱 매거진 -고급 주제이지만 대부분은 모두 잘 읽습니다.
• 별도의 목록 -블로그 형식의 고급 지식입니다.

편집자

소규모 프로젝트 / 코드로 재생

• JSFiddle- 작은 프로젝트를 만들고 추적합니다.
• CodePen- 다른 사람들의 코드 기념일 로고를보고 다른 사람들이 볼 수 있도록 직접 제출하십시오.

전문 편집자

• 숭고한 텍스트
• 원자

다른 유용한 웹 사이트

• 내 리소스 페이지 -소개에서 반응 형 디자인에 이르기까지 웹 브라우저에서 애니메이션을 적용하는 다양한 방법에 대한 분석에 이르기까지 내가 컴파일하고있는 리소스 목록입니다.
• 프론트 엔드 개발자 안내서 -다양한 프론트 엔드 주제를 다루는 더욱 다양하고 유용한 게시물 모음입니다.
• WebFieldManual- 유용한 리소스가 많이 있습니다.
• StackOverflow의은 - 당신이있는 경우 특정 관련 질문을 프로그래밍을 StackOverflow의 당신에게 도움을받을 타의 추종을 불허합니다.
• LearnLayout -CSS에서 레이아웃을 수행하는 방법에 대한 기본 사항을 배웁니다.
• 웹 디자인에서의 포지셔닝 -아마도 가장 유용한 충돌 과정의 일부입니다.
• 알아야 할 30 가지 CSS 선택기-CSS를 익히고 나중에 시간을 절약하십시오. CSS 선택기 지식을 테스트 하는 멋진 작은 게임 도 있습니다 .
• Codrops CSS Reference- 간결하고 유용한 참조 페이지입니다.
• CodeMentor and Thinkful- 멘토링 비용을 1 대 1로 지불 할 수있는 사이트입니다.

좋아하는 웹 개발자 및 디자이너의 개인 블로그를 찾으십시오. 그들은 종종 훌륭하고 훌륭한 내용을 가지고 있습니다.

또한 매우 유용한 UI 디자인에 대한 소개를 작성했습니다 . 나는 그것에 추가로 훌륭한 자료를 연결했다.

충분히 강조 할 수는 없습니다. 배우는 가장 좋은 방법은 한계를 뛰어 넘고 지속적으로하는 것을 만드는 것입니다 .

도움이되는 웹 관련 사이트의 더 큰 (그리고 아마도 압도적 인) 목록을 보려면 WebDesignRepo를 확인하십시오 !

웹 디자인 (레이아웃 솔루션, 유용성, 그래픽 및 기술 솔루션)에 대해 배우기에 가장 적합한 장소는 다음과 같습니다.

해당 웹 사이트에 기사를 쓴 사람들의 모든 웹 사이트를 살펴보십시오.

24ways.org를 제외한 목록

또는 목록 디자인 및 부동 http://css.maxdesign.com.au/index.htm에 대해 더 기술적 인 것

웹 표준이 무엇인지 알아야합니다. 공식 소스는 다음과 같습니다. 월드 와이드 웹 컨소시엄 (w3c) 매우 기술적 인 것이기 때문에 배우기가 약간 까다 롭지 만 웹에서 작업하는 방식과 이유를 알고 싶을 때 확인하는 것이 좋습니다. 표준에 대해. 가장 유용한 것은 HTML 코드 의 유효성 검사기 입니다.

좋은 웹 사이트의 소스 코드를 잘 살펴보고 트릭을 배우는 것과 같은 것들의 비율을 자연스럽게 보는 것이 가장 좋은 방법 중 하나입니다 : http://www.cssbeauty.com/

그리고 훌륭한 웹 디자이너의 웹 사이트와 그들이하는 일을 살펴보십시오.

제이슨 산타 마리아
더스틴 커티스
조슈아 데이비스
데이비드 데 산드로
http://www.thinkingforaliving.org/
등 ...

그리고 나의 Delicious 책갈피 (다양한 것들이 있습니다, 당신은 그것들을 파고 필요하지 않은 것을 훑어 봐야합니다) http://www.delicious.com/Littlemad/webdesign

모든 프레임 워크를 배우기 전에 ...

웹 디자인 의 디자인 부분으로 관심을 돌리고 싶습니다 .

물론 Bootstrap 또는 다른 프레임 워크를 사용하여 웹 사이트를 쉽게 구축 할 수 있습니다. 그러나 그것은 설계되지 않았습니다. 프레임 워크는 기초가 될 수 있지만, 자신의 스핀을 넣지 않으면 기본적으로 다른 모든 웹 사이트와 같은 웹 사이트가 제공 됩니다.

그렇기 때문에 디자인의 기본 사항을 배우고 직접 적용 해 보라고 조언합니다.

자신 만의 (아름다운) 웹 사이트를 어떻게 만드나요?

이제 그것은 책의 가치가있는 질문이지만, 여기 몇 가지 조언이 있습니다 :

1. 디자인 의 기본 원리에 대해 읽으십시오 . 웹 디자인 의이 7 단계 입문서는 시작하는 데 도움이됩니다. 또한, Smashing Magazine에 관한이 기사 시리즈 .
2. 다른 사람들의 디자인을 관찰하십시오 . 그들은 어떤 기본 원칙을 사용했으며 어떻게 사용 했습니까? 그러나 관찰 만하지 말고 관찰 한 내용을 참고하십시오 .
3. 비즈니스 목표를 염두에두고 디자인 하십시오 . 웹 디자인 은 비즈니스 가 목표를 실현하고 사용자가 자신의 목표를 달성 할 수 있도록 돕기 위해 존재합니다. 두 가지 목표가 수렴되면 모두가 행복합니다. 따라서 그 목표는 항상 출발점이되어야합니다. 글꼴 선택, 색상 선택, 레이아웃 등이 목표에 따라 각 디자인 결정을 내려야합니다.
4. 디자인 전체 에 조화 가 있는지 확인하십시오 . 일반적으로 이것은 보내려는 메시지, 색상, 글꼴, 웹 사이트의 분위기 및 브랜드 간의 조화를 의미합니다. 사이징 결정을 안내하기 위해 모듈 식 스케일을 사용하여 설계에 조화를 임베딩하십시오. 이 미니 시리즈 는 조화와 모듈 형 스케일 사용에 대해 자세히 설명합니다.
5. 이 놀라운 소개 읽기 인쇄술 : Butterick의 실제적인 타이포그래피를 적어도,이, 또는 그것의 요약

처음부터 디자인을 시도하십시오

이제이 모든 것에 대해 읽고 HTML과 CSS를 알면 매우 간단한 디자인을 수행 할 수 있습니다.

흑백으로 텍스트 만있는 단일 페이지를 디자인하십시오 .

왜 문자 만? 텍스트는 웹에서 메시지를 전달하는 데 가장 많이 사용되는 매체이기 때문입니다. 따라서 웹 디자이너로서 텍스트를보기 좋게 만들고 즐겁게 읽을 수 있어야합니다.

왜 흑백입니까? 색상을 선택하는 것은 또 다른 짐승이기 때문입니다. 작은 단계를 밟으면 진행 상황에 만족하게되고 더 빨리 배우는 데 도움이됩니다.

배운 기본 디자인 원칙을 적용하고 다른 사람들의 디자인을 관찰 한 결과를 사용하고 해당 페이지의 목표에 대해 생각하고 모듈 식 스케일을 사용하여 텍스트 크기를 조정하십시오.

학습의 가장 좋은 방법은 물건을 만들어 웹 사이트를 만드는 것입니다.

표준 , alistapart , tutsplus를 읽으십시오 .

책이 필요한 경우 SitePoint 의 -HTML 유토피아 : CSS를 사용하여 테이블없이 디자인 하기를 보십시오 .

csszengarden 과 W3Schools 에 대한 일부 생각 .

솔직히 WordPress 사이트를 개발하는 방법을 배우는 것으로 시작합니다. 예, HTML, CSS, PHP 등을 사용하여 사이트를 코딩 할 수 있지만 WordPress 사이트를 더 빠르게 구성한 다음 필요에 따라 사용자 지정할 수 있습니다.

오늘의 표준을 배우기 시작하려면 http://nettuts.com/ 을 추천 합니다. 프리미엄 멤버쉽을 얻고 훌륭한 튜토리얼을 얻는 것이 도움이 될 것입니다. PSD에서 HTML로가는 것이 관심이 있다면 다루고 있습니다.

Nettuts는 Envato의 일부입니다. Envato에는 웹 개발, 워드 프레스, 벡터, 사진 및 비디오 편집 등을 다루는 여러 자습서 사이트가 있습니다. 시작하기 좋은 곳입니다.

그냥 내 2 센트.

웹 디자인에 대한 Photoshop의 초보자를 위해이 사이트 http://psdvibe.com/을 추천합니다

많은 자습서가있는 웹 사이트가 많이 있습니다. 그러나 웹 디자인을 배우는 가장 좋은 플랫폼은 http://teamtreehouse.com/ 입니다. 그것이 도움이되기를 바랍니다! 니크