Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
Programming

/

Web Development

[ウェブ開発入門] 一人でも開発するHTMLとCSS with ニンジンマーケット

必須の概念とともにHTML/CSSを自らよく活用するための講義です。

  • mjcoding
웹개발
웹퍼블리싱
html
css
HTML/CSS

こんなことが学べます

  • HTML/CSS 基盤をしっかり固める

  • ウェブサイトを作成する方法

  • 自分で実力を育てて成長できる筋力を育てる

  • ニンジンマーケットのウェブサイトの制作

Webページ作成のためのコア、HTMLとCSS!
活用まで考慮した講義で学習してください📖

講義のテーマ 📖

あなたはdivタグを付けるとどうなりますか?レイアウトを分ける概念が思い浮かびますか?基本講義で学ぶときは、この程度だけ学びました。しかし、この程度の概念ではdivタグを正しく活用できません。 divタグは、ブロックタグとしてブロック属性を持つことがより重要です。

私は自分でWebページを作成したかった。複数のHTML/CSS講義と実習中心の講義の両方を聞いて私が自分で作ろうとしましたが、自分で欲しいWebページを作れない私を見つけました。どんな問題があるのか悩んでいました。

そして、HTML/CSSを活用するために適当に知ってはアプリケーションができないということに気づきました。 HTML/CSS すべての機能を知りにくく、そうする必要もありません。少なくとも開発に先立って、必ず必要なしっかりした青写真を作らなければならないページを作成して応用できます。

私はこのような苦情を経験し、苦しい心にHTML / CSS講義を制作しました。作って学ぶ講義ではなく、始まりが少し退屈することができますが、講義完了後は自分で作ることができるので、より大きな楽しみを見ることができます。目標はHTML / CSSを自分で活用することができ、Web開発のバイブルMDNを見て、その後も自分で問題を解決する力を育てることです。

HTMLとCSSをうまく活用する3 Step 📌

HTML/CSS
必須内容の整理

Webページの開発
必須のコアコンセプト

ニンジンマーケットサイト
クローンコーディング実践


こんな方におすすめですよ🙋

Web開発入門をお悩みの方

Webページを作成したい方

HTMLとCSSを学びたい人

HTML/CSSを勉強したが活用が難しい方

この講義と一緒に! 😁

  • HTML/CSSを知らずにリアクトやJavaScriptを学んだら、きっと戻ってきてHTML/CSSを学ぶことになります。直接サイトを作成して活用できるように、じっくり学習します。
  • HTML/CSSを勉強して活用が難しいとすれば、基本概念を正しく理解していなかったり、ウェブサイトを作るのに十分な練習ができていないかもしれません。必須概念 学習と講義を終えた後も積極的に学習できるようにお手伝いします。後で知らない内容や問題が発生しても、開発者ツールやMDNドキュメントを活用して自分で確認できるでしょう。
  • 作りながら学ぶ講義は結果がすぐに出て楽しみはありますが、全体的な整理するのが難しいです。自由度の高いHTML/CSS分野で必ず必要なのは、必須の概念の理解と練習です。コンセプトからしっかりつかみましょう。

講義の特徴✨

#1.
コア基礎
しっかり

この講義は作りながら学ぶ講義ではありません。 HTML/CSSを直接活用できるように、Webページの制作に必要な重要な概念を学習します。講義内容の概念が取れない場合は、砂の上に城を築くのと同じです。

#2.
すべてのコース
目で確認

学習するときは、すべて実際のブラウザで目で見ながら学習をします。結局、私たちはブラウザに見えるためのウェブページ制作をしなければならないからです。

#3.
実践練習で
仕上げ

概念学習が終わった後は、実際のプロジェクトであるニンジンマーケットを作りながら実戦練習をします。ウェブサイトを作る感覚をつかんで実践練習を通じて講義後もHTML/CSSを活用して自分でウェブサイトを作ることができます。


学習内容📚

1. 基本必須概念から

  • 世界中のWeb開発の公式文書のように使用されているMDNに基づいて、Kindの説明と一緒にHTML / CSSの前提条件を学びます。
  • 見逃すのは簡単ですが、開発時に必ず知っておくべき概念(Blockレベルの特徴、Normal Flowなど)を学びましょう。
  • MDNベースの学習に実際の開発に必要なときは、いつでもドキュメントを開くことができます。

2. すべての学習は実際の目で

  • HTML/CSSを学ぶ目標は、ウェブブラウザで見ることができるウェブサイトを作ることが目標です。学習中の実習は、コードとブラウザを通じて目で実際に発生する様子を見ながら学習を進めます。
  • サンプルコードも与えられ、私のコンピュータで直接様々な練習をしてみることができます。

3. 本番プロジェクトとともに

  • 必須概念をすべて身につけた後は、実戦プロジェクトで経験値を積み上げていきます。

  • 写真の内容のようにニンジンマーケットを自分で作成してURLを生成できるように配布まで進めます。


予想される質問 Q&A 💬

Q. Macでも実践できますか?

Chrome(or Safari、Firefox)ブラウザを使用している場合は、どのオペレーティングシステムでも練習できます。

Q. 非専攻者も受講できますか?

Web開発入門講義で非専攻者も受講できますよ:)

Q. 練習のために別のプログラムをインストールする必要がありますか?

今使っているインターネットブラウザとVSCというコーディングツールを使用します。 VSCの設置は講義内でご案内いたします。

Q.今回の講義を聞くとどんなことができますか?

HTML/CSSを活用してウェブサイト制作ができますよ!展開まで進め、人と共有できるURLを作成できる内容まで学習します。

Q.レスポンシブデザインの内容も含まれていますか?

レスポンシブデザインの内容は含まれていません。 Web開発を始める方やHTML/CSS初心者の方なら、反応型の内容までは少し過剰だと思います。今必要なのはレスポンシブではなく、必須概念学習です。講義を通して練習してHTML/CSSを使ってみると、必要に応じて自然に自分で学習できます。


知識共有者の紹介✒️

履歴

  • 県)Mozillaオープンソースコミッター
  • 前)フィンテックスタートアップ開発者
  • 前) 課寄付グローバル専門開発者
  • 前)暁星ビリング開発チーム(決済DB開発)

受講前の注意事項📢

練習環境

  • オペレーティングシステムとバージョン(OS) :Windows 10(macOS、Linux任意のオペレーティングシステムで実践可能)
  • 使用ツール: Firefox / Chrom browser (Firefox, Chrom, Safari すべて練習可能), Visual Studio Code

こんな方に
おすすめです

学習対象は
誰でしょう?

  • コーディングに初めて触れる方

  • Web開発が初めての方

  • HTML/CSSの活用が難しい方

こんにちは
です。

3,736

受講生

151

受講レビュー

33

回答

4.7

講座評価

3

講座

안녕하세요. MJ코딩입니다😀

강의에 관심과 수강을 해주셔서 감사합니다 :)

강의 내용은 처음 접할 때는 가볍지만은 않은 내용이지만, 이해를 하실 수 있고 실제로 사용하실 수 있도록 준비를 하였습니다.

커리어와 실무에 도움이 되셨으면 하는 마음입니다.

프로그래밍 학습을 위한 유튜브 채널도 함께 운영을 하고 있습니다. (유튜브 링크 클릭)

필요한 내용을 보시고 참고 하여 도움이 되셨으면 좋겠습니다.

감사합니다^^

カリキュラム

全体

37件 ∙ (8時間 19分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

3件

4.7

3件の受講レビュー

  • 시골햄스터님의 프로필 이미지
    시골햄스터

    受講レビュー 10

    平均評価 5.0

    5

    100% 受講後に作成

    클론코딩 재밌어요

    • MJ코딩
      知識共有者

      시골햄스터님 안녕하세요 :) 도움이 되신 것 같아 기쁜 마음이며 강의를 수강해주셔서 감사합니다 😀 강의 내용을 기반으로 다른 사이트도 "직접" 만들어 보시면서 더욱더 훌륭한 실력을 쌓으셨으면 좋겠습니다. 감사합니다 ^^

  • 임채성님의 프로필 이미지
    임채성

    受講レビュー 1

    平均評価 5.0

    5

    62% 受講後に作成

    • choisy030님의 프로필 이미지
      choisy030

      受講レビュー 1

      平均評価 4.0

      4

      97% 受講後に作成

      ¥3,361

      mjcodingの他の講座

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

      似ている講座

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