프론트엔드

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

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

(4.8) 수강평 140개

수강생 5,348명

판다코딩

HTML/CSS JavaScript Bootstrap

강의를 홍보 링크로 공유하면, 판매 수익의 최대 25%를 받을 수 있어요!

이런 걸 배울 수 있어요

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,880

명

수강생

538

개

수강평

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.

수강평

전체

140개

4.8

140개의 수강평

indie2k7300
수강평 3
∙
평균 평점 5.0
2023. 02. 21.
5
100% 수강 후 작성
必ず必要な要素だけが短時間で充分に学んだようです。入門講義で聞きましたが、これからここに肉をつけていきながら勉強します。ありがとうございます。
- pandacoding
  지식공유자
  2023. 03. 31.
  ありがとう:)
bella83922498
수강평 2
∙
평균 평점 5.0
2022. 06. 01.
5
100% 수강 후 작성
ああ、私はとても満足しています。有料講義であるにもかかわらず、これだけ面白く教えてくれ、ディテールに説明してくれる講義があまりありません。私は有料講義であってもお金を払って聞いたと思います。湾で楽しく講義を聞きながら勉強できました。ありがとうございます。
- pandacoding
  지식공유자
  2022. 06. 03.
  ありがとう:)
thehrto121630
수강평 1
∙
평균 평점 5.0
2023. 03. 30.
5
67% 수강 후 작성
とても基本的な講義でした〜
- pandacoding
  지식공유자
  2023. 03. 31.
  ありがとう:)
rainbowblade8524
수강평 11
∙
평균 평점 5.0
2023. 02. 21.
5
83% 수강 후 작성
すごく高級スキルを初心者でもわかりやすく説明しすぎてくれます。ありがとうございます。
- pandacoding
  지식공유자
  2023. 03. 31.
  ありがとう:)
udongwan07115321
수강평 7
∙
평균 평점 5.0
2023. 02. 16.
5
100% 수강 후 작성
サイトを作ってみるのにたくさん役立つと思います。
- pandacoding
  지식공유자
  2023. 03. 31.
  ありがとう:)

판다코딩님의 다른 강의

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

[1日10分| C++] 誰でも簡単に学ぶC++プログラミング入門

pandacoding

무료

입문 / C++

4.8

(291)

12,100+

プログラミング入門者のための 'C++'講座です

입문

C++

[1日10分|GA] Google Analytics（GA）レポートを見る

pandacoding

무료

입문 / Google Analytics

4.8

(51)

2,900+

Google Analytics（GA）のデータ構造を理解し、レポート機能を学びます。

입문

Google Analytics

Expressチュートリアル：WebサービスのためのコアAPI

pandacoding

₩4,474

초급 / Express

5.0

(2)

Expressを使用して、Node環境でWebアプリケーション用のサーバーを構築します。 CRUD Service、User Authenticationなどを扱いながら学習してみます。

초급

Express

MERN STACK コミュニティ: 開始から配布まで通知するReact

pandacoding

₩4,474

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

4.7

(27)

300+

MERN Stackを活用してコミュニティアプリケーションを制作、配布します。 (MongoDB、Express、React、Node + Firebase)

초급

MongoDB, Express, React

[1日10分| Web-App]生涯初のWebフレームワークRuby on Rails

pandacoding

무료

입문 / Ruby on Rails

4.9

(27)

900+

Webフレームワークの概念、MVCデザインパターンについて学びます。その後、Ruby言語ベースのWebフレームワークであるRuby on Railsを介してCRUDサービスを実装します。

입문

Ruby on Rails

비슷한 강의

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

[ブートストラップ5]迅速かつスマートにWebサイトを作成| Bootsrap入門用

codethem

₩10,274

입문 / HTML/CSS, Bootstrap

4.9

(7)

ブートストラップ5で自分だけの色をつけたポートフォリオウェブサイト制作から配布まで！世界で最も人気のあるWebデザインツールキット！ Bootstrap 5

입문

HTML/CSS, Bootstrap

ブートストラップ5（Bootstrap 5） - 基礎からWebプロジェクトを作成する

codingdiy

₩2,651

초급 / Bootstrap, HTML/CSS, JavaScript, Web Design

4.7

(28)

500+

ブートストラップ5（Bootstrap5）のクラス、コンポーネントなどの概念を理解し、それに基づいてアプリケーション、変形、実習で3つのプロジェクトを制作してみます。

초급

Bootstrap, HTML/CSS, JavaScript

[2024]リベホワイトのHTML基礎実務

rebehayan

₩15,411

입문 / HTML/CSS, nvda

HTML基礎文法を扱う講義です。様々な事例のミッションが存在し、実務から利用可能な最新文法までお知らせします。

입문

HTML/CSS, nvda

ピュアなHTML/CSS/JSのみを活用したレスポンシブウェブ制作【実践編】ブートキャンプ

youngcodikimssam

₩4,640

25%

₩3,480

초급 / HTML/CSS, Responsive Web, Interactive Web

5.0

(2)

Update

Bootstrapを使わずに、純粋なhtml/css/jsのみを活用して、デバイス別に多様なレイアウトを実装できるレスポンシブウェブページ作成[2024年最新版]授業の実践制作授業です。

초급

HTML/CSS, Responsive Web, Interactive Web

最高のフロントエンド CSS フレームワーク、UIkit

codingworks

₩5,800

초급 / HTML/CSS, Portfolio

5.0

(12)

100+

Bootstrap と代表的な CSS フレームワークである UIkit を、基礎から活用まで体系的に学べます。パブリッシャーとして就職するには、よく作られた個人ポートフォリオのホームページが必ず必要です。個人ポートフォリオのホームページでポートフォリオの結果を洗練された形で表示するために、UIkit コンポーネントの詳細な使用方法と、実戦で制作に活用するパブリッシングスキルとノウハウを学びます。

초급

HTML/CSS, Portfolio

モバイル、タブレット、pcレスポンシブインスタグラムクローンコーディング

jeong47265864

₩3,480

초급 / HTML/CSS, JavaScript, Clone Coding

5.0

(1)

この講義を通じて、受講生はHTML、CSS、JSでインスタグラムに似たWebサービスを作成することができます。（フロントのみ実装しました！バックエンドサーバー構築は今後講義撮影予定です。）

초급

HTML/CSS, JavaScript, Clone Coding

HTML/CSS ベースキャンプ

jejucoding

₩2,651

입문 / HTML/CSS

4.8

(12)

300+

답변 활발

Webページを作成したい場合は、HTML / CSSを学んでください。 Web ページの構造を定義する HTML と、Web ページのスタイルを定義する CSS で、さまざまなコンテンツやデザインを実装できます。

입문

HTML/CSS

実務中心のHTML5可視化プログラミング

antfellow77251

₩3,977

초급 / HTML/CSS

3.5

(2)

データを加工して表の形で表現することもできますが、最も重要なのは、データを人間が一目で分かるように表現することです。

초급

HTML/CSS

Googleシートで作るシンプルブログ！

jejucoding

무료

초급 / Bootstrap, Google Apps Script, VSCode

4.8

(31)

1,000+

Google Spreadsheets + Google apps script + Google drive + Bootstrapを使って、24時間無料で動作するシンプルなブログをすばやく作成しましょう！

초급

Bootstrap, Google Apps Script, VSCode

Vue-Django-Bootstrap 뚝딱ブログ

bestdjango

₩3,977

초급 / Vue.js, Django, Bootstrap

4.8

(12)

200+

人気3総士（Vue + Django + Bootstrap）を活用して、簡単かつ素敵な自分のブログを作ることができます。レスポンシブは基本、スマートフォンでも見ることができます。

초급

Vue.js, Django, Bootstrap

JavaScript+jQuery の基礎から実務まで: 基礎 Part.1

usefulit

₩3,977

입문 / JavaScript, jQuery

4.8

(170)

107,600+

理論と実践を通じて、JavaScript を習得できる講義です。コーディングを初めて触れる方でも、段階的に説明するので簡単に理解できます。Part 1 では、JavaScript の概要、変数、データ型、演算子、制御文、jQuery の基礎を扱います。

입문

JavaScript, jQuery

文法を勉強した後、JavaScriptプロジェクト101

erumcoding

₩6,463

초급 / JavaScript

4.8

(8)

100+

🚀JavaScriptの文法を勉強したばかりのコリンズに適したミニプロジェクト実習講義です。

초급

JavaScript

Webゲームを作って学ぶインタラクティブWeb！ JAVASCRIPT

ggangcoding162118

₩10,274

초급 / Interactive Web, JavaScript, HTML/CSS

4.8

(22)

300+

Webゲームも作って、フロントエンドWeb開発スキルも学ぶ1席3組授業！

초급

Interactive Web, JavaScript, HTML/CSS

ChatGPT API入門講義 - 30分で多言語翻訳者ウェブフルスタックを開発する

kyaryunha

₩994

입문 / ChatGPT, Python, HTML/CSS

4.3

(27)

300+

ChatGPT APIで30分で多言語翻訳機Webフルスタックを開発し、人工知能を全く知らなくても、プロダクトに最新の人工知能（ChatGPT API）を導入してみましょう！

입문

ChatGPT, Python, HTML/CSS

[コードファクトリー] [入門] 9時間で終わるコードファクトリーのJavascript無料フルコース

codefactory

무료

입문 / JavaScript

5.0

(208)

6,200+

답변 활발

この 1 つのコースだけで、人気のある Javascript フレームワークと Typescript の基本を学ぶことができます。

입문

JavaScript

クリーンアップ JavaScript: ベース構築!

tonextday

₩5,137

초급 / JavaScript, Interview, Tech Interview

5.0

(3)

100+

考え方を扱います。JavaScript の核心と本質を論理的に整理できます。JavaScript の経験を整理して、考え方を自分で整理できます。JavaScript の技術論理を確立できます。JavaScript 全体を見渡す視野を広げることができます。JavaScript の技術面接問題に対応できます。

초급

JavaScript, Interview, Tech Interview

[コードキャンプ]ブートキャンプで作られた高濃縮バックエンドコース

codecamp

₩45,901

입문 / NestJS, Node.js, JavaScript, Docker, REST API

4.6

(50)

1,400+

답변 활발

コーディングと恋に落ちた8年目のフルスタック開発者Captainの私心がいっぱいのカリキュラムです。バックエンドのすべてをすべてお知らせしたいCaptainの心が溶けます！このレッスンを聞くと、これまで教えてくれますか？＆＃x27;という考えを震えることができないでしょう。みんなが難しい部分までぜひ噛んで食い込んでくれるこの講義で始めましょうか？

입문

NestJS, Node.js, JavaScript

[2025] 非専攻者向け React Native アプリ開発マスタークラス

junghw

₩2,651

입문 / JavaScript, React, Node.js, React Native, TypeScript

2.2

(6)

100+

アイデアはあるけど、アプリをどう開発したらいいかわからなかった方々、実践プロジェクトを4つ作りながら、アプリ開発をマスターしてみましょう！

입문

JavaScript, React, Node.js

mongoDB基礎から実務まで（feat. Node.js）

sihoon

₩8,948

초급 / MongoDB, REST API, Node.js, AWS, JavaScript, DBMS/RDBMS, Data Engineering

4.7

(87)

1,300+

mongoDB、NoSQLは最近多く聞こえますが、まだ見知らぬデータベースですか？リレーショナルデータベース（RDS / SQL）のように使用していませんか？いくら良い技術も正しく使用しないと逆効果が発生します。だからモンゴディビの使用失敗事例もしばしば見えます。このレッスンでは、mongoDBをできるだけmongoDBで使用できるように、基本概念から実務ノウハウまで教えていきます。

초급

MongoDB, REST API, Node.js