ウェブサイト、誰でも作れる! ブートストラップ5で作成するWebプロジェクト
講義始める前に ブートストラップ? ブートストラップ(Bootstrap)は、フロントエンド(Front-End)でウェブサイトの構成コードであるhtmlとCSSそしてJavascriptを一つに統合して整形化されたインターフェースを提供してくれる一種のフレームワークライブラリ です。 ブートストラップを使用すると、誰でもウェブサイトをすばやく簡単に作成できます 。ブートストラップなしでWebサイトを作成するには、html、CSS、JavascriptをWeb開発者が別々に作成して互いに統合する必要があります。しかし、ブートストラップフレームワークはそれを一定の形で作られて配布されているので、私たちはこのコード(クラスやコンポーネントなど)を利用してより簡単にウェブサイトを制作することができます。
なぜブートストラップを学ぶべきですか? ブートストラップがあれば、コーディングに入る人が初歩的なhtml、CSSの知識でまともなウェブサイトを作ることができます 。 実際にWebコーディングに初めて入門し、htmlやCSSなどの知識を学び、実際にhtmlフロントエンドコーディングをするときに非常に漠然とした経験をしてみたかもしれません。この時点で、ブートストラップは非常に強力で効率的なWebコーディングを支援します。 また、ブートストラップは、初めてモバイルのTwitterを開発したときに始まったライブラリであるため、モバイルやタブレットなどに反応的に表示されるという利点があります。
なぜこの講義で学ぶべきですか? このレッスンでは、ブートストラップの構造とコンテンツ について集中的に勉強します。個々のコンポーネントは、実際のプロジェクトを作成しながら、包括的で繰り返しコーディングを練習します。いくつかの実用的なプロジェクトを最初から最後まで製作してみると、Webコーディングの技術は飛躍的に発展し、これをもとに、今後Javascript、Backendの構築など深化されたWeb開発を行う上で非常に堅固な基盤を固めることができます。 要するに、このレッスンは、Web開発の入門または初心者の段階をすばやく学ぶことができるように計画され、作成されました。
ブートストラップ5基礎からWebプロジェクトを作成する これでいつホームページを完成しないのですか? Web開発に入門すると、順番に次のような段階的なジレンマに陥ります。
ウェブサイト・ホームページを制作したい GoogleとYouTubeでhtmlについて勉強した。しかし、コンテンツの情報を出力することで終わるだけで、素敵なウェブサイトを作るのは容易ではない! それでウェブサイトにきれいなデザインを塗るためにCSSを勉強し始めた。文字サイズや色の変更など以外にはまったく理解できない! スライド、スクロール、ドロップダウン、ポップアップなど、よりダイナミックにWebで文字や画像が変化する機能を作りたい。しかし、このようなことをするにはJavaScript言語を学ぶ必要があります! ホームページを作成するには、html、CSS、Javascriptを学ぶ必要がありますか?これでいつホームページを完成しないのですか? Web開発を学んでも悩みは続く 上記の悩みが解決されても、Web開発では数え切れないほどの尾に尾をつける疑問や悩みが生じることになります。たとえば、毎回htmlファイルを作成しないで、基本的なデザインテンプレートだけを作成し、さまざまなコンテンツも効率的かつ経済的に入れることができないだろうか?また、このコンテンツデータを保存して管理する方法はないだろうか?ウェブサイトの速度を素早くウェブページをレンダリングする方法はないだろうか?など、さまざまな質問が浮上し続けます。
しかし、ブートストラップを学ぶなら? しかし、すべての学習と経験はステップがあるように、フロントエンドだけでなくバックエンドをカバーするフルスタックWeb開発の第一歩はhtmlとCSSになります。したがって、html / CSSの完全な理解が必要であり、それを自由に活用できる必要があります。すぐにブートストラップは、これらの初期の悩みをきれいに解決することができます。 〈ブートストラップ5:基礎からプロジェクト制作〉講義を受講していただきたいと思います!
この講義紹介します
Webコーディング初心者
初心者の開発者とhtml、 css、Javascript 学んだウェブコーディング入門者
ブートストラップ5が気になる
基本的な使い方はわかりますが クラス、コンポーネントなど 応用法が気になるとき
早くできませんか?
ウェブサイト開発時に フロントエンド開発 早く終わりたい方
実務ではどうですか?
実務プロジェクトでは ブートストラップの適用法 気になる方
こんな方におすすめです! ウェブコーディングを開始してから数少ない初心者開発者 ある程度html、css、Javascriptを学んだ方 ブートストラップ5の基本クラスの概念、そしてコンポーネントを勉強したい方 ブートストラップの基本内容は知っていますが、これを変形して応用したい方 実際のプロジェクトでどのようにブートストラップが適用されるのか疑問に思った人 フロントエンドWeb開発を早くしたい方 短時間で以上の知識をコンパクトに学びたい方 この講義を聞いた後は? html、cssなどのWeb開発の基礎を固めることができます。 簡単かつ迅速にフロントエンドのWebデザインを行うことができます。お好みのウェブコーディングをフロントエンドで行うことができ、これをもとに様々な活用ができます。 その後、WordPressのようなCMSやNodeJSのようなサーバー構築などの深化学習を通じて、最終的にWeb開発の専門家になるでしょう。 この講義ではこのような特徴があります。 このように進行されます! この講義は大きくブートストラップ5の基礎編とプロジェクト制作編に分かれています。
基礎編ブートストラップのGrid、Display、Box、Position、およびContentsのクラスの概念を学びます。 プロジェクト合計3つで構成されています。 最初のプロジェクトよりも2番目が、2番目より3番目が少しずつカスタマイジングを通じて難易度が高くなります。 最も基本的な概念から始めて、実際の活用と応用を経て、最終的に私が望むウェブサイトをコーディングする能力を繰り返し、段階的に習得することができます。 各レッスンで使用されるコードはファイルとして提供されます。 講義内容紹介 基礎編 :ブートストラップ5の概念とよく使われるクラスとコンポーネントについて学習します。プロジェクト1 :One-page Websiteで、CSSは最小限に活用してブートストラップのクラスとコンポーネントだけで製作してみます。プロジェクト2 :ブートストラップのクラスとコンポーネントに加えて、CSS(SCSS)とJavascriptをカスタマイズしてマルチページWebサイトを構築します。さらに、カカオマップAPIを使用して地図をJavaScriptにコーディングする方法を学びます。プロジェクト3 :基本的なブートストラップはもちろんのこと、SCSSとJavascriptモジュール化により、より高度なフロントエンドWebコーディングを学びます。このプロジェクトで使用するマップは、ネイバーマップAPIを使用してコーディングします。 Q&A予想される質問 Q. コンピュータ関連の専攻者ではないのに聞ける講義ですか?
もちろんです。この講義は それほど難しくありません。コンピュータ工学、Webに対する硬い理論や歴史を勉強するのではなく、Web開発の基礎の中でhtml、CSS、Javascriptを統合したブートストラップライブラリをプロジェクトを通じて勉強する講義です。 また、優れたWeb開発者の中には、非専攻者も多い。私もコンピュータ関連の非専攻者です!
Q. htmlとCSSについて本当に少ししか(または全く)知らないのに講義に従えますか?
もちろんです。 htmlとCSSという用語だけでも聞いたことがあれば勉強を始めるのに十分です。ただし、すべての勉強がそうであるように、やや忍耐と忍耐、そして好奇心はなければなりません。
Q. 講義を聞く前に準備すべきことはありますか?
まず、インターネットが接続されているコンピュータが必要です。 PC、Mac、Notebookなどの種類や仕様は関係ありません。 html、CSS、Javascriptなどのプログラミング言語を少し理解している方が良いでしょう。これについての知識がない場合は、YouTubeで無料のビデオ講義を検索してください! 2~3時間ほど勉強すれば十分です。 Webブラウザでは、Chrome(Chrome、最も推奨)またはFirefox(FireFox、general or developer edition)を使用することをお勧めします。 また、コーディングができるコードエディタ(Visual studio code editor、sublime text editor、atom editorなど)なら何でも構いません。このレッスンでは、最近使用されているVisual studio code editor(レッスンで使用)を紹介します。
Q. PC(Windowsオペレーティングシステム)でも講義を聞いてコーディングできますか?
もちろんです。この講義はMACオペレーティングシステムを使用してコーディングを進めていますが、Windows、Linuxなど、どのオペレーティングシステムでも問題なく講義を受講してコーディングできます。
この講義知識共有者は Self-coding フロントエンド(WordPress) Developer Medipressウェブサイトの制作と教育(フリーランサー) Udemy Instructor