자신의 웹 사이트 코드

웹 페이지를 디자인하거나 온라인으로 사이트를 만드는 방법을 배우고 싶었던 적이 있습니까? 오늘,우리는 어떻게 자신의 개인 웹 사이트를 구축하는 방법을 보여 드리겠습니다! 6 월 강사 마야 방법의 모든 단계를 통해 당신을 걸어 볼 수있는 튜토리얼 비디오를 확인하십시오.

웹 개발 학습의 중요성에 대한 자세한 내용은 비디오와 함께 제공되는 단계별 가이드와 웹 개발 경험을 더욱 향상시키는 데 사용할 수 있는 도구에 대해 알아보십시오.

기억:

  • 이 자습서의 웹 사이트는 교육 목적을위한 예제 프로젝트 일뿐입니다. 시작하기 전에 미성년자가 귀하의 성명,주소 또는 전화 번호와 같은 개인 정보를 온라인에 게시해서는 안된다는 것을 명심하십시오! 또한 개인 사진을 온라인으로 업로드 할 때주의하십시오.
  • 업로드할 수 있는 것이 무엇인지 잘 모르는 경우 항상 성인에게 확인하십시오.

누구를위한 것입니까?

초급 코딩프로젝트 개인 웹사이트를 위한 학습 결과.
이 프로젝트 정보 및 학습 결과 요약은 이 코딩 프로젝트가 귀하에게 적합한 지 결정하는 데 도움이 됩니다.

이 프로젝트는 아이들을위한 자바 스크립트 레벨 1 코딩 클래스에 속합니다. 이 튜토리얼은 약 121 줄의 코드 길이의 중간 도전 프로젝트를 원하는 학생들을위한 것입니다. 하지만 만약 당신이 완전히 새로운,우리는 또한이 비디오에서 더 많은 기본 설명!

이 튜토리얼은 코딩 초보자,특히 디자인이나 예술에 관심이있는 사람들에게 좋습니다. 우리는 학생들이 함께 따라 12 세 이상 될 것을 권장합니다.학습 결과를 위해,당신은 사업부,목록,링크,위치,디스플레이,텍스트(1/2/피),글꼴 및 일반 연수원과 연습을 많이 얻을 수 있습니다. 이 프로젝트는 당신이 얼마나 창의적인에 따라,당신에게 약 40 분 이상 걸릴 것으로 추정된다,그러나 당신은 당신의 자신의 속도로 빠르게 또는 느리게 이동해야합니다!

왜 웹 개발을 배울?

요즘 웹 사이트를 만들기 위해 웹 개발이나 코딩을 알 필요가 없습니다. 이 문서의 끝으로,우리는 당신에게 할 과정이 매우 쉽게 만들 것입니다 몇 드래그 앤 드롭 웹 사이트 제작자를 보여 드리겠습니다. 그렇다면 왜 웹 개발을 배워야합니까? 그건 좋은 질문입니다.

무제한 사용자 정의

쉬운 웹 사이트 생성 도구는 모두 실제로 제한됩니다. 그들은 당신에게 초보자가 사용하기 매우 쉬운 테마와 플러그인의 집합을 제공합니다–만큼 당신이 그들을 수정할 필요가 없습니다로.

당신이 테마를 수정하거나 웹 사이트와 더 많은 사용자 정의 뭔가를해야 할 때,그러나,당신은 웹 개발 코드의 적어도 기본적인 이해가 필요합니다. 예를 들어,자바 스크립트 지식의 비트와 함께,당신은 당신의 웹 사이트에 거의 모든 소셜 미디어 피드를 통합 할 수 있습니다!

코딩 경력&기초

코딩 경력을 생각해 본 적이 있다면 웹 디자인 및 웹 개발 지식도 큰 출발점을 제공 할 것입니다. 웹 개발은 예술과 디자인에 관심이있는 어린이와 새로운 코더가 코딩 기초를 배우면서 열정을 탐구하는 데 도움이됩니다. 경력은 제쳐두고,아이들을위한 코딩 학습에 수많은 삶의 기술 혜택도 있습니다.

많은 분야에 적용

마지막으로,자신의 웹 사이트를 구축 할 수있는 것은 오늘날의 디지털 시대에 가치있는 기술이다. 블로거는 개발자가 그들에게 사용자 정의 블로그를 만들고 싶어. 인터넷 기업은 아마존에 항목을 게시하는 대신 전자 상거래 사이트를 구축 할 개발자를 찾고 있습니다.

그것은 웹 사이트 디자인 및 개발을위한 황금 시대,그리고 자신의 사이트를 구축하는 방법을 배울 수있는 좋은 시간이다!

시작하자!

우리는 간단한 개인 웹 사이트를 만드는 방법을 배울 것입니다.

프로젝트 데모

코드 작성을 시작하기 전에 완성 된 프로젝트가 참조 용으로 어떻게 작동하는지 확인하십시오. 우리의 프로젝트 웹 사이트의 모든 기능을 확인하기 위해 비디오를 시청.

문제가 발생할 경우 당신은 또한 우리의 프로젝트 솔루션 코드를 볼 수 있습니다.

시작하기 전에 염두에 두어야 할 사항:

  • 텍스트가있는 이미지 헤더가 있습니다. 텍스트는 서로 다른 크기이며,두 개의 서로 다른 글꼴을 사용합니다. 또한 흰색 윤곽이 있습니다.
  • 아래의 흰색 부분은 두 부분이 나란히 있습니다.
  • 우리는 하이퍼 링크의 목록을 가지고,다른 페이지에 해당 링크. 당신이 그들을 위로 마우스를 가져 가면 그들은 파란색으로 변경합니다.
  • 텍스트 나 소개 섹션도 있습니다.
  • 그 아래에는 다른 색상의 배경을 가진 경험 섹션이 있습니다.

프로젝트 코드화 단계

웹 사이트를 구축하려면 다음 단계를 따릅니다. 어떻게 강사 마야 코드 각 부분을 볼 수있는 자습서를보고,아래의 설명과 함께 따라.

  1. 이미지 헤더&텍스트를 추가합니다.
  2. 공유할 링크 목록을 만듭니다.
  3. 내 정보 섹션을 만듭니다.
  4. 경험 섹션을 만듭니다.

단계별 자습서

1 단계:이미지 헤더&텍스트를 추가합니다.

  • 이미지와 텍스트를 포함 할 상대 위치가있는 사업부를 만듭니다.
  • 텍스트를 포함하는 사업부를 만들고,이미지에 배치 절대 위치를 사용합니다.
  • <h1><h3>을 사용하여 텍스트를 추가합니다.
  • 텍스트 글꼴을 수정합니다.
  • 이미지 주위의 여백&여백을 제거합니다.

2 단계:공유하려는 링크 목록을 만듭니다.

  • 링크 및 정보 섹션을 포함 할 상대 위치가있는 사업부를 만듭니다.
  • 사업부에 패딩 추가.
  • 링크 목록을 포함할 인라인 블록 표시를 사용하여 사업부를 만듭니다.
  • <ul>를 사용하여 목록을 만듭니다.
  • <li><a>를 사용하여 링크를 만듭니다.
  • <i>와 글꼴 멋진 링크를 사용하여 아이콘을 추가하십시오.
  • 원본처럼 보이도록 수정하십시오.

3 단계:내 정보 섹션을 만듭니다.

  • 내 정보 섹션을 포함 할 인라인 블록 디스플레이가있는 사업부를 만듭니다.
  • <h3><p>를 사용하여 텍스트를 추가합니다.

4 단계:경험 섹션을 만듭니다.

  • 경험 섹션을 포함 할 상대 위치가있는 사업부를 만듭니다.
  • 첫 경험을위한 사업부를 만들고<h4><p>를 사용하여 텍스트를 추가하십시오.
  • 더 많은 경험 사업부를 추가하십시오!

다음 단계

잘 했어! 지금,귀하의 웹사이트에 더 많은 섹션을 추가 하 게 자유롭게 느끼 십시오. 일부 아이디어에는 작업한 프로젝트나 참여 중인 클럽에 대한 섹션이 포함될 수 있습니다. 또한 깃허브 및 깃허브 페이지를 사용하여 새 웹사이트를 웹에 업로드할 수도 있습니다.

웹 페이지 생성 도구

여러 사람이 웹 페이지 생성 도구를 사용하여 웹 사이트를 구축

앞서 언급했듯이 여러 웹 사이트 제작자가 있습니다. 대부분의 최고의 웹 사이트 빌더는 템플릿,드래그 앤 드롭 인터페이스 및 무료 개인 웹 사이트를 만드는 데 필요한 기타 기능을 제공하여 프로세스를 간소화하도록 만들어졌습니다.

웹 개발에 대한 기본적인 이해가 있다고 해서 이러한 도구를 잊어야 한다는 의미는 아닙니다. 새 웹 사이트를 호스팅하고 사용자 정의 도메인(웹 사이트의 이름과 주소)을 찾고 웹 디자인 프로세스 속도를 높일 수있는 템플릿,테마 및 플러그인을 제공 할 수 있습니다.

기초를 돌봄으로써,이러한 도구는 당신에게 완벽하게 귀하의 웹 사이트를 사용자 정의에 새로 발견 된 코딩 기술을 집중할 수있는 기회를 제공! 또는-당신이 처음부터 모든 것을 구축 할 경우에도-이러한 도구는 당신에게 무엇을 구축하고 그것을 구축하는 방법에 대한 몇 가지 좋은 아이디어를 제공 할 수 있습니다.

다음은 웹 페이지 생성을 위한 가장 인기 있는 도구 중 일부입니다:

  • 윅스

윅스는 거기에 웹 사이트 빌더를 사용하는 가장 쉬운 방법 중 하나입니다. 그들의 자유로운 계획은 그것에게 아이의 웹사이트 건축업자를 위한 중대한 선택권을 만들기 위하여 충분히 완전하다,sitename.wixsite.com).너가 자유로운 층을 빨리 성장하면 그들은 적당한 값을 매기기에 계획을 지불했다.

  • 워드프레스

사람들은 무료 웹 사이트 빌더로 알고 있지만,어떤 워드 프레스는 정말 콘텐츠 관리 시스템입니다. 간단한 의미에서,차이점은 웹 사이트 빌더는 사용하기 쉽다는 것입니다,하지만 사용자 정의에 대한 더 많은 기회를 제공합니다. 워드 프레스 자체는 무료이지만,당신은 당신이 당신의 자신의 도메인 이름을 원하는 경우 몇 가지 테마와 플러그인 또는 호스팅 비용을 지불해야 할 수도 있습니다.

  • 위블리

위 블리는 많은 윅스 같은 웹 사이트 빌더입니다. 주요 차이점은 위 블리가 훨씬 적은 사용자 정의 기능을 제공한다는 것입니다,그것은 아이들을위한 코딩에 좋은 곳입니다 사용자 친화적 인 옵션을,하지만 귀하의 웹 사이트 구축 기술이 향상으로 당신과 함께 성장할 가능성이 적은.학습 계속: 어린이를위한 웹 개발 수업축하,당신은 지금 당신의 자신의 웹 사이트를 가지고! 이것은 당신이 믿을 수 없을만큼 자랑스러워해야하는 흥미로운 단계입니다. 배움도 여기서 멈출 필요가 없습니다.

학습 유지:아이들을위한 웹 개발 과정

6 월 학습은 당신에게 당신이 당신의 새로운 사이트를 과급,또는 웹 응용 프로그램 및 포트폴리오를 구축에 이동하는 데 필요한 기술을 제공 할 것입니다 아이들을위한 웹 프로그래밍 과정을 제공합니다. 웹 개발 외에도 스크래치,파이썬,자바,씨++등과 같은 다양한 언어로 8-18 어린이를위한 코딩 과정을 가르칩니다.

아이들을위한 우리의 온라인 과정을 확인,또는 우리의 주니 어드바이저 팀에 문의하는 과정은 학생에 가장 적합한 배울 수!

Articles

답글 남기기

이메일 주소는 공개되지 않습니다.