개발 · 프로그래밍 프론트엔드

[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기 대시보드

(4.8) 132개의 수강평 ∙ 4,987명의 수강생

판다코딩

HTML/CSS JavaScript Bootstrap

무료

지식공유자: 판다코딩

총 18개 수업 (2시간 37분)

수강기한:

수료증: 미발급

난이도: --

지식공유자 답변이 제공되는 강의입니다

폴더에 추가 349

초급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.

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

✍️
이런 걸
배워요!

HTML / JS / CSS 를 사용하는 ToyProject

사이트를 직접 만들고 무료로 배포하는 법

하루 10분으로 배우는, 웹 프로그래밍.

HTML / JS / CSS

만을 가지고 나만의 MBTI 사이트를 만들어 보자!

1. 강좌 소개

HTML / JS / CSS를 이용하여 본인만의 MBTI 테스트 사이트를 제작하고, 배포하는 프로젝트형 강의입니다.

각 언어에 대한 기초적인 지식이 있으신 것을 가정하고 강의가 진행됩니다.

! 어느정도로 HTML / JS / CSS를 알아야 하나요?

HTML : 기초 태그 사용법
JS / CSS : ~ CSS선택자

정말 기초적인 내용만을 아셔도 충분하며, 기초를 벗어난 부분은 이론 설명을 첨부 할 예정입니다.

2. 강좌 특징

부분적으로 JavaScript es6 문법을 다룹니다.

BootStrap을 사용하여 반응형 웹사이트를 제작합니다.

netlify를 사용하여 직접 사이트를 배포합니다.

3. 배우는 것들

HTML / JS / CSS 를 사용한 ToyProject
배포가능한 나만의 MBTI 웹사이트 만드는 법

4. Special Thanks to

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

*. 내 사이트에 방문한 사용자의 데이터를 저장, 보여주고 싶어요!

본 강의에서는 서버와 DataBase를 다루지 않기에,

해당 기능을 도입할 수 없습니다.

이 강의에서 해당되는 내용을 다루었습니다 :)

🎓
학습 대상은
누구일까요?

ToyProject를 접해보고 싶은 사람

본인만의 사이트를 만들어보고 싶은 사람

📚
선수 지식,
필요할까요?

HTML 기초

JavaScript 기초

CSS 기초

문의 : nani6765@gmail.com

주요이력

[대외활동]
- 한국대학생IT경영학회 22기 부학회장

[경력/이력]
- 전 주식회사 아이보스 분석팀 (2019)
- 전 주식회사 미라이크 Developer (2020)
- 전 미디어프렌드 CTO (2021 ~ )

[강사/강의]
- 인프런 강의 다수
- 국비지원과정 특강 다수
- 부트캠프 HTML/CSS/VUE 강사

이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.

섹션 0. Intro 3 강 ∙ 11분

나만의 심리 테스트 사이트 소개 미리보기 01:24 Atom 에디터 플러그인 미리보기 02:18 강의 유의사항 미리보기 07:53

섹션 1. Main Page 4 강 ∙ 36분

페이지 레이아웃 미리보기 05:07

부트스트랩이란? 06:34

Main 디자인 12:43

화면 전환하기 12:33

섹션 2. QnA Page 3 강 ∙ 25분

QnA 구현하기 미리보기 14:07

QnA 디자인 07:31

진행 상태 바 구현하기 04:21

섹션 3. Result Page 4 강 ∙ 31분

Result 구현하기(1) 미리보기 05:51

결과 계산하기 10:27

알고리즘 개선하기 07:14

Result 구현하기(2) + Result 디자인 07:44

섹션 4. Share Page 2 강 ∙ 20분

Netlify로 베포하기 미리보기 05:57

카카오톡 공유버튼 구현하기 14:36

섹션 5. 질의응답 2 강 ∙ 31분

사용자 응답 사진으로 구현하기 20:57

사용자가 선택한 대답 결과페이지에서 보여주기 10:18

강의 게시일 : 2021년 02월 24일 (마지막 업데이트일 : 2021년 08월 18일)

수강생분들이 직접 작성하신 수강평입니다.

4.8

132개의 수강평

5점

4점

3점

2점

1점

VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순

꼭 필요한 요소들만 짧은 시간에 알차게 배운 것 같습니다. 입문 강의로 들었는데 앞으로 여기에 살을 붙여나가면서 공부하겠습니다. 감사합니다.

2023-02-21

지식공유자 판다코딩

감사합니다 :)

2023-03-31 0

오, 저는 너무 만족스러워요 이런 강의를 무료로 들을 수 있어서 정말 좋습니다. 유료강의임에도 이만큼 재밌게 가르쳐주고 디테일하게 설명해주는 강의가 많지 않거든요. 저는 유료강의였어도 돈을 지불하고 들었을 것 같아요. 간만에 즐겁게 강의 들으면서 공부할 수 있었습니다. 감사합니다.

2022-06-01

지식공유자 판다코딩

감사합니다 :)

2022-06-03 0

엄청 고급 스킬을 초보자도 알아듣기 쉽게 설명 너무 잘해주십니다. 감사합니다.

2023-02-21

지식공유자 판다코딩

감사합니다 :)

2023-03-31 0

알찬 기본기 강의였습니다~

2023-03-30

지식공유자 판다코딩

감사합니다 :)

2023-03-31 0

사이트 제작해보는데 많은 도움이될거같습니다.

2023-02-16

지식공유자 판다코딩

감사합니다 :)

2023-03-31 0

[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기 대시보드

초급자를 위해 준비한 [프론트엔드, 웹 개발] 강의입니다.

HTML / JS / CSS

만을 가지고 나만의 MBTI 사이트를 만들어 보자!

1. 강좌 소개

2. 강좌 특징

3. 배우는 것들

4. Special Thanks to

*. 내 사이트에 방문한 사용자의 데이터를 저장, 보여주고 싶어요!

이런 분들께 추천드려요!

초급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.