강의

N
챌린지

멘토링

N
클립

커뮤니티

Programming

/

Web Publishing

モバイル、タブレット、pcレスポンシブインスタグラムクローンコーディング

この講義を通じて、受講生はHTML、CSS、JSでインスタグラムに似たWebサービスを作成することができます。 （フロントのみ実装しました！バックエンドサーバー構築は今後講義撮影予定です。）

（5.0）受講レビュー 1件

受講生 32名

難易度 初級

受講期間 無制限

  • jeong4726
HTML/CSS
HTML/CSS
JavaScript
JavaScript
Clone Coding
Clone Coding
HTML/CSS
HTML/CSS
JavaScript
JavaScript
Clone Coding
Clone Coding

受講後に得られること

  • vscode設定、必須拡張設定

  • CSS BEMルール

  • reset.cssを利用した初期設定、フォルダ、ファイル構造の作成

  • メディアクエリを活用したモバイル、タブレット、pcデバイスの最適化

  • flexboxを活用したソート

  • （position、transition、transform（translate関数））を活用

  • gridを活用した画面配置

  • 検索、通知、その他のアニメーションの実装

  • 純粋なjavascriptを活用したWebカルーセル、モバイルタッチカルーセルの実装

  • javascript 基本文法（変数、関数、条件文、反復文（for、forEach、while）、配列、オブジェクト、オプションチェイン、arrow function、イベント委任（キャプチャ、バブリング））を活用

  • javasript DOM操作を活用したレンダリング

  • 純粋なjavascriptを活用したカテゴリフィルタリングの実装

  • 書き込み、コメント、共有モーダルウィンドウ、dim処理の実装

  • 画像アップロード、動画再生、動画無音処理の実装

  • navBar（サイドバー、トップ、ボトムバー）実装、モバイルウェブに合わせてナビゲーションバーを最適化

  • ログイン、会員登録、ホーム、リール、ナビゲーション、メッセージ、プロフィールページの実装

  • ブックマーク、良い実装

  • フォントアサムを活用してアイコンを適用する

  • 共通コンポーネントの分割

  • github-pagesを使用した配布

その講義を受講すると、実装する機能

ログイン

もっと見る

会員登録

検索、アラーム

メッセージ

カルーセル

リールズ

カードリスト

共有モーダル

いいね、ブックマーク

コメントモーダル

投稿作成モーダル

ナビゲーションページ

プロファイルのフィルタリング

一般人99%のためのIT基礎知識講義、HTMl、CSS、JS文法講義に続く第3講義です！

今回はhtml、css、jsを活用してWebサービスを作りたい方のために準備した講義です。

この講義を受講する前に、一般人99％のためのIT基礎知識の講義を選手講座すればさらに理解が速いですが、聞かなかったとしても受講することには問題ありません。

>>一般人99％のためのIT基礎知識講義無料で聞きに行く（クリック）

ただし、この講義を受講する前にHTML、CSS、JSに関する基本知識は、受講する際に理解が可能です。

-> html, css, js ワンチョボ 無料で脱出 クリック

私の現業経験を溶かした講義です！

私は試行錯誤を経験して学んだノウハウを込めました。

その講義の画像とビデオは

https://picsum.photos

https://pravatar.cc

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

https://unsplash.com/ja

https://pixabay.com/ja/

を参照しました。

受講時に必要な資料とソースコードは、最初の講義とセクションの隙間を講義資料として添付しました。

長い記事を読んでくれてありがとう、幸せなことだけがいっぱいです。

こんな方に
おすすめです

学習対象は
誰でしょう？

  • サービスを作りたい人

  • Webとアプリの開発に興味がある方

  • ライブラリ、フレームワークを使わずに純粋なhtml、css、javascriptだけを利用してサービスを作りたい方

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

  • html

  • css

  • javascript

こんにちは
です。

8,599

受講生

189

受講レビュー

4

回答

4.5

講座評価

9

講座

受講される方々はIT業界に関心をお持ちのことと思います。
受講される皆さんが、望む目標を達成されることを願っています。

たくさんの方の受講をお待ちしています。

[現職開発履歴]
2019.03.02 ~ 現在 開発中

[学歴]

慶熙大学校 電子工学科 卒業（学士）

カリキュラム

全体

91件 ∙ (12時間 57分)

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

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

1件

5.0

1件の受講レビュー

  • roykean19930688님의 프로필 이미지
    roykean19930688

    受講レビュー 35

    ∙

    平均評価 5.0

    5

    100% 受講後に作成

    JavaScriptのトランhtml cssを学ぶ ビデオとスライドが反応するのかわからないので、私はやめました。 講義のおかげでどうすべきかを知ってくれてありがとう

    ￥3,664

    jeong4726の他の講座

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

    IT入門者のための全体的な概念の整理講義サムネイル

    IT入門者のための全体的な概念の整理

    jeong4726

    この講義を通じて、受講生はITの全体的な流れを学ぶことができます。

    入門

    入門

    IT Service Management, Computer Architecture

    IT入門者のための全体的な概念の整理講義サムネイル

    IT入門者のための全体的な概念の整理

    jeong4726

    コンピュータ構造、ネットワーク基本概念の整理講義サムネイル

    コンピュータ構造、ネットワーク基本概念の整理

    jeong4726

    レッスンを通して、受講生はコンピュータの構造、ネットワークの全体的な概念と流れを知ることができます。

    初級

    初級

    cpu, Network

    コンピュータ構造、ネットワーク基本概念の整理講義サムネイル

    コンピュータ構造、ネットワーク基本概念の整理

    jeong4726

    アルゴリズムの基本概念講義サムネイル

    アルゴリズムの基本概念

    jeong4726

    レッスンでは、受講生はアルゴリズムの全体的な概念を学ぶことができます。

    初級

    初級

    Algorithm

    アルゴリズムの基本概念講義サムネイル

    アルゴリズムの基本概念

    jeong4726

    データベース、オペレーティングシステムの基本概念の整理講義サムネイル

    データベース、オペレーティングシステムの基本概念の整理

    jeong4726

    この講義を通じて、受講生はデータベース、オペレーティングシステムの全体的な概念と流れを知ることができます。

    初級

    初級

    DBMS/RDBMS, Operating System

    データベース、オペレーティングシステムの基本概念の整理講義サムネイル

    データベース、オペレーティングシステムの基本概念の整理

    jeong4726

    next 14.2最新バージョンの公式文書を入手する講義サムネイル

    next 14.2最新バージョンの公式文書を入手する

    jeong4726

    現業で働かなければわからないNext.jsの特別な技術があるわけではありません。

    初級

    初級

    Next.js

    next 14.2最新バージョンの公式文書を入手する講義サムネイル

    next 14.2最新バージョンの公式文書を入手する

    jeong4726

    リアクト最新版公式文書を食べる講義サムネイル

    リアクト最新版公式文書を食べる

    jeong4726

    現業で働かなければわからないReactの特別な技術があるわけではありません。

    初級

    初級

    React, React Context, react.js

    リアクト最新版公式文書を食べる講義サムネイル

    リアクト最新版公式文書を食べる

    jeong4726

    データ構造基本概念の整理講義サムネイル

    データ構造基本概念の整理

    jeong4726

    この講義を通じて、受講生はデータ構造の全体的な概念を学ぶことができます。

    初級

    初級

    Algorithm, Computer Architecture

    データ構造基本概念の整理講義サムネイル

    データ構造基本概念の整理

    jeong4726

    Web開発王初歩脱出講義サムネイル

    Web開発王初歩脱出

    jeong4726

    この講義を通じて、受講生はHTML、CSS、JSの全体的な知識を学ぶことができます。

    入門

    入門

    HTML/CSS, JavaScript

    Web開発王初歩脱出講義サムネイル

    Web開発王初歩脱出

    jeong4726

    似ている講座

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

    基礎から学ぶNext YTMusicクローンコーディング（with next.js 14、UIマスター）講義サムネイル

    基礎から学ぶNext YTMusicクローンコーディング（with next.js 14、UIマスター）

    dodocoding

    React, Next.JS 14, TailwindCss, RadixUI, Shadcn, zustand で YoutubeMusic ウェブサイトをクローンします。 NextJS基礎からUI重点でWebフロント基礎をマスターすることができます。

    初級

    初級

    Next.js, React, TailwindCSS

    基礎から学ぶNext YTMusicクローンコーディング（with next.js 14、UIマスター）講義サムネイル

    基礎から学ぶNext YTMusicクローンコーディング（with next.js 14、UIマスター）

    dodocoding

    デザイナーのスキルアップのためのLottieの完璧な理解講義サムネイル

    デザイナーのスキルアップのためのLottieの完璧な理解

    designbase

    これ以上Gif、Videoに頼る必要はありません。アフターエフェクトで制作したアニメーションをコードで出力し、JavaScriptでさまざまなインタラクションを実装する方法を学びます。あなたも魅力的なウェブサイトを作ることができます。

    初級

    初級

    Lottie, Web Design, JavaScript

    デザイナーのスキルアップのためのLottieの完璧な理解講義サムネイル

    デザイナーのスキルアップのためのLottieの完璧な理解

    designbase

    初心者のためのサス基礎講義＆グレープフルーツクローンコーディング講義サムネイル

    初心者のためのサス基礎講義＆グレープフルーツクローンコーディング

    uknow

    SassはCSSの拡張言語です。CSSの欠点を補完し、優れた生産性を保証し、強力で簡潔です。 基礎構文を学び、学んだ内容を活かしたクローンコーディングを楽しみながら、サスを学びましょう。

    初級

    初級

    Sass, Clone Coding, HTML/CSS

    初心者のためのサス基礎講義＆グレープフルーツクローンコーディング講義サムネイル

    初心者のためのサス基礎講義＆グレープフルーツクローンコーディング

    uknow

    Angular、アンギュラ100分コア講義講義サムネイル

    Angular、アンギュラ100分コア講義

    nomad

    このコースはAngularに基づいて簡単ですが、便利なpetlistプロジェクトを100分のコアレッスンに短縮することで、短時間で本番に活用できるモバイルWebアプリの開発能力を高めることができます。

    初級

    初級

    JavaScript, Angular

    Angular、アンギュラ100分コア講義講義サムネイル

    Angular、アンギュラ100分コア講義

    nomad

    絵で学ぶHTML/CSS、入門！講義サムネイル

    絵で学ぶHTML/CSS、入門！

    hongpark

    フロントエンド、Web開発入門！その始点。簡単かつ迅速にお知らせします。

    入門

    入門

    HTML/CSS

    絵で学ぶHTML/CSS、入門！講義サムネイル

    絵で学ぶHTML/CSS、入門！

    hongpark

    カフェ24のベストショッピングモールデザインのクローンコード（HTML + CSS）講義サムネイル

    カフェ24のベストショッピングモールデザインのクローンコード（HTML + CSS）

    ruhunsu30591

    カフェ24に登場したベストショッピングモールデザインを直接クローンコーディングしてみて 素早くHTMLとCSSを学ぶことができます。HTML + CSSの基本的な理論を学び、直接クローンコーディングを通じてモールデザインを完成させ、理論で学んだ内容を適用し、しっかりとHTMLとCSSの枠組みをつかむことができるように講義を設定しました

    入門

    入門

    Clone Coding, HTML/CSS, Web Design

    カフェ24のベストショッピングモールデザインのクローンコード（HTML + CSS）講義サムネイル

    カフェ24のベストショッピングモールデザインのクローンコード（HTML + CSS）

    ruhunsu30591

    フルスタックのための堅実なフロントエンドブートキャンプ (HTML, CSS, バニラJavaScript + ES6) [フルスタック Part2]講義サムネイル

    フルスタックのための堅実なフロントエンドブートキャンプ (HTML, CSS, バニラJavaScript + ES6) [フルスタック Part2]

    funcoding

    実務で実際にWebサービスを開発した経験をもとに、入門者が実際に商用化も可能なレベルのWebとアプリサービスを開発することを目標とするフルスタックシリーズ講座です。そのためのPart2講座として、多様な技術が存在するフロントエンド技術の中で、レスポンシブ、互換性まで考慮した最新のHTML5、CSS3、バニラJavaScript + ES6をすべてしっかりと整理する講座です。

    入門

    入門

    HTML/CSS, JavaScript, ES6

    フルスタックのための堅実なフロントエンドブートキャンプ (HTML, CSS, バニラJavaScript + ES6) [フルスタック Part2]講義サムネイル

    フルスタックのための堅実なフロントエンドブートキャンプ (HTML, CSS, バニラJavaScript + ES6) [フルスタック Part2]

    funcoding

    試験前に必ず見なければならないウェブデザイン機能士公開問題（2020） Part.2講義サムネイル

    試験前に必ず見なければならないウェブデザイン機能士公開問題（2020） Part.2

    usefulit

    Webデザイン機能士実技を準備するための基礎内容を公開問題を通じて学習する講義です。実務でWebコーディングを活用したいWebデザイナーにも有益な講義です。

    初級

    初級

    HTML/CSS, JavaScript

    試験前に必ず見なければならないウェブデザイン機能士公開問題（2020） Part.2講義サムネイル

    試験前に必ず見なければならないウェブデザイン機能士公開問題（2020） Part.2

    usefulit

    効果的なモバイルUXを作成(デザイン+コーディング)講義サムネイル

    効果的なモバイルUXを作成(デザイン+コーディング)

    usefulit

    PhotoshopとAdobe XDプログラムを活用して、さまざまなデバイスのWeb、アプリレイアウトを設計した後、簡単なコーディング技術を学習して直接実装してみることができます。

    初級

    初級

    HTML/CSS, jQuery, XD

    効果的なモバイルUXを作成(デザイン+コーディング)講義サムネイル

    効果的なモバイルUXを作成(デザイン+コーディング)

    usefulit

    SupabaseとNextを使ったフルスタック開発入門 (Supabase OAuth、Next.js 14をフィーチャー)講義サムネイル

    SupabaseとNextを使ったフルスタック開発入門 (Supabase OAuth、Next.js 14をフィーチャー)

    dodocoding

    FirebaseのSQL版！Supabaseを通じてNext.jsのフルスタックの基礎をマスターできます！

    初級

    初級

    Next.js, supabase, React

    SupabaseとNextを使ったフルスタック開発入門 (Supabase OAuth、Next.js 14をフィーチャー)講義サムネイル

    SupabaseとNextを使ったフルスタック開発入門 (Supabase OAuth、Next.js 14をフィーチャー)

    dodocoding

    文法を勉強した後、JavaScriptプロジェクト101講義サムネイル

    文法を勉強した後、JavaScriptプロジェクト101

    erumcoding

    🚀JavaScriptの文法を勉強したばかりのコリンズに適したミニプロジェクト実習講義です。

    初級

    初級

    JavaScript

    文法を勉強した後、JavaScriptプロジェクト101講義サムネイル

    文法を勉強した後、JavaScriptプロジェクト101

    erumcoding

    フォローして学ぶタイプスクリプトA-Z講義サムネイル

    フォローして学ぶタイプスクリプトA-Z

    John Ahn

    この講義を通じてタイプスクリプトについて学ぶことができます。

    初級

    初級

    TypeScript, JavaScript

    フォローして学ぶタイプスクリプトA-Z講義サムネイル

    フォローして学ぶタイプスクリプトA-Z

    John Ahn

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

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

    studiomeal

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

    初級

    初級

    Interactive Web, Clone Coding

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

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

    studiomeal

    マルチパラダイムプログラミング第1編：イテレータパターン & LISP (with TypeScript, Clojure, Kotlin)講義サムネイル

    マルチパラダイムプログラミング第1編：イテレータパターン & LISP (with TypeScript, Clojure, Kotlin)

    mduniv

    中上級開発者として成長するための高度なプログラミング言語活用能力と、関数型、オブジェクト指向、LISPパラダイムを組み合わせたソフトウェアの設計および実装能力を養います。

    中級以上

    中級以上

    multi-paradigm Programming, TypeScript, Functional Programming

    マルチパラダイムプログラミング第1編：イテレータパターン & LISP (with TypeScript, Clojure, Kotlin)講義サムネイル

    マルチパラダイムプログラミング第1編：イテレータパターン & LISP (with TypeScript, Clojure, Kotlin)

    mduniv

    解きながら学ぶ情報処理産業技士過程評価型実技完璧整理講義サムネイル

    解きながら学ぶ情報処理産業技士過程評価型実技完璧整理

    Neo

    解きながら学ぶ 情報処理産業技士 情報処理産業技士 過程評価型 実技 合格のために すべてを準備しました。

    入門

    入門

    HTML/CSS, Java, SQL

    解きながら学ぶ情報処理産業技士過程評価型実技完璧整理講義サムネイル

    解きながら学ぶ情報処理産業技士過程評価型実技完璧整理

    Neo

    誰よりも早く学ぶSpringboot + ReactNative RestAPI掲示板作成講義サムネイル

    誰よりも早く学ぶSpringboot + ReactNative RestAPI掲示板作成

    Neo

    誰よりも早く学ぶSpringboot + ReactNative RestAPI掲示板作り Springbootでサーバーを開発し、ReactNativeで自分だけの掲示板を作ってみましょう!!

    初級

    初級

    JavaScript, React Native, Java

    誰よりも早く学ぶSpringboot + ReactNative RestAPI掲示板作成講義サムネイル

    誰よりも早く学ぶSpringboot + ReactNative RestAPI掲示板作成

    Neo

    [Code Factory] [初級] NestJS REST API バックエンド完全征服マスタークラス - NestJS Core講義サムネイル

    [Code Factory] [初級] NestJS REST API バックエンド完全征服マスタークラス - NestJS Core

    codefactory

    JavaScript、TypeScriptに続いて、次はバックエンド開発です。NestJSを使用してREST APIバックエンド開発、Socket IO開発および配布を行うことができます。

    初級

    初級

    NestJS, REST API, backend

    [Code Factory] [初級] NestJS REST API バックエンド完全征服マスタークラス - NestJS Core講義サムネイル

    [Code Factory] [初級] NestJS REST API バックエンド完全征服マスタークラス - NestJS Core

    codefactory

    Webゲームを作って学ぶインタラクティブWeb！ JAVASCRIPT

    ggangcoding162118

    Webゲームも作って、フロントエンドWeb開発スキルも学ぶ1席3組授業！

    初級

    初級

    Interactive Web, JavaScript, HTML/CSS

    Webゲームを作って学ぶインタラクティブWeb！ JAVASCRIPT

    ggangcoding162118

    Figma デザインからパブリッシングまで講義サムネイル

    Figma デザインからパブリッシングまで

    Michael Kwon

    デザイナーと開発者のためのオールインワン講座！新しいUI3を反映

    初級

    初級

    HTML/CSS, Figma

    Figma デザインからパブリッシングまで講義サムネイル

    Figma デザインからパブリッシングまで

    Michael Kwon

    ウェブデザイン機能士資格証明に備え（2023年出題基準反映バージョン）講義サムネイル

    ウェブデザイン機能士資格証明に備え（2023年出題基準反映バージョン）

    webstoryboy

    ウェブデザイン機能社出題基準 2023年バージョンに合わせて誰でも合格できるように製作しました。 5種類を学び、素早く合格しましょう！

    初級

    初級

    HTML/CSS, jQuery, JavaScript

    ウェブデザイン機能士資格証明に備え（2023年出題基準反映バージョン）講義サムネイル

    ウェブデザイン機能士資格証明に備え（2023年出題基準反映バージョン）

    webstoryboy