Read the Official Description

어떻게 웹 사이트를 확인하는 방법

이전에 웹 사이트를 구축 적이 당신은 어떤 코딩이나 디자인 경험이없는 경우에, 이것은 시작하는 장소입니다. 이 프로젝트에서 우리는 데스크톱, 태블릿, 모바일 장치에 대한 현대 포트폴리오 웹 사이트를 구축하는 방법에 대해 알아 봅니다. 우리는 기본적인 HTML과 CSS 구문을 시작합니다. 다음으로, 우리는 이미지 갤러리 및 연락처 페이지와 사용자 정의 웹 페이지를 구축하는 방법에 대해 알아 봅니다. 마지막으로, 우리는 웹에서 라이브 웹 사이트를 공유하는 방법을 걷는다.

당신은 학습 내용

  • 기본 HTML을 작성하는 방법
  • CSS와 웹 페이지의 스타일을하는 방법
  • 방법 도메인 구입 호스팅
  • 파일을 업로드하는 방법

HTML과 CSS를 시작

이 빠른 튜토리얼에서, 우리는 우리가 구축하는 것을 목표로하고 최종 웹 프로젝트의 예를 확인할 수 있습니다. 그런 다음, 우리는 우리의 웹 사이트의 구조를 형성하는 데 도움이됩니다 우리의 첫 번째 HTML 요소를 코딩하는 방법을 배울 수 있습니다. 마지막으로, 우리는 몇 가지 간단한 CSS와 함께 우리의 웹 사이트를 스타일링하여 마무리합니다. 이 두 가지 언어로, HTML과 CSS는, 모든 웹 프로젝트의 기본 빌딩 블록을 형성한다.

HTML 먼저

HTML 문서의 구조를 설명하는 특별한 컴퓨터 언어이다. HTML, 우리는 텍스트, 이미지 및 콘텐츠의 다른 많은 유형을 포함하는 웹 페이지를 만들 수있다. 첫째, 우리는 짧은 역사 수업을 시작합니다. 그 다음 우리는 간단한 페이지 구조를 만들어 HTML의 최신 발전을 파고 있습니다.

HTML 콘텐츠 만들기

웹 사이트를 구축 할 때, CSS로 이동하기 전에 가능한 한 HTML 구조를 많이 작성하는 것이 좋습니다. 실제로, 당신은 HTML과 CSS,하지만 쉽게 처리 할 것이다 첫번째 구조의 대부분을 건물 사이를 앞뒤로 이동합니다. 먼저 우리는 우리의 사이트에 대한 탐색을 작성하여 시작합니다. 그런 다음, 우리는 이미지 갤러리 및 기타 페이지의 콘텐츠를 구조화로 이동할 수 있습니다. 마지막으로, 우리는 우리의 HTML 페이지에 CSS 파일을 포함하여 마무리합니다.

CSS : 캐스 케이 딩 스타일 시트

CSS는 우리가 잘 조직과 아름다운 디자인을 할 수있는 언어입니다. HTML은 정보의 구조를 설명하는 동안, CSS는 정보를 시각적으로 제시하는 방법을 설명합니다. 우리는 우리의 사이트에 대한 CSS 코딩을 시작하기 전에, 우리는 CSS의 구문에 대한 학습 시간을 보낼 것입니다.

색상 및 글꼴을 사용자 정의

CSS에서 색상을 16 진수라는 특수 코딩 형식을 필요로한다. 우리는 먼저 16 진수에 대해 배울 것입니다, 그리고, 우리는 우리의 색상 값에 사용할 수 있습니다. 그런 다음, 우리는 웹 페이지에 글꼴을 포함하는 방법뿐만 아니라 허가 된 글꼴을 찾는 방법을 배울 수 있습니다.

스타일링 웹 페이지 및 탐색

이미지 갤러리뿐만 아니라 수평 탐색 스타일링에 필요한 기술은 실제로 아주 유사하다. 첫째, 우리는 이미지의 그룹을 스타일과 우리의 이미지 갤러리를위한 행과 열로 변환하는 방법을 배우게됩니다. 그 후, 우리는 정렬되지 않은 목록에서 가로 방향 탐색을 만들 비슷한 CSS 기술을 사용합니다.

웹 사이트에 페이지 추가

다수의 웹 페이지를 함께 연결되는 경우, 페이지는 총괄적 사이트로 공지된다. 홈 페이지는 모두 우리의 연락처 페이지 및 페이지에 대한 템플릿 역할을합니다. 두 페이지에서 우리는 몇 가지 새로운 CSS 기술을 배우게됩니다.

반응 형 웹 디자인 및 테스트

현대 웹 사이트 염두에 모바일 및 데스크톱 사용자와 내장되어 있습니다. (대신 고정 된 픽셀) 유체 비율로 사이트를 구축함으로써, 우리는 좋은 출발입니다. 그러나 상기 경험을 향상시키기 위해 미디어 쿼리 불리는 특별한 CSS 규칙을 추가 할 수있다. 반응 형 디자인을 추가 한 후, 우리는 약간의 장치에서 사이트를 테스트합니다.

웹 사이트 공유

우리는 우리의 웹 사이트를 코딩을 마친 지금은 다른 사람들이 볼 수 있도록 웹에 살고 배포 할 수있는 시간이다. 첫째, 우리는 우리의 도메인과 호스팅을 구입합니다. 그 후, 우리는 우리의 서버로 파일을 배치하는 파일 전송 프로토콜 (FTP)을 사용한다.

HTML과 CSS 문제를 디버깅

웹 사이트를 만들 때, 문제 해결 능력은 필수적이다. 첫째, 우리는 우리의 코드 문제를 찾기 위해 개발자 도구에 액세스하는 방법을 배우게됩니다. 그 후, 우리는 몇 가지 일반적인 HTML과 CSS 문제를 통해 안내합니다 얼마나 신속하게 해결하기 위해.

선생

닉 페티트

닉 트리 하우스에서 교사와 독립적 인 게임 개발자이다. 그의 트위터 핸들 @nickrp입니다.

Program taught in:
영어

See 4 more programs offered by Treehouse »

이 과정은 온라인
시작 날짜
Open Enrollment
Duration
학교와 연락
파트타임
전일제
Deadline
By locations
By date
시작 날짜
Open Enrollment
종료 날짜
Application deadline

Open Enrollment

Location
Application deadline
종료 날짜