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

/

Web Development

しっかり学ぶHTML CSS - by 얄코(Yalco)

コーディング初心者でもついてこられる親切でわかりやすい講座! 現役開発者をHTML & CSSの達人にしてくれる最終兵器講座!

  • yalco
HTML/CSS

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

こんなことが学べます

  • HTMLとCSSの基礎から応用まで

  • EmmetでHTMLを簡単にコーディング

  • ウェブ標準に準拠したパブリッシング

  • ポジション、各種レイアウト、セレクターなど、CSS の難しい概念

  • 継承とリセット、ベンダープレフィックス、フォーカスビジブルなど、複雑な概念

  • 変数、ウェブフォント、フィルター、アニメーションなどの高度な機能活用法

  • レスポンシブデザインでモバイル環境に対応する

  • アクセシビリティ - 様々なユーザーに配慮したウェブサイト作り

  • セマンティックタグとBEMを活用した適切なサイト構成

  • ファイナルプロジェクトを通じた実践知識

⭐️大学のメールアカウントをお持ちですか?
🎓大学生半額クーポンを取得する(クリック)👉


これらのことを学びます! 📚

  • HTMLとCSS 初心者のための基礎から、現業開発者のための高度な活用法や実践のヒント、理解しにくかった理論まで簡単に学びます。
  • 視覚的にのみページを実装することを超えて、より多くの人々に配慮し、他の開発者ともコラボレーションする良い「良い」ウェブサイトを作成する方法を学びます。

「きちんと売る」講義を作った理由⛏️

コーディングを初めて始めた方が、最初のコーディング経験から始められるシリーズを作りたかったのです。
その第一歩で、コムボールの知識がなくても相対的に学びやすいHTML&CSSを最初のテーマに選びました。

一方、進入障壁が低いHTML&CSSですが、これを深く勉強して「きちんと」活用する開発者たちは一般的ではありません。それで、難しい概念や細かい属性まで掘り下げて、現業開発者やパブリッシャーにも大いに役立つ講座にしたいと思いました。

本当に素敵で有益な講義を作ってみようという目標で、長く調査して準備した末にこの講義を制作することになりました。


誰がこの講義を
聞くといいですか?
👨‍💻

プログラミングが初めての方

パブリッシングをしたいWebデザイナー

HTML/CSSをうまくやりたい開発者

  • 🍼コーディングを学び始める人
  • 🎨パブリッシングを自分でやりたいWebデザイナー
  • 🎓 HTML、CSSをよりよく扱いたい開発者
  • ⛏️ HTMLとCSSの深い理論まで勉強してみたい開発者
  • 💖標準に準拠し、アクセシビリティの高いWeb開発をしたい開発者


本としても
リリースされました! 📙

image

講義の内容を手でも確認いただけるようにすっきり押し込めました。
(ℹ️この本はJavaScriptは基礎部分だけ、そして軽くだけ扱います。)

🛒本を買いに行く


ヤルコ講義だけ
特別なポイント✨

迅速かつ簡単
ビデオ講義🚀

さりげなく涼しい進行であなたの大切な時間を節約します。 (受講者によって馬が早く感じられる点ご了承ください。ぜひ無料パート川を聞いてみて受講してください!

ツーマッチの説明
詳細な講義🎙️

各タグと属性の機能だけでなく、これらの多様な活用度やウェブ標準に合った使い方、理論的原理まで詳細に説明し、できるだけ多くを学べるように準備しました。

Webページ経由
便利な練習🖥️

各川ごとに映像の主なポイントと、貼り付け可能な実習命令とコードがウェブページにまとめられており、これに沿って応用し、手軽に実習を進めることができます。

基礎内容
無料公開😎

学生の方も気軽に勉強できるよう、最初の5時間分量をプレビューを通じて無料で公開します。


ヤルコは誰ですか? 😀

YouTube チャンネル ヤルパクなコーディング辞典を放送するYouTubeであり、 IT書籍を執筆する作家です。フルスタック開発者として働いてきた経験を活かし、難しいプログラミング概念を初心者が理解しやすくするためのたとえ話と簡単な例、時にはアニメーションで説明するコンテンツを作っています。

🎬 YouTube ヤルパクコーディング辞書チャンネル(クリック!)
📕ヤルコの本を見に行く(クリック!)


講義のために特別制作
⭐️プレイグラウンド⭐️

  • 講義用Webページには、CSSの学習と復習を容易にするために作成したプレイグラウンドがテーマ別に以下のように用意されています。

  • 各プロパティの値を調整して、それらがWeb上の要素にどのように反映されるかを直接確認できます。

  • どのタイプの値を使用できるかを調べて、そのCSSプロパティを利用するさまざまな例を学ぶことができます。

この講義を聞くと
何が変わりますか? 💪

  • 入門者や非専攻者は、コーディングに対する恐れがなくなります。
  • どんなウェブサイトでもパブリッシングできる自信を得ます。
  • 私は知っていた概念、よく知らずに使用していた機能を明確に理解します。
  • ウェブサイトを「正しく」、「優しく」、「思慮深く」する方法を学びます。

どんな内容
学びますか? 📚

セクション1:HTMLベースのHTMLタグとそれぞれの適切な使用法

  • テキストコンテンツ、リスト、画像、表、リンク、入力など、さまざまなWebコンポーネント
  • Web標準と推奨事項に合わせてコーディングする
  • Emmetによる高速コーディング

セクション2:CSSの基礎

  • CSSのさまざまな適用方法と基本セレクタ
  • テキスト要素、リスト、色、背景など、さまざまな要素のスタイリング
  • インライン/ブロック、ボックスモデル、ポジションなどCSSの中核概念
  • フレックスレイアウトを活用したWebページ構造

セクション3: HTMLの深化

  • ヘッダー内のメタ情報、ビューポート、オープングラフなどのページ設定
  • セマンティックタグとBEMでページを体系的に整理する
  • 多様なユーザーに配慮するアクセシビリティを整える
  • SVG、映像などその他のメディア活用法

セクション4:CSSの深化

  • インポートと変数、リセット、ベンダープレフィックスなどの実務コンセプト
  • フローティングとグリッドを活用したレイアウト
  • トランジション、アニメーション、フィルタ、その他のさまざまなCSS機能
  • レスポンシブでウェブサイトを作る
  • Webフォント、アイコン、フレームワークなどの外部要素の活用法

✅セクション5:ファイナルプロジェクト

  • 上記のようなWebページをレスポンシブで、JavaScriptを使わずにHTMLとCSSだけで作る実習を進めます。

よくある質問
確認してください💬

Q. プログラミングに初めて接するのに授業を聞くことはできますか?

A. HTMLとCSSは、入門者が始めるのに最適なトピックです。コーディングが初めての人もフォローできるように、最初の環境設定からコーディングツールの使用まで詳しく説明し、実習もできる簡単な用語を使って進めます。

Q. すでにWeb開発をどの程度行うのにどれくらい役に立ちますか?

A. Web開発者がよく知って使用していると思う基本的なHTMLタグやCSS属性も、深く勉強してみると、これまで知らないことが多かったことに気付くことになります。これまで適当にだけ知って活用してきた要素や機能をより適切に使えるようになり、外観だけでなく内部と構造上でも美しいサイトを作るための有用な知識を学ぶことができるようになります。

Q. 講義速度が速くて難しくないでしょうか?

A. 映像の進行は速いですが、各川ごとに講義ページがリンクされており、映像の内容を楽に復習して実習できるようにしておきました。ページのあちこちの例とプレイグラウンドを活用して、あなたの時間効率を最大限に活用する学習を進めることができるでしょう!

こんな方に
おすすめです

学習対象は
誰でしょう?

  • 初めてコーディングを学ぶ人

  • パブリッシングを自分でやりたいウェブデザイナー

  • HTML、CSSをもっと上手になりたい開発者

  • HTMLとCSSの深い理論まで勉強してみたいエンジニア

  • 標準に準拠し、アクセシビリティ高くウェブ開発をしたい開発者

こんにちは
です。

29,715

受講生

1,515

受講レビュー

84

回答

4.9

講座評価

17

講座

유튜브 채널 얄팍한 코딩사전을 방송하는 유튜버이자, IT서적들을 집필하는 작가입니다.  풀스택 개발자로 일해 온 경험을 살려, 어려운 프로그래밍 개념들을 초보자들이 이해하기 쉽도록 비유와 쉬운 예제, 때로는 애니메이션으로 설명하는 컨텐츠들을 만들고 있습니다.

🎬   YouTube 얄팍한 코딩사전 채널 (클릭!)
📕  얄코의 책들 보러가기 (클릭!)

カリキュラム

全体

54件 ∙ (11時間 16分)

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

受講レビュー

全体

119件

4.9

119件の受講レビュー

  • Hansh님의 프로필 이미지
    Hansh

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    Coursera에서 Johns Hopkins html/css/js 강의 듣다 일루 넘어왔다. 존스홉킨스가 명문대임에도 불구하고 형편없는 강의였다. 하지만 이 강의는 달랐다. 1. 첫번째로 강의를 평가할때 내용의 총 시간을 보는데, 시간이 짧은 강의들은 깊게 파고들지 않을 수 있어서 안본다. 하지만 이 강의는 12시간으로, html/css만 커버하는데 꽤 긴 시간이라 믿음이 갔다. 강연자 또한 빠르게 강의를 진행해서, 사실상 한 30시간을 압축시킨거라고 볼 수 있다. 2. 두번째는 강연자의 내용 전달력인데, 이 강의는 내용을 굉장히 효율적이고 깔끔한 방법으로 전달한다고 느꼈다. 강의의 흐름도 마음에 들었다. 그리고 핵심적인 부분은 물론, 알아만 둬도 괜찮은 부분까지 다 커버하고. 수월하게 이해를 시키기 위해 많은 노력을 한 것처럼 보인다. 3. 세번째는 여기서만 들을 수 있는 코딩 환경 셋팅 방법이랑, 여러가지 팁들, 그리고 혼자 어떻게 더 나아가서 공부 할 수 있는지 알려주는것이 좋았다. Coursera, Udemy 에서 유명하기만 하고 형편 없는 강의들만 듣다가, 간만에 실속있는 강의를 봐서 좋았다. 유명세와 강의력은 상관관계가 뚜렸하지 않다는걸 깨닳게 해줬다.

    • 얄팍한 코딩사전
      知識共有者

      열심히 준비한 만큼 큰 보람 느끼게 해주셔서 감사합니다 ㅠㅠ 사실 똑똑한 교수님들일수록 본인들이 너무 탁월하시고 잘 아시기 때문에, 입문자분들이 듣기에는 오히려 그분들의 강의가 전달력이 높지 않은 경우가 많더군요. 부족한 머리를 가진 사람으로서, 어떻게 강의하면 남들이 잘 이해할까 많은 고민을 하면서 만들었는데 그만큼의 도움이 되어드렸다니 정말 기쁩니다. 앞으로도 더 좋은 강의들로 보답하겠습니다. 수강해주셔서 감사합니다!!

  • 하정원님의 프로필 이미지
    하정원

    受講レビュー 1

    平均評価 5.0

    5

    31% 受講後に作成

    자세히 가르쳐주시고 하나하나 훑어주셔서 좋았어요. 모든 공부가 그렇겠지만 자기만의 방법을 찾고 공부하니까 훨씬 집중이 잘되더라구요. 저 같은 경우에는 소스코드를 먼저 스스로 해석해보고 강의를 들었는데 이 경우에 내가 해석한게 맞는지 또는 모르는 문법은 어떤 것을 의미하는지 생각하고 강의에 임하다보니까 더 머리 속에 남았어요!

    • HDK님의 프로필 이미지
      HDK

      受講レビュー 6

      平均評価 5.0

      5

      83% 受講後に作成

      유튜브 구독자로서 Git 강의를 완강하고 html/css 강의도 이어서 구매하였습니다. 얄코님 강의의 강점은 깔끔한 커리큘럼과 전달력이 좋으셔서 내용이 귀에 쏙쏙 박힌다는 점입니다. 강의를 듣는 것이지만 마치 이야기를 듣는 것처럼 저도 모르게 빠져들어 듣게 됩니다. 이렇게 강의를 따라가다 보면 어느 순간 내용을 이해하고 습득한 자신을 볼 수 있게 됩니다. 돈이 전혀 아깝지 않은 강의라고 생각됩니다. 고민 중이시라면 구매하는 것을 강력 추천드립니다.

      • sky-j님의 프로필 이미지
        sky-j

        受講レビュー 5

        平均評価 5.0

        5

        100% 受講後に作成

        백엔드 쪽만 하다가 프론트쪽 디자인 하는데 너무 막히는 부분이 많아서 구매해서 듣게 되었구요. 처음 강의를 다 봤을땐 알쏭 달쏭 알듯 모를듯 상태에서 디자인 작업 하다가 문득 강의에서 들은 것 같은데 정확히 모르고 쓰고 있네? 할때마다 그부분 다시 찾아가서 다시 듣고 하니까 처음 들을때랑 다르게 다시 명확하게 이해하고 쓰게 되었어요. 좀 더 심화된 내용이 있다면 결제해서 들을 것 같습니다. (23-02-23) 지금 개발 하면서 뭐가 안 됐을 때 문제점 찾아서 원하는데로 명령어 넣으면 딱 바뀌는 모습이 너무 즐겁습니다. / TMI일수 있지만 저는 처음 강의 들을때 속도도 너무 빠르다고 생각했고 홈페이지에서 조작하면서 알려주시는 게 보면서 이해는 되도 남는 게 없을 것 같았는데 2회독 할 때 진가를 발휘합니다. 다른 분들도 꼭 1회독 하시고 디자인 해보다가 2회독 때는 정독 하시지 말고 안 되는 부분 카테고리 찾아가서 다시 보면 진짜 .... 진국 아닌 찐국입니다. // 시간이 조금 나면 깃허브, 자바스크립트 강좌 들어봐야겠어요

        • 얄팍한 코딩사전
          知識共有者

          실무에 도움이 되어드려 기쁩니다 ㅠㅠ 수강해주셔서 감사합니다!!!

      • with_all님의 프로필 이미지
        with_all

        受講レビュー 11

        平均評価 5.0

        5

        100% 受講後に作成

        결론부터 말씀드려서 아주 훌륭한 강의 입니다. 배우는 내용이 많아서 다시 복습을 해봐야 할 것 같습니다. 다음 강의들도 기대됩니다!

        ¥5,168

        yalcoの他の講座

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

        似ている講座

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