BBC Interactive Page "The Future of Offices: How Covid-19 Will Change Its Ways" Clone

Name: BBC Interactive Page "The Future of Offices: How Covid-19 Will Change Its Ways" Clone
Rating: 5 (191 reviews)

Let's replicate the core features of the BBC's interactive page "The Future of Offices: How COVID-19 Will Change Your Workplace", which is being shared popularly on social media.

(5.0) 191 reviews

3,384 learners

studiomeal

Interactive Web

Clone Coding

Reviews from Early Learners

What you will gain after the course

JavaScript UI Development
Interaction using scroll

Create fun web content with basic scrolling actions!

Hello everyone, how are you doing in this COVID-19 era?
Let's create a similar interactive page from the BBC Visual Journalism Team , "Working from Home Becomes the New Normal... How COVID-19 Will Change the Future of the Office," which was widely shared on Facebook and other platforms.
I'll show you how to make it efficient by utilizing the latest technologies such as position sticky and IntersectionObserver.
Since this technique utilizes basic scroll actions, it can be used in a variety of ways to create interesting web content!

You've seen this person a lot, right? 😊

You haven't seen this one much, have you? 😅

1 minute coding
Interested in other lectures?

1 Minute Coding Interactive Web Roadmap
"Oh!" an exclamation comes out
Create dynamic, interactive websites.

Recommended for
these people

Who is this course right for?

Anyone interested in implementing creative, interactive web
Anyone who wants to create a special portfolio website
People who liked the 1-minute coding lectures

Need to know before starting?

CSS, JavaScript Basics

Hello
This is

19,571

Learners

1,266

Reviews

1,175

Answers

5.0

Rating

Courses

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

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

Curriculum

All

4 lectures ∙ (1hr 12min)

Course Materials:

Lecture resources

Section 1. Getting Started

1 lectures

1. Source code download

Section 2. Creating a page

3 lectures ∙ (1hr 12min)

2. CSS Layout
15:36
3. JS part 1
33:32
4. JS 파트 2
23:39

Published:

Last updated:

Reviews

All

191 reviews

5.0

191 reviews

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

Free

studiomeal's other courses

Check out other courses by the instructor!

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

1분코딩

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

초급

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

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

1분코딩

CSS Flex와 Grid 제대로 익히기

1분코딩

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

초급

HTML/CSS, Flex

CSS Flex와 Grid 제대로 익히기

1분코딩

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

1분코딩

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

초급

Web Animations API, JavaScript, HTML/CSS

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

1분코딩

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

1분코딩

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

중급이상

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

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

1분코딩

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

1분코딩

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

초급

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

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

1분코딩

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

1분코딩

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

초급

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

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

1분코딩

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

1분코딩

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

입문

pixijs, cursor, webgl

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

1분코딩

SVG 마스터

1분코딩

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

초급

SVG, HTML/CSS

SVG 마스터

1분코딩

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

1분코딩

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

중급이상

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

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

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.

초급

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

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

1분코딩

Similar courses

Explore other courses in the same field!

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

디자인베이스

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

초급

Lottie, 웹 디자인, JavaScript

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

디자인베이스

실전! 웹사이트제작! Step By Step! ('포메인'_풀페이지사이트 제작)

J.영

실전! 웹사이트제작 Step By Step! 포메인(https://www.phomein.com/brand/main/main.do) 메인페이지를 그대로 제작해 보는 과정입니다. 사이트에서 담고 있는 화려한 인터렉티브 웹을 그대로 제작, 구현해 보는 과정으로 복잡한 레이아웃도 쉽고 빠르게 제작하는 실무 핵심 노하우를 그대로 알려드립니다^^

초급

HTML/CSS, 인터랙티브 웹, 클론코딩

실전! 웹사이트제작! Step By Step! ('포메인'_풀페이지사이트 제작)

J.영

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

1분코딩

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

초급

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

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

1분코딩

모바일, 태블릿, pc 반응형 인스타그램 클론코딩

더코딩클럽

이 강의를 통해 수강생은 HTML, CSS, JS로 인스타그램과 비슷한 웹서비스를 만들 수있습니다. ( 프론트만 구현했습니다! 백엔드 서버 구축은 차후 강의 촬영 예정입니다.)

초급

HTML/CSS, JavaScript, 클론코딩

모바일, 태블릿, pc 반응형 인스타그램 클론코딩

더코딩클럽

실전! 웹사이트제작! Step by Step! ('돕다' 사이트제작_Basic Course)

J.영

[웹사이트제작 Step By Step] Basic-course로, 돕다(http://dopda.co.kr/) 메인페이지를 그대로 제작해 보는 과정입니다. 본 Basic Course는 CSS 레이아웃 제작과 애니메이션에 대해 다루며, 이어서 Application-course에서는 이미지슬라이드 효과, 반응형제작, 스크롤 애니메이션, Fix Header 등의 인터렉티브 요소를 추가하여 개설될 예정입니다.

초급

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

실전! 웹사이트제작! Step by Step! ('돕다' 사이트제작_Basic Course)

J.영

모던 웹 인터렉티브 CSS3 부트캠프 [Full vers.]

영코디 킴쌤

초등학생 코딩교육부터 시작하여 IT소프트웨어학과의 고등학생, 컴공과 대학생, 비전공자인 취준생을 대상으로 15년 넘게 코딩교육에 전념해온 현직 스타강사 영코디 킴쌤의 쉽고 재미있는 코딩강의를 이제 오프라인 뿐만 아니라 온라인에서도 만나실 수 있습니다. 500여명이 넘는 프론트엔드, 백엔드, 풀스택, 웹 개발자를 배출해온 영코디 킴쌤과 함께라면 당신의 개발자 꿈도 곧 현실이 됩니다!

입문

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

모던 웹 인터렉티브 CSS3 부트캠프 [Full vers.]

영코디 킴쌤

초보자를 위한 Sass 기초 강의 & 자몽톡 클론코딩

유노코딩

Sass는 CSS의 확장 언어입니다. CSS의 단점을 보완해 뛰어난 생산성을 보장하며, 강력하고 간결합니다. 기초 구문을 배우고, 배운 내용을 활용한 클론코딩을 즐기면서 Sass를 배워보세요. 재미는 더하고 부담은 덜었습니다!

초급

Sass, 클론코딩, HTML/CSS

초보자를 위한 Sass 기초 강의 & 자몽톡 클론코딩

유노코딩

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

같이코딩

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

입문

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

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

같이코딩

[환상의족발] 디자인부터 코딩까지

두노피

맛있는 족발이에요~ 요즘 족발 장난 아니던데...꿀꺽

초급

Photoshop, HTML/CSS, 클론코딩

[환상의족발] 디자인부터 코딩까지

두노피

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

깡코딩

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

초급

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

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

깡코딩

Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

도도(코딩루팡)

Firebase의 SQL버전! Supabase를 통해 Next.js 풀 스택 기초를 마스터 할 수 있어요.!

초급

Next.js, supabase, React

Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

도도(코딩루팡)

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

John Ahn

이 강의를 통해서 레딧 웹사이트를 처음부터 하나하나 만들어 보실 수 있습니다.

초급

클론코딩, Node.js, React

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

John Ahn

BBC Interactive Page "The Future of Offices: How Covid-19 Will Change Its Ways" Clone

Reviews from Early Learners

What you will gain after the course

1 minute coding Interested in other lectures?

Recommended for these people

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

Curriculum

Reviews

studiomeal's other courses

Similar courses

1 minute coding
Interested in other lectures?

Recommended for
these people

Hello
This is