프론트엔드

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

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

(4.8) 수강평 139개

수강생 5,338명

판다코딩

HTML/CSS JavaScript Bootstrap

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

이런 걸 배울 수 있어요

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 기초

안녕하세요
판다코딩입니다.

21,755

명

수강생

534

개

수강평

268

개

답변

4.8

점

강의 평점

개

강의

문의 : nani6765@gmail.com

커리큘럼

전체

18개 ∙ (2시간 37분)

섹션 1. Intro

3개 ∙ (11분)

섹션 2. Main Page

4개 ∙ (36분)

4. 페이지 레이아웃
05:07
5. 부트스트랩이란?
06:34
6. Main 디자인
12:43
7. 화면 전환하기
12:33

섹션 3. QnA Page

3개 ∙ (25분)

8. QnA 구현하기
14:07
9. QnA 디자인
07:31
10. 진행 상태 바 구현하기
04:21

섹션 4. Result Page

4개 ∙ (31분)

섹션 5. Share Page

2개 ∙ (20분)

섹션 6. 질의응답

2개 ∙ (31분)

강의 게시일: 2021. 02. 23.

마지막 업데이트일: 2025. 05. 19.

수강평

전체

139개

4.8

139개의 수강평

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

판다코딩님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

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

판다코딩

무료

입문 / C++

4.8

(289)

12,100+

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

입문

C++

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

판다코딩

₩38,500

초급 / Express

5.0

(2)

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

초급

Express

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

판다코딩

₩38,500

초급 / MongoDB, Express, React, Node.js, Firebase

4.7

(27)

300+

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

초급

MongoDB, Express, React

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

판다코딩

무료

입문 / Ruby on Rails

4.9

(26)

900+

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

입문

Ruby on Rails

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

판다코딩

무료

입문 / Google Analytics

4.8

(51)

2,900+

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

입문

Google Analytics

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

[ 부트스트랩 5 ] 빠르고 스마트하게 웹 사이트 만들기 | Bootsrap 입문용

코드덤

₩88,000

입문 / HTML/CSS, Bootstrap

4.9

(7)

부트스트랩5로 나만의 색을 입힌 포트폴리오 웹 사이트 제작부터 배포까지! 전세계적으로 가장 많이 사용되고 있는 웹 디자인 툴킷! Bootstrap 5

입문

HTML/CSS, Bootstrap

실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발

김정환

₩44,000

20%

₩35,200

초급 / JavaScript, Vue.js

4.7

(127)

2,100+

순수 자바스크립트와 VueJS라는 UI Library를 이용하여 쇼핑몰 검색 페이지를 만들어 보며 VueJS 개발 학습을 진행합니다. 순수 자바스크립트와 VueJs 로 개발을 각기 진행하며 각 개발의 차이점과 MVC, MVVM 디자인 패턴의 차이도 배울 수 있습니다.

초급

JavaScript, Vue.js

Google Sheets로 만드는 마크다운 스티커 메모

제주코딩베이스캠프

₩27,500

초급 / 웹앱, JavaScript, ES6, Google Sheets

3.3

(3)

100+

간단한 마크다운 메모 웹 애플리케이션을 만들어봅니다. Notion처럼 마크다운을 사용할 수 있는 스티커 메모지에요!

초급

웹앱, JavaScript, ES6

자바스크립트 중고급: 엔진 핵심

김영보

₩55,000

초급 / JavaScript

4.7

(101)

1,600+

4개 강좌로 구성된 자바스크립트 바이블 강좌의 2번째 강좌입니다. 자바스크립트 엔진 이해를 통해 자바스크립트에 최적화된 프로그램을 개발할 수 있습니다. 자신 있게 시스템을 설계할 수 있습니다.

초급

JavaScript

자바스크립트+jQuery 기초부터 실무까지 : 고급 Part.1

유용한IT학습

₩42,900

중급이상 / JavaScript, jQuery

4.8

(31)

55,100+

이론과 실습을 통해 자바스크립트를 익힐 수 있는 강의입니다. 자바스크립트에 어느 정도 익숙해진 분들을 위한 강의입니다. Part 1은 자바스크립트의 클래스와 객체지향 프로그래밍의 내용을 다루고 있습니다.

중급이상

JavaScript, jQuery

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

잔재미코딩 DaveLee

₩82,500

24%

₩61,880

입문 / HTML/CSS, JavaScript, ES6

4.9

(165)

2,600+

Update

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

입문

HTML/CSS, JavaScript, ES6

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

닭강정

₩29,700

초급 / gemini, HTML/CSS, TailwindCSS, JavaScript, Firebase

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

초급

gemini, HTML/CSS, TailwindCSS

Google Sheets로 만드는 Simple Blog!

제주코딩베이스캠프

무료

초급 / Bootstrap, Google Apps Script, VSCode

4.8

(31)

1,000+

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

초급

Bootstrap, Google Apps Script, VSCode

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

Jiwoon Jeong

₩77,000

초급 / HTML/CSS, JavaScript, REST API, MySQL, AWS, Git, GitHub

4.8

(35)

600+

내가 좋아하는 유튜버의 맛집지도를 만들면서 프론트엔드, 백엔드, 카카오맵 API 사용법, 배포까지 한번에 배울 수 있는 풀스택 맛집지도 강의입니다.

초급

HTML/CSS, JavaScript, REST API

부트스트랩을 활용한 반응형 웹제작 [실전편] 부트캠프

영코디 킴쌤

₩39,600

초급 / Bootstrap, 반응형 웹, 웹 디자인, HTML/CSS

5.0

(3)

Update

부트스트랩(BOOTSTRAP)을 활용한 반응형 웹페이지 만들기[2024년 개정판] 수업의 실전 제작수업으로 디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹 실무 페이지를 부트스트랩4를 활용하여 직접 제작해 봅니다.

초급

Bootstrap, 반응형 웹, 웹 디자인

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

영코디 킴쌤

₩39,600

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

5.0

(2)

Update

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

초급

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

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

트레이딩온

₩33,000

초급 / HTML/CSS

3.5

(2)

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

초급

HTML/CSS

자바스크립트 ES6+ 기초 핵심 문법

이룸코딩

무료

초급 / JavaScript, ES6

5.0

(50)

2,200+

자바스크립트에 처음 입문하시는 분들이 모던 자바스크립트에 대해 알아야 하는 핵심 문법을 짧고 굵게 정리했습니다. 문법 공부는 한 번에 확실하게 그리고 짧게 끝내고, 소중한 시간은 무언가 만드는데 투자하세요!

초급

JavaScript, ES6

클린업 JavaScript: 베이스 빌드업!

김영보

₩44,000

초급 / JavaScript, 면접, 기술면접

5.0

(3)

100+

생각을 다룹니다. 자바스크립트 핵심과 근본을 논리적으로 정리할 수 있습니다. 자바스크립트 경험, 생각을 스스로 정리할 수 있습니다. 자바스크립트 기술 논리를 정립할 수 있습니다. 자바스크립트 전체를 보는 시야를 넓힐 수 있습니다. 자바스크립트 기술 면접 문제에 대비할 수 있습니다.

초급

JavaScript, 면접, 기술면접

Node.js로 웹 크롤링하기

제로초(조현영)

₩55,000

중급이상 / JavaScript, Node.js, 웹 크롤링, Puppeteer

4.9

(34)

900+

답변 활발

네이버, 아마존, 트위터, 유튜브, 페이스북, 인스타그램, unsplash.com 등의 사이트를 크롤링하며 실전에 적용해봅니다.

중급이상

JavaScript, Node.js, 웹 크롤링

아직도 살아 있는 불사의 jQuery - 기초 부터 실무까지

이지웹

₩16,500

초급 / HTML/CSS, JavaScript, jQuery, jquery-selector

전세계 웹사이트에서 75%이상이 사용하고 있는 javascript 라이브러리 jQuery ! 화려한 효과보다는 원리를 이해하며 기본기를 다질수 있도록 구성했습니다. 제이쿼리 기초부터 활용까지 학습하여 여러분만의 포트폴리오를 완성하거나, 현업에서 바로 활용해보세요.

초급

HTML/CSS, JavaScript, jQuery

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

깡코딩

₩88,000

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

4.8

(22)

300+

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

초급

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

mongoDB 기초부터 실무까지(feat. Node.js)

김시훈 (도도소프트)

₩77,000

초급 / MongoDB, REST API, Node.js, AWS, JavaScript, DBMS/RDBMS, 데이터 엔지니어링

4.7

(87)

1,300+

mongoDB, NoSQL 요즘 많이 들리지만 아직은 낯선 데이터베이스인가요? 관계형 데이터베이스(RDS/SQL)처럼 사용하고 계시지는 않으신가요? 아무리 좋은 기술도 올바르게 사용하지 않으면 역효과가 발생합니다. 그래서 몽고디비 사용 실패 사례도 종종 보이는데요. 이 강의는 mongoDB를 최대한 mongoDB스럽게 사용할 수 있도록 기본 개념부터 실무 노하우까지 가르쳐드려요.

초급

MongoDB, REST API, Node.js