[하루 10분|Web Project] HTML/JS/CSS로 나만의 MBTI 사이트 만들기

HTML / JS / CSS 만을 가지고 직접 MBTI 테스트 사이트를 만들고, 배포해보는 Project 사이트를 제작합니다.

클래스 소개
난이도
쉬움
카테고리
웹 프로그래밍 - 프로그래밍
태그
자바스크립트, CSS, HTML
추천 학습대상
- ToyProject를 접해보고 싶은 사람
- 본인만의 사이트를 만들어보고 싶은 사람

⏰하루 10분으로 배우는 웹 개발 기초





웹 개발이 어렵다구요?


웹 개발 기초 중의 기초인
HTML / CSS / JS!

공부는 했는데 어떻게 활용해야 할 지
전혀 감을 못 잡고 계신다구요?

하루 딱 10분!

저와 함께 HTML / CSS / JS를 이용하여
여러분만의 MBTI 테스트 사이트를 제작하고
배포해보는 경험까지 가져가세요!




웹 기초, 이 정도만 알고 시작하세요


본 강좌는 HTML의 기초 태그 사용법과
CSS 선택자, JS 기초 문법 정도를 알고 있으면
충분히 수강하실 수 있는 강좌입니다

기초를 벗어난 부분에 대해서는
이론 설명까지 함께 포함되어 있어요

JavaScript ES6 문법 일부와 Bootstrap을
이용하여 반응형 웹 사이트를 제작하고,
netlify를 사용하여 사이트를 배포해봅시다




가장 많은 사랑을 받고 있는 강좌

HTML, JS, CSS는 웹 개발에 입문할 때 가장 처음으로 배우는 도구들입니다 다음 스텝은 Jquery, ES6, Node 혹은 다른 프레임워크 등을 통해 실력을 키워나가는 단계고요 문제는 입문과 적용 사이의 갭이 생각보다 크다는 점입니다 갭을 줄이려면 배운 지식을 온전히 나만의 것으로 만드는 게 중요해요 가장 좋은 방법은 직접 프로젝트로 구현해 보는거죠 나만의 MBTI 사이트 만들기는 프로젝트 경험과 함께 수강생분들께 '이만큼이나 많은 걸 배우셨어요! 이런 것도 만들 수 있어요!'라는 응원의 메시지를 전하는 강좌입니다










누구나 쉽게 할 수 있어요


판다코딩

現 미디어프렌즈 CTO (2021)

前 주식회사 아이보스 분석팀 (2019)
前 주식회사 미라이크 Developer (2020)

건국대학교 지리학과/컴퓨터공학과 및
휴먼ICT융합인재학과로 재학 중

한국 대학생 IT경영학회 21기 교육기획 팀원
한국 대학생 IT경영학회 22기 부학회장


Special Thanks to

강의를 제작하며 많은 참고를 한 사이트를 소개해드리려고 합니다.

나를 알아보는 10가지 질문 (사이트)

나를 알아보는 10가지 질문 (깃헙)

제작자님 블로그




all Icon made by Freepik from www.flaticon.com


교육 과정
모두 펼치기
  • 01
    intro
  • 나만의 심리 테스트 사이트 소개
    Atom 에디터 플러그인
    강의 유의사항
  • 02
    Main Page
  • 페이지 레이아웃
    부트스트랩이란?
    Main 디자인
    화면 전환하기
  • 03
    QnA Page
  • QnA 구현하기
    QnA 디자인
    진행 상태 바 구현하기
  • 04
    Result Page
  • Result 구현하기 (1)
    결과 계산하기
    알고리즘 개선하기
    Result 구현하기 (2) + Result 디자인
  • 05
    Share Page
  • Netlify로 배포하기
    카카오톡 공유버튼 추가하기
  • 06
    질의응답
  • 사용자 응답 사진으로 구현하기
마지막 업데이트|2021년 09월 02일
강의자 소개
안녕하세요. 구름에듀 캡틴 판다코딩입니다. 함께 학습을 시작해봐요!

강좌 후기
무료

평균평점
5.0
난이도
쉬움
수강기간
평생 무제한