코딩 장관상을 받은 영재가 직접 알려주는, 코딩 강의

디자인과 HTML을 접목해

나만의 포트폴리오

완성하는 코딩 강의입니다.


실제 현장에서 사용되는 실무 스킬과 노하우를 배웁니다.

코딩을 몰라도 누구나 쉽게 배울 수 있습니다.

링크 한 줄로 소개하는 프로필 / 3D 애니메이션과 직접 디자인한 이미지로 풍성한 웹 페이지 / 반응형 웹과 프레임워크로 쉽고 재미있는 개발 접하기 / 웹 사이트 동작 원리를 이해하고 입체적인 웹 디자인을 할 수 있는 응용 스킬까지 학습합니다.


쉽게 - 다양한 코딩 방법 - 응용 학습


트렌드를 반영한 생동감 넘치는 실전. 실무 기반 교육

사용 기술: HTML, CSS, JavaScript, Three.js, Bootstrap, GitHub, ChatGPT


구현 기능

  • 프로필 제작 및 사이트 배포하기
  • 그라데이션과 3D transform을 이용한 입체 카드 만들기
  • three.js로 웹 상에 3D 모델 불러오기
  • 프로필을 커스텀 하고 풍성한 디자인적 연출하기
  • Bootstrap을 활용하여 인터랙티브한 반응형 웹 사이트 만들기
  • 원페이지 홈페이지를 직접 기획하고 디자인 및 호스팅하기



1) Preferences

주요 웹 개발 언어의 역할에 대해 배우고, 저장/공유하는 방법을 학습합니다.

2) Create Profile 1

간단한 프로필을 통해 배경, 이미지, 버튼, 링크 등 웹의 기본적인 태그와 겹태그를 사용하는 방법을 학습합니다.

3) Create Profile 2

그림자와 마우스 오버 효과 및 모서리를 둥글게 하는 효과, 웹 폰트를 사용해 프로필의 디자인적 완성도를 높이는 방법에 대해 학습합니다.

4) Create Profile 3

GitHub에 파일을 업로드하고 배포합니다. 서버에 접속해 수정할 수 있는 방법과 링크로 페이지를 공유할 수 있는 방법을 학습합니다.

5) Flip animation

3D transform을 이용한 회전 처리를 통해 다양한 카드의 애니메이션을 학습합니다.

6) 3D card design

그라데이션을 응용해 입체적으로 반사광을 내고 움직이는 CSS와 JavaScript 효과를 학습합니다.

7) 3D model 1

3D 모델을 다운로드하고 gltf tools와 live server 플러그인을 vsCode에 3D 모델을 불러오는 방법을 학습합니다.

8) 3D model 2

three.js를 통해 웹 상에 3D 모델을 불러와 카메라와 조명을 사용하는 방법을 학습합니다.

9) 3D model 3

3D 모델에 마우스 컨트롤과 애니메이션 효과를 주는 방법을 학습합니다.

10) Bootstrap

웹 개발을 쉽게 할 수 있도록 도와주는 도구 모음인 오픈 소스 프론트엔드 프레임워크를 활용하는 방법에 대해 학습합니다.

11) Portfolio completion

원페이지 홈페이지 기획안을 직접 개발 및 디자인하고 호스팅하는 방법을 학습합니다.

12) Skills remind

학습을 리마인드 하는 Q&A 시간을 갖습니다.

어피니티 유니버스
수강 신청 및 안내

카카오톡을 통해 수강 신청서를 작성해주세요.
맞춤형 과정으로 빠른 응용까지!

웹 개발 기본을 탄탄하게! 재미있게 코딩을 배워요



© Copyright Affinity Universe 2022 - All Rights Reserved

코딩 장관상을 받은 영재가 직접 알려주는, 코딩 강의

디자인과 HTML을 접목해 나만의 포트폴리오를 완성하는 코딩 강의


실제 현장에서 사용되는 실무 스킬과 노하우를 배웁니다. 코딩을 몰라도 누구나 쉽게 배울 수 있습니다.  링크 한 줄로 소개하는 프로필 / 3D 애니메이션과 직접 디자인한 이미지로 풍성한 웹 페이지 / 반응형 웹과 프레임워크로 쉽고 재미있는 개발 접하기 / 웹 사이트 동작 원리를 이해하고 입체적인 웹 디자인을 할 수 있는 응용 스킬까지 학습합니다.


트렌드를 반영한 생동감 넘치는 실전. 실무 기반 교육

HTML, CSS, JavaScript, Three.js, Bootstrap, GitHub, ChatGPT


구현 기능

  • 프로필 제작 및 사이트 배포하기
  • 그라데이션과 3D transform을 이용한 입체 카드 만들기
  • three.js로 웹 상에 3D 모델 불러오기
  • 프로필을 커스텀 하고 풍성한 디자인적 연출하기
  • Bootstrap을 활용하여 인터랙티브한 반응형 웹 사이트 만들기
  • 원페이지 홈페이지를 직접 기획하고 디자인 및 호스팅하기

HTML

1) Preferences

주요 웹 개발 언어의 역할에 대해 배우고, 저장/공유하는 방법을 학습합니다.

2) Create Profile 1

간단한 프로필을 통해 배경, 이미지, 버튼, 링크 등 웹의 기본적인 태그와 겹태그를 사용하는 방법을 학습합니다.

3) Create Profile 2

그림자와 마우스 오버 효과 및 모서리를 둥글게 하는 효과, 웹 폰트를 사용해 프로필의 디자인적 완성도를 높이는 방법에 대해 학습합니다.

4) Create Profile 3

GitHub에 파일을 업로드하고 배포합니다. 서버에 접속해 수정할 수 있는 방법과 링크로 페이지를 공유할 수 있는 방법을 학습합니다. 

5) Flip animation

3D transform을 이용한 회전 처리를 통해 다양한 카드의 애니메이션을 학습합니다.

6) 3D card design

그라데이션을 응용해 입체적으로 반사광을 내고 움직이는 CSS와 JavaScript 효과를 학습합니다.

7) 3D Model 1

3D 모델을 다운로드하고 gltf tools와 live server 플러그인을 vsCode에 3D 모델을 불러오는 방법을 학습합니다.

8) 3D Model 2

three.js를 통해 웹 상에 3D 모델을 불러와 카메라와 조명을 사용하는 방법을 학습합니다.

9) 3D Model 3

3D 모델에 마우스 컨트롤과 애니메이션 효과를 주는 방법을 학습합니다.

10) Bootstrap

웹 개발을 쉽게 할 수 있도록 도와주는 도구 모음인 오픈 소스 프론트엔드 프레임워크를 활용하는 방법에 대해 학습합니다.

11) Portfolio completion

원페이지 홈페이지 기획안을 직접 개발 및 디자인하고 호스팅하는 방법을 학습합니다.

12) Skills remind

학습을 리마인드 하는 Q&A 시간을 갖습니다.

어피니티 유니버스
수강 신청 및 안내

카카오톡을 통해 수강 신청서를 작성해주세요


맞춤형 과정으로 빠른 응용까지!

웹 개발 기본을 탄탄하게!

재미있게 코딩을 배워요

수강생의 놀라운 변화
100% 리얼 포트폴리오

이미 많은 수강생들이 크리에이터로 활동하고 있습니다. 유아부터 성인까지 수강생들의 놀라운 변화를 확인하세요.

수강생 작품과
수업 현황을 한 번에!

공식 인스타그램, 유튜브, 블로그 채널을 통해

학습 과정과 결과를 기록하고 있습니다.