강의

멘토링

로드맵

Programming

/

Web Publishing

Mobile, tablet, pc responsive instagram clone coding

Through this lecture, students can create a web service similar to Instagram using HTML, CSS, and JS. (Only the front-end is implemented! The back-end server construction will be filmed in a later lecture.)

(5.0) 1 reviews

32 learners

  • jeong4726
인스타그램
클론코딩
HTML/CSS
JavaScript
Clone Coding

What you will learn!

  • vscode settings, required extension settings

  • CSS BEM Rules

  • Creating initial settings, folders, and file structures using reset.css

  • Optimizing for mobile, tablet, and PC devices using media queries

  • Alignment using flexbox

  • (position, transition, transform(translate function))

  • Screen layout using grid

  • Implement search, notification, and more animations

  • Implementing web carousel and mobile touch carousel using pure javascript

  • Utilize basic JavaScript grammar (variables, functions, conditional statements, loops (for, forEach, while), arrays, objects, optional chaining, arrow functions, event delegation (capturing, bubbling))

  • Rendering using javasript DOM manipulation ( createElement, appendChild, parentNode, removechild, querySelector, querySelectorAll, getElementById, children, getAttribute, setAttribute, classList.add, classList.contains, classList.toggle ... )

  • Implementing category filtering using pure javascript

  • Writing, commenting, sharing modal window, dim processing implementation

  • Implementing image upload, video playback and video muting

  • Implementing navBar (sidebar, top, bottombar), optimizing navigation bar for mobile web

  • Login, Signup, Home, Reels, Explore, Messages, Profile Page Implementation

  • Bookmark, Like implementation

  • Applying icons using FontAwesome

  • Splitting common components

  • Deployment using github-pages

Functions implemented by taking this course

log in

See more animations

join the membership

Search, Alarm

message

Carousel

Reels

Card List

Shared modal

Okay, bookmark

Comment modal

Post Creation Modal

Explore Page

Profile Filtering

This is the third lecture following the HTML, CSS, and JS grammar lectures, a basic IT knowledge lecture for 99% of the general public !

This lecture is for those who want to create web services using HTML, CSS, and JS .

Before taking this course , it would be better to take the IT Basics for 99% of the General Public course first to understand it better, but you can still take the course even if you didn't take it.

>> Click here to listen to a free IT basics course for the general public (99%)

However, before taking this course, you must have basic knowledge of HTML, CSS, and JS to understand it.

-> Click here to escape from HTML, CSS, and JS for beginners for free

This lecture is a reflection of my work experience!

This book contains the know-how I've learned through trial and error. It's designed for those who want to utilize HTML, CSS, and JS.

Images and videos of this lecture are

https://picsum.photos

https://pravatar.cc

https://fontawesome.com/search?q=card&o=r&m=free

https://unsplash.com/ko

https://pixabay.com/ko/

See .

The materials and source codes required for the course are attached as lecture materials in the first lecture and between sections.

Thank you for reading this long post. I hope you have a wonderful day.

Recommended for
these people

Who is this course right for?

  • Anyone who wants to create a service

  • Anyone interested in web and app development

  • Anyone who wants to create a service using only pure HTML, CSS, and Javascript without using libraries or frameworks

Need to know before starting?

  • html

  • css

  • javascript

Hello
This is

8,165

Learners

164

Reviews

4

Answers

4.5

Rating

9

Courses

수강하시는 분들은 IT 계열에 관심 있으실 것 같습니다.
수강하시는 모든 분들이 원하는 목표 성취하셨으면 좋겠습니다.

많은 수강 바래요.

 

 [현업개발 이력] 
2019.03.02 ~ 현재 개발

 

[학력]

경희대학교 전자공학과 졸업 ( 학사 )

Curriculum

All

91 lectures ∙ (12hr 57min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

1 reviews

5.0

1 reviews

  • 이종운님의 프로필 이미지
    이종운

    Reviews 35

    Average Rating 5.0

    5

    100% enrolled

    자바스크립트랑 html css 배워놓고 비디오랑 슬라이드 반응형 만들지 몰라서 막막했는데 강의덕분에 어떻게 해야하는지 알게되서 감사합니다

    $23.10

    jeong4726's other courses

    Check out other courses by the instructor!

    Similar courses

    Explore other courses in the same field!