[10 minutes a day | Web Project] Create your own psychological test site with HTML/JS/CSS

We create a project site to create and distribute a psychological test site using only HTML/JS/CSS.

(4.8) 141 reviews

5,371 learners

pandacoding

HTML/CSS

JavaScript

Bootstrap

Reviews from Early Learners

What you will learn!

ToyProject using HTML/JS/CSS
How to create your own site and distribute it for free

Learn web programming in 10 minutes a day .

HTML / JS / CSS

Let's create your own MBTI site with just this!

1. Course Introduction

This is a project-based course where you will create and distribute your own MBTI test site using HTML/JS/CSS.

The course assumes basic knowledge of each language.

! How much HTML/JS/CSS do I need to know?

HTML: How to Use Basic Tags
JS / CSS: ~ CSS selectors

It is sufficient to know only the very basics, and I will attach theoretical explanations for parts that go beyond the basics.

2. Course Features

Partially covers JavaScript ES6 syntax.

Build a responsive website using BootStrap.

Deploy your site directly using netlify.

3. Things to learn

ToyProject using HTML/JS/CSS
How to Create Your Own Distributable MBTI Website

4. Special Thanks to

I would like to introduce you to a website that I used as a reference while preparing the lecture.

*. I want to store and display data of users who visited my site!

Since this lecture does not cover servers and databases,

The feature cannot be introduced.

This lecture covered the relevant content :)

Recommended for
these people

Who is this course right for?

People who want to get in touch with ToyProject
People who want to create their own site

Need to know before starting?

HTML Basics
JavaScript Basics
CSS Basics

Hello
This is

22,360

Learners

566

Reviews

268

Answers

4.8

Rating

Courses

문의 : nani6765@gmail.com

Curriculum

All

18 lectures ∙ (2hr 37min)

Section 1. Intro

3 lectures ∙ (11min)

1. Introducing my own psychological test site
01:24
2. Atom editor plugin
02:18
3. Lecture Notes
07:53

Section 2. Main Page

4 lectures ∙ (36min)

4. Page layout
05:07
5. What is Bootstrap?
06:34
6. Main Design
12:43
7. Switch screens
12:33

Section 3. QnA Page

3 lectures ∙ (25min)

8. Implementing QnA
14:07
9. QnA Design
07:31
10. Implementing a progress bar
04:21

Section 4. Result Page

4 lectures ∙ (31min)

Section 5. Share Page

2 lectures ∙ (20min)

Section 6. Q&A

2 lectures ∙ (31min)

Published:

Last updated:

Reviews

All

141 reviews

4.8

141 reviews

bella8392
Reviews 2
∙
Average Rating 5.0
5
100% enrolled
오, 저는 너무 만족스러워요 이런 강의를 무료로 들을 수 있어서 정말 좋습니다. 유료강의임에도 이만큼 재밌게 가르쳐주고 디테일하게 설명해주는 강의가 많지 않거든요. 저는 유료강의였어도 돈을 지불하고 들었을 것 같아요. 간만에 즐겁게 강의 들으면서 공부할 수 있었습니다. 감사합니다.
- 판다코딩
  Instructor
  감사합니다 :)
thehrto12
Reviews 1
∙
Average Rating 5.0
5
67% enrolled
알찬 기본기 강의였습니다~
- 판다코딩
  Instructor
  감사합니다 :)
rainbowblade
Reviews 11
∙
Average Rating 5.0
5
83% enrolled
엄청 고급 스킬을 초보자도 알아듣기 쉽게 설명 너무 잘해주십니다. 감사합니다.
- 판다코딩
  Instructor
  감사합니다 :)
indie2k
Reviews 3
∙
Average Rating 5.0
5
100% enrolled
꼭 필요한 요소들만 짧은 시간에 알차게 배운 것 같습니다. 입문 강의로 들었는데 앞으로 여기에 살을 붙여나가면서 공부하겠습니다. 감사합니다.
- 판다코딩
  Instructor
  감사합니다 :)
우동완
Reviews 7
∙
Average Rating 5.0
5
100% enrolled
사이트 제작해보는데 많은 도움이될거같습니다.
- 판다코딩
  Instructor
  감사합니다 :)

Free

pandacoding's other courses

Check out other courses by the instructor!

[하루10분|Web-App] 생애최초 웹프레임워크 Ruby on Rails

판다코딩

웹 프레임워크의 개념, MVC 디자인 패턴에 대하여 학습합니다. 이후 Ruby 언어 기반 웹 프레임워크인 Ruby on Rails를 통하여 CRUD 서비스를 구현합니다.

입문

Ruby on Rails

[하루10분|Web-App] 생애최초 웹프레임워크 Ruby on Rails

판다코딩

[하루 10분|GA] Google Analytics(GA) 보고서 살펴보기

판다코딩

Google Analytics(GA)의 데이터 구조에 대해 이해하고 보고서 기능을 학습합니다.

입문

Google Analytics

[하루 10분|GA] Google Analytics(GA) 보고서 살펴보기

판다코딩

Express 튜토리얼 : 웹 서비스를 위한 핵심 API

판다코딩

Express를 통해 Node 환경에서 웹 어플리케이션을 위한 서버를 구축합니다. CRUD Service, User Authentication 등을 다루면서 학습해봅니다.

초급

Express

Express 튜토리얼 : 웹 서비스를 위한 핵심 API

판다코딩

MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React

판다코딩

MERN Stack을 활용하여 커뮤니티 어플리케이션을 제작하고, 배포합니다. (MongoDB, Express, React, Node + Firebase)

초급

MongoDB, Express, React

MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React

판다코딩

[하루 10분|C++] 누구나 쉽게 배우는 C++ 프로그래밍 입문

판다코딩

프로그래밍 입문자를 위한 'C++' 강좌입니다

입문

C++

[하루 10분|C++] 누구나 쉽게 배우는 C++ 프로그래밍 입문

판다코딩

Similar courses

Explore other courses in the same field!

[웹 개발 풀스택 코스] 순수 자바스크립트 기초에서 실무까지

개발자의 품격

본 강의는 풀스택 웹 개발자 양성을 위한 [웹 개발 풀스택 코스] 강의 시리즈 중 자바스크립트에 대한 강의입니다. 이 강의는 지식공유자의 저서 <바닐라 자바스크립트>의 내용을 바탕으로 만들어진 강의입니다.

초급

JavaScript, vanilla-javascript

[웹 개발 풀스택 코스] 순수 자바스크립트 기초에서 실무까지

개발자의 품격

TS/JS 디자인 패턴 with Canvas: 제로초에게 제대로 배우기

제로초(조현영)

타입스크립트/자바스크립트로 그림판을 만들어보며 다양한 디자인 패턴의 쓰임과 장단점을 알아봅니다. canvas api를 배울 수 있는 것은 보너스!

중급이상

디자인 패턴, 객체지향, TypeScript

TS/JS 디자인 패턴 with Canvas: 제로초에게 제대로 배우기

제로초(조현영)

포트폴리오 사이트 만들고 배포까지! : 웹 개발 입문 활용편

짐코딩

HTML&CSS, 자바스크립트를 배웠다면 이를 활용하여 직접 포트폴리오 사이트를 만들고 배포해 보세요. 실제로 써 보는 것은 우리의 실력을 향상시키는 데 큰 도움이 될 것입니다.

입문

HTML/CSS, JavaScript, github-pages

포트폴리오 사이트 만들고 배포까지! : 웹 개발 입문 활용편

짐코딩

[코드캠프] 시작은 프리캠프

코드캠프

코딩 부트캠프의 독보적인 커리큘럼으로 만든 강의입니다. 가장 기초적이고 실무에서 꼭 필요한 내용들로 구성되어 있어요. '누구나 가능한 개발자로의 커리어 전환' 이 강의로 시작하세요.

입문

HTML/CSS, JavaScript

[코드캠프] 시작은 프리캠프

코드캠프

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

잔재미코딩 DaveLee

현업에서 실제 웹서비스를 개발한 경험을 기반으로, 입문자를 위한 실제 상용화도 가능한 수준의 웹과 앱서비스를 개발하는 것을 목표로 하는 풀스택 시리즈 강의입니다. 이를 위한 Part2 강의로 다양한 기술이 존재하는 프런트엔드 기술에서 반응형, 호환성까지 고려한 최신 HTML5, CSS3, 바닐라 자바스크립트 (Javascript) + ES6 를 모두 견고하게 싹 정리하는 강의입니다.

입문

HTML/CSS, JavaScript, ES6

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

잔재미코딩 DaveLee

제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]

nhcodingstudio

📌 이 강의는 전략형 AI 틱택토 프로젝트로 시작해, 객체지향 프로그래밍의 핵심 개념까지 실전 예제로 완성하는 커리큘럼입니다. 게임 구현으로 로직 설계와 AI 전략 사고를 훈련하고, 이어서 상속, 조합, 위임, 캡슐화 같은 OOP 설계 기술을 직접 코드로 경험합니다. 실제 프로젝트로 문법을 넘어서 ‘설계하는 개발자’로 성장하고 싶은 분께 추천드립니다.

초급

JavaScript, HTML/CSS, 객체지향

제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]

nhcodingstudio

자바스크립트 입문자를 위한 강의

JeongTaeHyun

자바스크립트 입문을 하시고 싶으신가요? 그럼 저의 강의를 선택해 주세요.

초급

JavaScript

자바스크립트 입문자를 위한 강의

JeongTaeHyun

코어 자바스크립트

정재남

ES6 이전까지의 자바스크립트 전체를 관통하는 핵심 개념들에 대하여, 전반적인 흐름을 살펴보는 강의입니다.

초급

JavaScript

코어 자바스크립트

정재남

[2024]리베하얀의 HTML 기초 실무

리베하얀

HTML 기초문법을 다루는 강의입니다. 다양한 사례의 미션이 존재하며, 실무에서 사용가능한 최신문법까지 알려드립니다.

입문

HTML/CSS, nvda

[2024]리베하얀의 HTML 기초 실무

리베하얀

순수 html/css/js만을 활용한 반응형웹 제작[실전편] 부트캠프

영코디 킴쌤

부트스트랩(BOOTSTRAP)을 사용하지 않고 순수하게 html/css/js 만을 활용하여 디바이스별로 다양한 레이아웃을 구현할 수 있는 반응형 웹페이지 만들기[2024년 최신판] 수업의 실전 제작수업입니다.

초급

HTML/CSS, 반응형 웹, 인터랙티브 웹

순수 html/css/js만을 활용한 반응형웹 제작[실전편] 부트캠프

영코디 킴쌤

Firebase 시리즈 #2: AI 한자 추천 & 필기 학습 플랫폼

닭강정

🔥 한자 학습을 위한 맞춤형 플랫폼 구축! Google Gemini AI와 Firestore를 활용해 나만의 한자 단어장, 획순 애니메이션, 필기 인식까지 직접 구현해보세요!

초급

gemini, HTML/CSS, TailwindCSS

Firebase 시리즈 #2: AI 한자 추천 & 필기 학습 플랫폼

닭강정

Do it! HTML5 + CSS3 웹 표준의 정석 전면 개정 2판

이지스퍼블리싱

탄탄한 웹 기본기를 쌓고 싶은 분은 여기로 모이세요!

입문

HTML/CSS

Do it! HTML5 + CSS3 웹 표준의 정석 전면 개정 2판

이지스퍼블리싱

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

그랩

왕초보도 할 수 있는 웹, 서버, 모바일 앱, 머신러닝까지 익히는 끝판왕 풀스택 강의!! 개발을 어디서부터 시작할지 막막했다면 이 강의를 강력 추천할게요. Javascript 하나로 진행합니다!

입문

JavaScript, React, Node.js

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

그랩

2024 html/css 기초탄탄 초스피드 완강코스

J.영

html/css초보 입문자를 대상으로 기초를 탄탄하게 다지며, 물론 반응형 레이아웃 제작 실전을 배울 수 있습니다.

입문

HTML/CSS, html-layout, css3

2024 html/css 기초탄탄 초스피드 완강코스

J.영

바이브 코딩 With Claude Code로 웹 서비스 만들기

개발 까마귀

현직 스타트업 CTO가 실제 서비스와 여러 외주를 통해서 얻은 바이브코딩 지식 전수해드립니다.

입문

HTML/CSS, JavaScript, Next.js

바이브 코딩 With Claude Code로 웹 서비스 만들기

개발 까마귀

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

코드캠프

코딩과 사랑에 빠져버린 8년차 풀스택 개발자 Captain의 사심이 가득 담긴 커리큘럼이에요. 백엔드의 모든 것을 다 알려주고 싶은 Captain의 마음이 녹아있죠! 이 강의를 듣다보면 '이렇게까지 알려준다고?' 하는 생각을 떨칠 수 없을 거예요. 모두가 어려워하는 부분까지 꼭꼭 씹어 떠먹여주는 이 강의로 시작해 볼까요?

입문

NestJS, Node.js, JavaScript

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

코드캠프

웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

깡코딩

웹게임도 만들고, 프론트엔드 웹 개발 스킬도 배우는 1석 3조 수업! 독자적인 아이디어로 JavaScript, CSS, HTML을 활용해 게임을 만들 수 있는 방법을 수업으로 만들었습니다!

초급

인터랙티브 웹, JavaScript, HTML/CSS

웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

깡코딩

웹디자인기능사 자격증 대비(2023년 출제기준 반영버전)

webstoryboy

웹디자인기능사 출제기준 2023년 버전에 맞추어 누구나 합격할 수 있도록 제작하였습니다. 5가지 유형을 배우고 빠르게 합격합시다!

초급

HTML/CSS, jQuery, JavaScript

웹디자인기능사 자격증 대비(2023년 출제기준 반영버전)

webstoryboy

Google Sheets로 만드는 Simple Blog!

제주코딩베이스캠프

Google Spreadsheets + Google apps script + Google drive + Bootstrap를 사용해, 24시간 무료로 동작하는 Simple한 blog를 빠르게 만들어봅시다!

초급

Bootstrap, Google Apps Script, VSCode

Google Sheets로 만드는 Simple Blog!

제주코딩베이스캠프

실무중심의 HTML5 시각화 프로그래밍

트레이딩온

데이터를 가공하여 표의 형태로 표현할 수도 있지만 가장 중요한 것은 데이터를 인간이 한 눈에 알아 볼 수 있게 표현하는 것입니다.

초급

HTML/CSS

실무중심의 HTML5 시각화 프로그래밍

트레이딩온

[10 minutes a day | Web Project] Create your own psychological test site with HTML/JS/CSS

Reviews from Early Learners

What you will learn!

HTML / JS / CSS

Let's create your own MBTI site with just this!

1. Course Introduction

2. Course Features

3. Things to learn

4. Special Thanks to

*. I want to store and display data of users who visited my site!

Recommended for these people

HelloThis is .css-1q3zd4q{text-decoration-line:underline;text-underline-position:under;text-underline-offset:1px;}

Curriculum

Reviews

pandacoding's other courses

Similar courses

Recommended for
these people

Hello
This is