강의

멘토링

커뮤니티

BEST
Programming

/

Full-stack

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

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

難易度 入門

受講期間 無制限

  • funcoding
HTML/CSS
HTML/CSS
JavaScript
JavaScript
ES6
ES6
HTML/CSS
HTML/CSS
JavaScript
JavaScript
ES6
ES6

学習した受講者のレビュー

学習した受講者のレビュー

4.9

5.0

hanyn

100% 受講後に作成

実際のサイトで見たウェブ技術(スライドなど)を直接実装してみることができてよかったです。 フロントエンドを勉強する道は幕膜だったが、講義を通じてある程度感を掴んだようです。 インターネット講義の限界をほとんど感じられないほど充実した講義資料の提供、質のある講義の構成や時間分配など、いろいろなことで集中もでき、学ぶことが多い講義です。 フロントエンドの勉強に対する自信と興味を吹き込む講義だと思います。 この講義を足場として、今後も開発勉強を続けていき、いつか必ず残材ミコーディング様の開発者になりたいです!ありがとうございます。

5.0

opert93

100% 受講後に作成

フロントエンドの基礎をしっかり身につけることができてよかったです。フロントのフレームワークをすぐに扱わずに基本基盤を固めることが私にもっと役に立ったと思います。これを基にReact/Flutterなど最新のフレームワークを学習しましょう。講師はいつもありがとうございます。

5.0

jypark3152

100% 受講後に作成

じっくり基礎から説明されており、最初から分からなくてもわかりやすく講座が構成されています。

受講後に得られること

  • 簡単で堅実にフロントエンドの基礎を固める

  • レスポンシブ、クロスブラウジング対応のWebサービス開発

  • 詳細なモダンHTMLとCSS機能

  • 互換性まで考慮したVanillaJS (Javascript)

  • 最新商用化サービス開発のためのHTML/CSS/JS+ES6フルセット

ネカラクベも社内講義として選択する公式講義!
入門者のためのフロントエンドWeb技術の基礎を固める
完成度の高い講義シリーズ (フルスタック Part2)

本講座はフルスタック講座シリーズPart2講座で、Pythonバックエンド(Part1)講座に続き、フルスタックのための堅実なフロントエンドの基礎を身につける講座です。商用化も可能なWebサービス開発のためのHTML5、CSS、Javascript(VanillaJS、バニラジャバスクリプト)+ ES6を詳しく整理し習得する講座です。

一般的なIT講座よりも、できる限り受講者の立場を考えて作った特別な講座です。多様な資料、多様な例題で関連技術を知らない状態から始めて、関連技術を自分の履歴書に記載できる程度に核心的な技術をしっかりと身につける講座です

本講義は、これまで多くの方々が学び、良いご意見をいただいている実績のある講義です。
万が一問題があれば、これまで同様、今後も随時アップデートされる可能性があります。

フロントエンドの基礎をしっかり固めたいなら?
프론트엔드 기본 기술을 탄탄히 정리해야 합니다. 프론트엔드 기본은 HTML, CSS, Javascript 입니다. React 를 익히더라도, 프론트엔드 기본이 필요합니다. 탄탄한 프론트엔드 기본기가 핵심입니다. 꼼꼼하게 잘 쌓은 기본기 위에, React 든 Flutter 든 익히면 프론트엔드를 원하는대로 만들 수 있습니다. 여기에 최신 웹페이지는 반응형, 호환성등 정리해야할 배경지식과 관련 지식이 있고, 오래전 기술인 Jquery 를 깔끔한 Javascript 로 대체해야 합니다.

本講義はHTML、CSS、Javascript、レスポンシブ、互換性、ES6など

必ず知っておくべき散在したフロントエンドの基本技術を丁寧に扱います!
なんとなくは分かっているけど整理できていない気がします

HTML、CSS、Javascriptは何となく使えそうですが、実際に使ってみると思い通りに扱うのは難しいです。レスポンシブ、互換性、ES6など散らばっている数多くの文法と技術、特にフロントエンドは一度しっかり整理しないと思ったより難しいです。

フルスタックになればウェブサービスを一人でも作れるらしいけど..., they say you can create web services on your own...

ウェブでもアプリでも、最近のサービスは実装のために、バックエンド、フロントエンド、デプロイ技術が必要です。これをフルスタックと言います。フルスタックになれば一人でも最新のウェブサービスを作ることができ、競争力のある開発者にもなれます。

これを最も効果的かつ実践的に進めるには、フルスタック講座Part1でPythonとバックエンド技術を習得し、Part2でフロントエンドの基礎を固める必要があります。基礎がしっかり身についてこそ!単に講座で出てきたウェブサービスをそのまま真似するのではなく、本当の意味でフルスタックになれます。本講座はフロントエンドの基礎をしっかり身につけられるよう、HTML5、CSS、Javascript(バニラジャバスクリプト、VanillaJS) + ES6を詳しく扱います。

全体で最も速い最新フルスタックロードマップをYouTube動画で要約して作成しました。該当動画を参考にしていただければ、本技術を超えて、一人でも短時間でWeb/アプリ開発ができるロードマップも理解できます。

要約して作成しました。該当の動画を参考にしていただければ、本技術を超えて、一人でも短時間でウェブ/アプリ開発ができるロードマップもご理解いただけます。` tags are empty - there is no Korean text between them to translate. The "Before" and "After" sections show Korean text, but those are marked as surrounding context, not the content to be translated. Could you please provide the Korean text that needs to be translated between the `` tags?

堅実で実質的なフロントエンドの基礎力のために作りました。

数え切れないほど多くの文法と機能により、フロントエンドの出発は整理というキーワードから始めなければなりません。
その多くて多様な文法と知識を次のような条件のもとで整理しました。

  • 最新のウェブサイト開発のための背景知識はすっきり整理して
  • それらしいWebページのために必ず必要なCSSを丁寧にまとめ
  • 最新のウェブページでは使わないjQueryは扱わず
  • すべて標準のVanilla JavaScript + ES6で代替して扱い
  • レスポンシブに対応し
  • 互換性まで考慮します

HTMLタグは軽くセマンティックタグまで必須のタグのみを中心に整理し、
それらしいWebページ実装に必須のレスポンシブ、互換性まで考慮した詳細なCSS機能を扱い、
VanillaJS(バニラジャバスクリプト)と呼ばれるように、最近のトレンドはjQueryを使用しないため、互換性まで考慮したJavaScript + ES6文法のみでWebページを実装します。
各機能別に、互換性の問題で使えない最新文法、代替可能な技術は除外し、核心技術に集中します。

時間を無駄にしないでください!
私たちは情報がなくてできないのではありません!
検証された講義で学べば、素早く整理できます!

Javascriptだけ学べばいいのではないですか?

フルスタック開発において最大のボトルネックはCSSです。HTML、CSSは中学生でも知っていると言われます。
しかし、よほどのフロントエンド開発者でない限り、レスポンシブ、互換性、そしてそれらしい最新のWebページを作ることはできません。
数え切れないほど多くの細かいCSS機能を整理する必要があります。HTMLも標準に合わせて一度は整理しなければなりません。
また、国内にはパブリッシャーという職業がありますが、海外ではフロントエンドまたはフルスタック開発者がCSSまですべて扱います。
競争力のあるフロントエンド/フルスタック開発者になるために、詳細にCSS機能を整理することは必須です。

CSSの機能を詳しく整理することは必須です。` tags are empty - there is no Korean text between them to translate. The surrounding context shows: - Before: Text about front-end/full-stack developers needing to master CSS - After: Text about learning React and Vue frameworks However, there is no actual content within the `` tags for me to translate. Could you please provide the Korean text that needs to be translated?
React、Vueを習得しなければWebサービスを作ることはできないのではないですか? to build web services?

このフレームワークはJavascriptの物足りない点を改善して、Javascriptで作成されたフレームワークです。このフレームワークを使う際にもJavascriptを使うため、どのフレームワークでもJavascriptの基本文法をしっかり整理して身につけておく必要があります。本講義で扱うHTML、CSS、Javascriptの基礎がしっかり身についていてこそ、これを基にReact、Vueなどのフレームワークを習得することができます。
そのため本講義はフロントエンドの基礎に集中する講義です。本講義は確かな基礎を築くため、関連技術の中で必ず必要な技術をすべて整理し、練習します。

本講座はフロントエンドの基礎に集中する講座です。本講座は確かな基礎を築くため、関連技術の中で必ず必要な技術を整理して練習します。

初心者でもできますか? do this too?

初心者の方でも受講できるよう、詳しく丁寧に説明する講義です。
IT講義の中で最も難しい講義は、プログラミングを全く知らない方にプログラミングを教えることです。このような方々も私が公開したPython入門とクローリング基礎ブートキャンプ講義を通じて、プログラミングだけでなくクローリング技術を習得されました。合理的でお互いに配慮できる方であれば、十分可能です。

フロントエンド技術だけを早く整理したい方は、本講義のみを受講されても構いません。ただし、プログラミングを一度も扱ったことのない完全初心者の方であれば、Python入門とクローリングブートキャンプ講義と共にフルスタック講義をロードマップを通じて、着実に学んでいくことをお勧めします。より着実に必要な能力を身につけることができます。

初心者でも理解できるように
簡潔でありながら、丁寧に作成された資料をもとに、
講義中、各自テストもできるように
機能別サンプルコードとテストまですぐに行うことができます

• 各機能別のサンプルコードをプロジェクトとして作成して提供し、実戦Webページのコードファイルを提供いたします。
• 講義資料はオンラインでいつでも確認できるように提供いたします。(ただし、コピーおよびダウンロードは著作権の問題により制限しております。)

提供いたします。 • 講義資料はオンラインでいつでも確認できるよう提供いたします。(ただし、コピーおよびダウンロードは著作権の問題により制限しております。)` tags are empty - there is no Korean text between them to translate. Based on the surrounding context provided: **Before (Korean → English):** "We provide this for you. • Lecture materials are provided so you can access them online anytime. (However, copying and downloading are restricted due to copyright issues.)" **After (Korean → English):** "How can you learn systematically? Starting from beginner level all the way to becoming full-stack, we gradually increase the difficulty so you can learn in detail and systematically" However, since there is no text between the `` tags, there is nothing for me to translate in the main content area.

体系的に習得できますか??

入門者から始めて、フルスタックになるまでの全過程を少しずつ難易度を上げながら、詳細かつ体系的に学べるように講義を作成しています。該当文法と知識の理解を助けるため、簡潔なコードと十分な説明を行い、理解が必要な部分はその都度コンピュータ工学まで説明することで、優れた開発者になるための基礎を固めることができます。

本講義は全体フルスタック講義シリーズのPart2で、本講義の中では次のサービス開発のための特定のWebページを選択し、どんなフレームワークやライブラリも使わず、空のファイルから始めてHTML、CSS、Javascript + ES6を使って一つ一つコードの完成まで一緒に行います。

「あ!本当に違うんだ!」と感じられるように
悩んで作る講義です
そのまま付いてきていただければ、大丈夫です!


体系的に学ぶ
ジャンジェミコーディング Dave Lee のロードマップ 🔑

開発者、データアナリスト及びデータサイエンティストのキャリアロードマップ!

Web/アプリ開発からデータ分析とAIまで、短期間で確かな基礎を築けるA to Zロードマップを提供します。IT技術は互いに密接に連携しているため、これらを統合してこそWeb/アプリサービスやデータサイエンスが可能になります。難易度を段階的に上げながら核心技術を習得すれば、効率的に学習し、システムとデータ全般を理解して競争力のある開発者やデータ専門家として成長できます。そのために各分野の核心技術を体系的にまとめたロードマップを用意しました。

1. 最速のデータ全過程ロードマップ

本ロードマップとデータ関連キャリア、データ分析/科学の全過程について詳しく説明した動画を作成しました。この動画を参考にしていただければ、一人でも短時間で試行錯誤なしにデータ過程を簡単に習得できます!

ちょっと待って! ✋
下のロードマップをクリックすると、より詳しい内容をご確認いただけます。ロードマップをまとめて購入すると、割引価格で提供されます!(割引率は近日中に縮小される予定です。)

2. 最速のフルスタックロードマップ

本ロードマップと一人で最も早くWeb/アプリ開発を学習し実装する方法を詳しく説明した映像を作成しました。この映像を参考にすれば、短時間で試行錯誤なくWeb/アプリを実装できます。

ちょっと待って! ✋
下記のロードマップをクリックすると、より詳しい内容をご確認いただけます。ロードマップをまとめて購入すると、割引価格で提供されます!(割引率は近日中に縮小される予定です。)

3. 開発とデータ分野で必須のコンピュータサイエンス(CS)核心知識

本ロードマップは、開発とデータ分野の基礎となるITコア理論であるコンピュータサイエンス(CS)必須知識を体系的に整理した課程です。その中でも特にコンピュータアーキテクチャ、オペレーティングシステム、ネットワークなど、最も重要なコア科目を体系的に学べる講義を公開しています。


こんな方に
おすすめです

学習対象は
誰でしょう?

  • フルスタック開発のためのPart2講義

  • フロントエンドの基礎を固めたい方

  • 最新の商用化も可能なウェブサービスを開発したい方

  • レスポンシブ、互換性など様々なフロントエンド技術の整理が必要な方

  • フロントエンド入門

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

  • 可能であれば、フルスタックPart1講義との並行受講を強くお勧めします。

こんにちは
です。

33,512

受講生

2,459

受講レビュー

1,949

回答

4.9

講座評価

13

講座

ザンゼミコーディング、Dave Lee

  • About 잔재미コーディング紹介ブログ [クリック]

  • 主な経歴: クパン(Coupang)首席開発マネージャー/Principle Product Manager、サムスン電子 開発マネージャー(経歴 約15年)

  • 学歴: 高麗大学 日語日文学科 / 延世大学 コンピュータ工学 修士 (完全なチャンポン)

  • 主な開発経歴: Samsung Pay、Eコマース検索サービス、RTOSコンパイラ、Linux Kernel Patch for NAS

  • 著書: Linuxカーネルプログラミング、Linuxオペレーティングシステムの理解と開発、誰でもサッと読んでパッと理解するIT核心技術、超初心者のためのPythonプログラミング入門書

  • 運営サイト: 楽しいコーディング (http://www.fun-coding.org) [クリック]

最新の実務とIT講義を並行しながら、8年間にわたり一貫して堅実なフルスタック、データサイエンス、AIの講義を作り続けています。

カリキュラム

全体

79件 ∙ (17時間 37分)

講座資料(こうぎしりょう):

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

受講レビュー

全体

181件

4.9

181件の受講レビュー

  • michaelaeon5592님의 프로필 이미지
    michaelaeon5592

    受講レビュー 13

    平均評価 4.9

    5

    99% 受講後に作成

    こんにちは。 Web関連開発に関心があり、あちこちで講義を聞いて定着した講座が残材ミコーディング様講座です。 Web関連技術が関連分野も多く、学ばなければならない部分も多様でしっかりやるにはやることが多すぎて、これまで早急な心にあちこち講座を聞くなど難しさが多かったです。 講座を聴きながら特に良かった部分は、私が学んだことをどのように使用でき、次のステップに進むときに私が何を学ばなければならないのかなど、フルスタックに行く中心をとることができ、個人的に役立ちました。パート1ではサーバー側に関する技術にもう少し集中したら、パート2ではUI段のさまざまな技術を学ぶことができます。派手ではなく失望する方もいるでしょうが、派手な技術は基本がうまくいけばすぐに学べると思います。 HTML/CSSの深さも十分に深く教えてくれて、CSSで実装できなかった部分をJavaScriptでカバーしようとしていろいろな数字やフレームワークを使わなくてもいいのでよかったです。ウェブ技術が多様であると、弱い部分を他の技術やフレームワークで非常には場合がしばしば生じることがあると思いますが、基本に集中した説明と実習があってよかったです。 JavaScriptも必要な部分を簡潔に説明してくれて理解するのに役立ちました。もちろん個人的にはさらに勉強が必要ですが、実習と連携しているので覚えておくのに役立ちました。講義で実装した実習が小さくて現職者のような経験が少ないのですが、基本的な機能に対する実装方法やアイデアが得られてよかったです。 上半期にオープン予定のVueも楽しみにしています。バニラJSで実装する部分をVueとして使うと、どのように楽に実装できるかを比較する方法で講義をしてくれれば、私のような初心者たちが学ぶのに役立つようです。ぜひ反映していただければ幸いです。 ^^ ちなみに個人的な経験をお話ししたら、Pythonの基本講座を聞き、パート1、パート2の順に聞くことをお勧めします。その後、Webサーバーにクロールやデータ分析などの機能を追加したい場合は、該当する関連講座を聞くと良いと思います。

    • funcoding
      知識共有者

      良い受講評価ありがとうございます。本講義はほぼ底から一汗汗のようなモダンなウェブページを作ることで、すでに作られている一本行のコードで華やかなUIに沿って作る講義とは違うんですよ。そのような技術は後で必要なときに使用することができますが、現業ではそのような技術を使用しません。特に、規模のあるウェブページを作る時はね。完璧に作るために、一発汗を作ってみて、基本基をしっかりと積み重ねなければならないし、そんな部分がぜひ役に立ってほしいです。 あまりにもIT関連情報が多く、講義が多く、広告が多いので、ただしたがってコードを打つと、こんな派手なことになる?という講義も多いのですが、私もそんな講義の前に聞いてみましたが、私に残るものが一つもありませんでした。それで、全く別々に長時間整理していくことで身につけた記憶があります。このような学習方法がはるかに良く、能力のある開発者になる近道になることを願っています。

  • ith13579님의 프로필 이미지
    ith13579

    受講レビュー 19

    平均評価 5.0

    5

    99% 受講後に作成

    前の部分はcssとhtmlだけを見ましたが、実際の実務で適用する以上に細かく詳しく、さまざまに教えてくれます。さらに、講師が授業で使用する講義資料の質が本当に良いです。最近では実務でspaライブラリやフレームワークを使用しているので、jqueryよりも純粋なJavaScriptを使ってuiを操作する方法を知ることが重要ですが、この講義はこの点でも強みがあります。もう長い言葉はしません。このくらいの値段で、これほど講義ならば、だと思います。他のクローンコーディング講義ではなく、これを聞いてください。

    • funcoding
      知識共有者

      こんなに良い受講評を残してくれてありがとう。 私が以前にこの部分を身につけるとき、なぜこんなに細かい機能が多いのかと思って疲れたりしながらも、やむを得ないようにしなければならないので、汗だいた汗整理したのですから。私がフルスタックになるために、身につけた方法をそのまま講義で作った部分です。細かい機能が気にならないときは、提供していたGoogleドライブフォルダに行って、上部に検索をしてみてください。それでは講義も聞かれたので、関連キーワードを持った資料をすぐにご覧いただけます。これにより、はるかに速くまた実装することができます。この部分は今後YouTubeで私が撮って別途共有してみたいと思います。 ありがとうございます。

  • dudley님의 프로필 이미지
    dudley

    受講レビュー 2

    平均評価 5.0

    5

    100% 受講後に作成

    他の講師様のフロント講義を聞いてプロジェクトを進行しようとしましたが幕末年でしたが、友人の推薦で残材未講師様の講義を見るようになりました。 基礎からゆっくり講義していただき、一つも抜けずに理解して行きました。その結果、幕屋だったプロジェクトもすっきり仕上げ、おかげで自信も得ました。 まだ悩んでいるなら、ぜひ聞くのがオススメです! 本当にありがとうございますインストラクター〜!

    • funcoding
      知識共有者

      うわー、本当に嬉しいです。自信は本当に重要です。まあ完璧ではないとしても、私ももうできそうで、このままだけ着実にすれば、うまくできそうだと自信!これが感じられたら、本当に大きなステップを超えたのです。本当におめでとうございます、助けてくれて私もとても嬉しいです。 ㅎㅎ

  • mozzzi2님의 프로필 이미지
    mozzzi2

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    大好きです先生

    • funcoding
      知識共有者

      ㅎㅎㅎㅎㅎありがとうございます。 ㅎㅎウィットがありますㅎㅎ

  • madsong님의 프로필 이미지
    madsong

    受講レビュー 7

    平均評価 5.0

    5

    63% 受講後に作成

    よく聞きました!フロントエンド開発者として取り組んでいますが、多くの役に立ちました。 今私のものにするために復習を頑張らなければなりません。 次の講義も楽しみですね!

    • funcoding
      知識共有者

      そうです、私のもので作るように練習もしてみて、またこれからは初めてフロントエンドに関してはクローンコーディング?

¥10,819

funcodingの他の講座

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

似ている講座

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