강의

멘토링

커뮤니티

BEST
Programming

/

Full-stack

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

現場で実際のウェブサービスを開発した経験に基づき、初心者向けに実際の商用化も可能なレベルのウェブおよびアプリサービスを開発することを目標とするフルスタックシリーズ講座です。そのためのPart2講座として、多様な技術が存在するフロントエンド技術の中から、レスポンシブ、互換性まで考慮した最新のHTML5、CSS3、バニラJavaScript(Javascript)+ ES6をすべてしっかりと整理する講座です。

  • funcoding
HTML/CSS
JavaScript
ES6

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

受講後に得られること

  • 簡単かつ確実なフロントエンドの基礎構築

  • レスポンシブ, クロスブラウジング ウェブサービス 開発

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

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

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

ネカラク杯も社内講義で選ぶ公式講義!
入門者のためのフロントエンドWeb技術の基本基盤
完成度の高い講義シリーズ(フルスタックPart2)

本講義は、フルスタック講義シリーズPart2講義でPythonバックエンド(Part1)講義に続き、フルスタックのためのしっかりしたフロントエンド基本を身につける講義です。商用化も可能なWebサービス開発のためのHTML5、CSS、Javascript(VanillaJS、バニラJavaScript)+ ES6を詳細にまとめて習う講義です。

一般的なIT講義ではなく、できるだけ受講者の立場を心配して作った特別な講義です。さまざまな資料、さまざまな例で関連技術を知らない状態から始めて、関連技術を私の履歴書に記載できるほどにコアな技術をしっかり身につける講義です

本講義はこれまで多くの方々が身につけ、良い意見を与えていただいた検証済みの講義です。
もしも問題があれば、今のように以降も随時更新されることがあります。

フロントエンドの基本基盤をしっかり積みたいとしたら?
フロントエンドの基本技術をきちんと整理する必要があります。フロントエンドの基本はHTML、CSS、Javascriptです。 React を習得しても、フロントエンドの基本が必要です。しっかりとしたフロントエンドの基盤が重要です。慎重に積み重ねたベーシックマシンの上に、ReactやFlutterに慣れれば、フロントエンドを好きなように作ることができます。ここに最新のWebページはレスポンシブ、互換性など整理しなければならない背景知識と関連知識があり、古くからの技術であるJqueryをきれいなJavascriptに置き換えなければなりません。

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

ぜひ知っておくべき散らばったフロントエンド基本技術を徹底的に取り上げます!
大丈夫知っていますが、整理できないと思います。

HTML、CSS、Javascript 大体は書いているようですが、実際に書いてみると好きなように扱いにくいです。反応型、互換性、ES6など散らばっている数多くの文法や技術、特にフロントエンドは一度よく整理せずには思ったより難しいです。

フルスタックになると、Webサービスを一人で作ることができます。

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

これを最も効果的に実質的に進めるには、フルスタックレッスンのPart1でPythonとバックエンドの技術を習得し、Part2でフロントエンドの基礎を拭く必要があります。基本機がよく揃うはず!単に講義から出たWebサービスをそのまま追いつくのではなく、ちゃんとフルスタックになることができます。このレッスンでは、フロントエンドの基礎をしっかり装備できるように、HTML5、CSS、Javascript(バニラJavaScript、VanillaJS)+ ES6を詳細に異なります。

最速かつ最新のフルスタックロードマップをYouTubeのビデオにまとめて作成しました。該当映像を参考にすると、本技術を超えて、一人でも短時間でウェブ/アプリ開発ができるロードマップもご理解いただけます。

しっかりした実用的なフロントエンドの基礎のために作られました。

数多くの文法と機能で、フロントエンドの出発は整理というキーワードから始める必要があります。
その多くの多様な文法と知識を次のような条件下でまとめました。

  • 最新のウェブサイト開発のための背景知識は芽を出します。
  • もっともらしいWebページのために必要なCSSを慎重に整理してください。
  • 最新のWebページでは書かないJqueryは扱わず
  • すべて標準Vanila Javascript + ES6に置き換えて扱います。
  • レスポンシブタイプをサポート
  • 互換性まで考慮

HTMLタグは軽くセメンティックタグまで必須タグだけを中心にまとめ、
もっともらしいウェブページ実装に必要なレスポンシブ、互換性まで考慮し、詳細なCSS機能を扱い、
VanillaJS(バニラJavaScript)と呼ばれるように、最近のトレンドはjQueryを使用していないので、互換性まで考慮したJavascript + ES6文法だけでWebページを実装します。
各機能別に、互換性の問題で書けない極最新文法、代替可能な技術を除き、コア技術に集中します。

時間を無駄にしないでください!
私たちは情報がないのでできません!
検証済みの講義で身につければ、すばやく整理できます!

Javascriptだけを学ぶことはできませんか?

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

React、Vueを身につけなければWebサービスを作成できませんか?

このフレームワークは、Javascriptの残念な点を改善し、Javascriptで書かれたフレームワークです。そのフレームワークを書くときにもJavascriptを書くので、どんなフレームワークでもJavascriptの基本文法をよく整理して理解する必要があります。このレッスンで扱うHTML、CSS、Javascriptの基本機能が完備されていなければ、これに基づいてReact、Vueなどのフレームワークを習得することができます。
だから、本講義はフロントエンドの基礎に集中する講義です。本講義では、しっかりした基礎を築くために、関連技術の中で必須の技術を芽生えて練習します。

入門者もできますか?

入門者も聞くことができるように、詳細にじっくり説明する講義です。
IT講義で最も難しい講義は、プログラミングを全く知らない方にプログラミングを教えることです。このような方々も私がオープンしたPython入門とクロール基礎ブートキャンプ講義を通じてプログラミングだけでなくクロール技術を学びました。合理的でお互いに配慮できる方であれば、十分に可能です。

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

入門者も理解できるように
簡潔ながらも、入念に作成された資料に基づいて、
講義中、各自テストもしてみるように
機能別サンプルコードとテストまですぐに行えます

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

体系的に身につけることができますか?

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

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

'ああ!本当に違います!」と感じられるように
悩んで作る講義です
そのままついて来れば、なります!


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

開発者、データアナリスト、データ科学者キャリアロードマップ!

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

1. 最速のデータ前処理ロードマップ

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

待って! ✋
以下のロードマップをクリックすると、より詳細な情報をご覧いただけます。ロードマップを一度に購入すると割引価格で提供されます! (割引率はすぐに縮小する予定です。)

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

このロードマップと一人で最も速くウェブ/アプリ開発を学習して実装する方法を詳しく説明した映像を作成しました。このビデオを参照すると、短時間で試行錯誤なしにWeb /アプリを実装できます。

待って! ✋
以下のロードマップをクリックすると、より詳細な情報をご覧いただけます。ロードマップを一度に購入すると割引価格で提供されます! (割引率はすぐに縮小する予定です。)


こんな方に
おすすめです

学習対象は
誰でしょう?

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

  • フロントエンドの基本スキルを身につけたい方

  • 最新商用化も可能なウェブサービス開発を目指す方

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

  • フロントエンド入門

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

  • 可能であれば、フルスタック Part1 講座と並行受講を大変おすすめです。

こんにちは
です。

33,142

受講生

2,406

受講レビュー

1,949

回答

4.9

講座評価

13

講座

잔재미코딩, Dave Lee

  • About 잔재미코딩 소개 블로그 [클릭]

  • 주요 경력: 쿠팡 수석 개발 매니저/Principle Product Manager, 삼성전자 개발 매니저 (경력 약 15년)

  • 학력: 고려대 일어일문 / 연세대 컴퓨터공학 석사 (완전 짬뽕)

  • 주요 개발 이력: 삼성페이, 이커머스 검색 서비스, RTOS 컴파일러, Linux Kernel Patch for NAS

  • 저서: 리눅스 커널 프로그래밍, 리눅스 운영 체제의 이해와 개발, 누구나 쓱 읽고 싹 이해하는 IT 핵심 기술, 왕초보를 위한 파이썬 프로그래밍 입문서

  • 운영 사이트: 잔재미코딩 (http://www.fun-coding.org) [클릭]

  • 풀스택/데이터과학/AI 관련 무료 자료를 공유하는 사이트입니다.

  • 기타: 잔재미코딩 유투브 채널 [클릭] 

    • IT 학습에 도움이 되는 팁/ 짧은 무료 강의를 공유하고자, 조금씩 시작하고 있습니다~

최신 현업과 IT 강의를 병행하며, 8년째 꾸준히 견고한 풀스택, 데이터과학, AI 강의를 만들고 있습니다.

 

カリキュラム

全体

79件 ∙ (17時間 37分)

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

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

受講レビュー

全体

180件

4.9

180件の受講レビュー

  • 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で私が撮って別途共有してみたいと思います。 ありがとうございます。

  • 두룽이님의 프로필 이미지
    두룽이

    受講レビュー 2

    平均評価 5.0

    5

    100% 受講後に作成

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

    • funcoding
      知識共有者

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

  • mozzzi2님의 프로필 이미지
    mozzzi2

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    大好きです先生

    • funcoding
      知識共有者

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

  • madsong님의 프로필 이미지
    madsong

    受講レビュー 7

    平均評価 5.0

    5

    63% 受講後に作成

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

    • funcoding
      知識共有者

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

¥10,228

funcodingの他の講座

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

似ている講座

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