rookieand/introcodingstudy

코딩 교육 강사 관련 정보를 담은 웹 페이지입니다.

introCodingStudy - 코딩 교육 강사 홈페이지

[제작 계기]

우연히 Discord를 통해 학생들에게 Python을 교육하는 강사 일을 맡게 되었다. 수업을 진행하며 현재 강의를 수강하려는 학부모들을 대상으로 현재 나의 수업 방식은 어떠한지, 현재 커리큘럼은 어떻게 구성이 되어 있는지 알려주기 위해 처음으로 나만의 홈페이지를 제작해보았다.

[기본 구조]

• 내부 파일 [html]
  • index.html : 홈페이지의 뼈대를 구성하는 HTML 파일. [SCSS]
  • style.scss : 홈페이지의 디자인을 구성하는 css 파일. [Image]
  • img/bg_img : 홈페이지의 배경화면과 관련된 이미지 파일
  • img/lang_icon : 커리큘럼의 언어와 관련된 이미지 파일
  • img/option_img : 커리큘럼의 세부 옵션에 넣을 이미지 파일 [Javascript]
  • js/layoutThree.js : 홈페이지의 배경 화면을 변경시키는 js.

[세부 기능]

• 실시간으로 변경되는 레이아웃을 추가하여 시각적 효과를 주었음.
• 심플한 디자인의 navbar 와 클릭 시 화면이 부드럽게 내려가는 스크롤 기능 추가.
• 현재 커리큘럼 및 contact us 섹션을 추가함.
• 커리큘럼의 아이콘에 hover event에 따른 부드러운 사이즈 애니메이션 추가