BBCインタラクティブページ「コロナ19が変えるオフィスの未来」クローン

SNSで人気に共有されているBBCの"コロナ19が変える事務所の未来"インタラクティブページのコア機能を同じように作成します。

（5.0）受講レビュー 190件

受講生 3,380名

studiomeal

Interactive Web

Clone Coding

学習した受講者のレビュー

こんなことが学べます

JavaScript UIの開発
スクロールによる対話

基本的なスクロールアクションで面白いWebコンテンツを作成しましょう！

コロナ19時代、みんなこんにちは？
Facebookなどで多く共有されていたBBCビジュアルジャーナリズムチームの「在宅勤務の日常化..
position sticky、IntersectionObserverなどの最新技術を活用して効率的にする方法をお知らせします。
基本的なスクロールアクションを利用した技法なので、面白いWebコンテンツ制作にいろいろ活用してもいいでしょう！

この方、たくさん見ましたか？ 😊

話はあまり見られませんでした…？ 😅

1分コーディング
他の講義が気になったら？

1分コーディングインタラクティブWebロードマップ
「Oh！」感嘆者が出る
ダイナミックなインタラクティブなウェブサイトを作成します。

こんな方に
おすすめです

学習対象は
誰でしょう？

クリエイティブあふれるインタラクティブウェブの実装に興味のある方
特別なポートフォリオウェブサイトを作りたい方
普段1分コーディングの講義が良かった方

前提知識、
必要でしょうか？

CSS、JavaScriptの基礎

こんにちは
です。

19,485

受講生

1,257

受講レビュー

1,175

回答

5.0

講座評価

講座

서울에서 웹 개발자/디자이너로 일했고, 제주를 거쳐.. 현재는 말레이시아 페낭에서 열심히 개발도 하고, 교육 콘텐츠도 만들고, 1인 기업으로서 해볼 수 있는 여러가지 시도와 실험들을 해보고 있습니다.
비주얼 임팩트가 있는 인터랙티브 웹에 관심이 많고, 유튜브와 페이스북 "1분코딩"에서 웹 개발 관련 기술들을 공유하고 있어요.

개발자/디자이너/콘텐츠크리에이터
웹사이트 https://studiomeal.com
유튜브 https://youtube.com/c/1분코딩
페이스북 https://www.facebook.com/1mincoding

カリキュラム

全体

4件 ∙ (1時間 12分)

講座資料（こうぎしりょう）:

授業資料

セクション 1．準備

1件

1. ソースコードのダウンロード

セクション 2．ページの作成

3件 ∙ (1時間 12分)

2. CSSレイアウト
15:36
3. JS パート1
33:32
4. JS パート2
23:39

講座掲載日:

最終更新日:

受講レビュー

全体

190件

5.0

190件の受講レビュー

ReKoding
受講レビュー 4
∙
平均評価 5.0
5
100% 受講後に作成
무료 영상인데 퀄리티가 좋습니다. 재미있게 잘배웠습니다 감사합니다!
- 1분코딩
  知識共有者
  감사합니다 승현님!
ev79
受講レビュー 1
∙
平均評価 5.0
5
100% 受講後に作成
이런 강의가 무료라니! 너무너무 감사합니다.
- 1분코딩
  知識共有者
  감사합니다!
박수진
受講レビュー 5
∙
平均評価 5.0
5
100% 受講後に作成
많이 배웠습니다! 복습해서 실력을 늘려가도록 하겠습니다!!! 강사님이 계셔서 ㅠㅠ힘이 납니다!!!!
- 1분코딩
  知識共有者
  화이팅입니다!!
유지인
受講レビュー 1
∙
平均評価 5.0
5
100% 受講後に作成
처음 듣는 일분코딩님강의인데 애플코딩편 구매전에 어떤 강의 스타일인지 보고싶었는데, 그 짧은 15분으로도 강의 퀄리티가 느껴지고 재미있네요! 애플편도 구매해야겠습니다.!
- 1분코딩
  知識共有者
  감사합니다 지인님!
김지만
受講レビュー 1
∙
平均評価 5.0
5
100% 受講後に作成
진심 도움이 많이 됐습니다.
- 1분코딩
  知識共有者
  감사합니다 :)

無料

studiomealの他の講座

知識共有者の他の講座を見てみましょう！

인터랙티브 웹 개발 제대로 시작하기

1분코딩

크리에이티브 넘치는 인터랙티브 웹페이지를 개발할 수 있는 기본기를 다질 수 있는 수업입니다.

Basic

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

인터랙티브 웹 개발 제대로 시작하기

1분코딩

(English) Build a First-person View 3D Website with Three.js

1분코딩

In this lesson, you'll create a first-person 3D website that works on both desktop and mobile.

Basic

Three.js, 인터랙티브 웹, 3d

(English) Build a First-person View 3D Website with Three.js

1분코딩

PixiJS로 만드는 2D 그래픽과 게임 with Cursor(AI)

1분코딩

2D 그래픽의 독보적 강자 PixiJS의 기본을 익히고, AI 코드 에디터 Cursor를 이용해 빠르고 효율적으로 개발하는 방법도 배워봅니다.

Beginner

pixijs, cursor, webgl

PixiJS로 만드는 2D 그래픽과 게임 with Cursor(AI)

1분코딩

Three.js로 1인칭 3D 웹사이트 만들기

1분코딩

데스크탑과 모바일에서 모두 동작하는 1인칭 3D 웹사이트를 만들어 보는 강의입니다.

Basic

인터랙티브 웹, Three.js, 3d

Three.js로 1인칭 3D 웹사이트 만들기

1분코딩

웹 애니메이션의 새로운 표준, Web Animations API

1분코딩

라이브러리는 선택이지만, 웹 표준 기술은 필수입니다. 웹 애니메이션의 새로운 표준인 Web Animation API에 남들보다 빠르게 적응하고, 실무에도 바로 활용해보세요!

Basic

Web Animations API, JavaScript, HTML/CSS

웹 애니메이션의 새로운 표준, Web Animations API

1분코딩

Three.js로 시작하는 3D 인터랙티브 웹

1분코딩

웹에서 3D를 구현할 수 있는 자바스크립트 라이브러리, three.js의 핵심 개념들을 익히고 응용 예제까지 만들어 보면서 3D 웹 개발에 대한 감을 익혀봅니다.

Basic

인터랙티브 웹, Blender, Three.js

Three.js로 시작하는 3D 인터랙티브 웹

1분코딩

애플 웹사이트 인터랙션 클론!

1분코딩

애플 웹사이트에 자주 등장하는 고급 인터랙션 효과들을 처음부터 직접 개발하는 방법을 배울 수 있습니다.

Intermediate

인터랙티브 웹, 클론코딩, JavaScript

애플 웹사이트 인터랙션 클론!

1분코딩

CSS Flex와 Grid 제대로 익히기

1분코딩

현재, 그리고 미래의 표준이 될 CSS 레이아웃 작성 방식인 Flex와 Grid에 대해 배울 수 있습니다.

Basic

HTML/CSS, Flex

CSS Flex와 Grid 제대로 익히기

1분코딩

3D리플릿 만들기 - 인터랙티브 웹 프로젝트

1분코딩

인터랙티브 웹 프로젝트는, CSS와 자바스크립트를 이용해 창의적인 인터랙션이 있는 예제를 하나씩 만들어보는 시리즈입니다.

Intermediate

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

3D리플릿 만들기 - 인터랙티브 웹 프로젝트

1분코딩

SVG 마스터

1분코딩

웹 벡터 그래픽 SVG를 기초부터 제대로 익히고, 재미있고 다양한 예제들을 통해 원하는 방향으로 응용할 수 있는 기술을 습득합니다.

Basic

SVG, HTML/CSS

SVG 마스터

1분코딩

似ている講座

同じ分野の他の講座を見てみましょう！

(English) Build a First-person View 3D Website with Three.js

1분코딩

In this lesson, you'll create a first-person 3D website that works on both desktop and mobile.

Basic

Three.js, 인터랙티브 웹, 3d

(English) Build a First-person View 3D Website with Three.js

1분코딩

Three.js 3D 인터랙티브 바로 시작하기

코딩일레븐

실무에서 Three.js를 바로 사용할 수 있도록 커리큘럼을 구성했습니다!

Basic

인터랙티브 웹, Three.js

Three.js 3D 인터랙티브 바로 시작하기

코딩일레븐

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

영코디 킴쌤

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

Basic

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

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

영코디 킴쌤

인터랙티브 웹 개발 제대로 시작하기

1분코딩

크리에이티브 넘치는 인터랙티브 웹페이지를 개발할 수 있는 기본기를 다질 수 있는 수업입니다.

Basic

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

인터랙티브 웹 개발 제대로 시작하기

1분코딩

디자이너의 스킬업을 위한 Lottie 완벽 이해하기

디자인베이스

더 이상 Gif, Video에 의존하지 않아도 됩니다. 에프터이펙트에서 제작한 애니메이션을 코드로 출력해서 자바스크립트를 통해 다양한 인터렉션을 구현하는 방법을 배워볼게요. 여러분도 매력적인 웹사이트를 만들 수 있습니다.

Basic

Lottie, 웹 디자인, JavaScript

디자이너의 스킬업을 위한 Lottie 완벽 이해하기

디자인베이스

카페 24 베스트 쇼핑몰 디자인 클론코딩하기 (HTML + CSS)

같이코딩

카페 24에 올라온 베스트 쇼핑몰 디자인을 직접 클론코딩해보며 빠르게 HTML과 CSS를 학습할 수 있습니다. HTML + CSS에 대한 기본적인 이론을 학습하고 직접 클론코딩을 통해 쇼핑몰 디자인을 완성하여 이론에서 배웠던 내용을 적용하고 견고하게 HTML과 CSS의 틀을 잡을 수 있게 강의를 구성했습니다

Beginner

클론코딩, HTML/CSS, 웹 디자인

카페 24 베스트 쇼핑몰 디자인 클론코딩하기 (HTML + CSS)

같이코딩