|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/htmlcssjavascript/
课程评论：没有评论
本课程是 Coursera 上《【Mojamoja Lab】真的面向零基础・新手们的Web开发♪ 实际工作中也能使用的HTML/CSS/JavaScript 超入门》课程的中文内容摘要。 **课程概述：** 本课程专为从未接触过编程的初学者设计，旨在教授HTML、CSS和JavaScript。对于那些想学习编程但不知从何下手的人来说，本课程提供了一个绝佳的起点。课程强调，无论选择哪种编程语言，基础概念（如函数和控制语句）都是相通的，掌握一种语言后，学习其他语言会相对容易。 选择HTML/CSS/JavaScript作为入门语言，是因为它们易于上手，只需一台电脑、浏览器和文本编辑器即可开始学习。此外，Web开发知识（HTML和CSS）在任何领域都非常有益。通过JavaScript，学习者可以掌握编程的基本概念。 **课程结构：** * **HTML入门：** 学习标记语言基础，理解HTML标签的用途，并通过示例代码进行实践。 * **CSS基础：** 学习CSS设计基础，掌握网页设计所需的最低限度知识，并对HTML进行样式修饰。 * **JavaScript编程基础：** 学习JavaScript这门编程语言，掌握适用于其他语言的编程基本概念，如变量、控制语句和函数。 * **Web页面互动：** 学习如何结合JavaScript、HTML和CSS，为网页添加动态效果，例如DOM和事件处理。 * **综合项目：** 每个章节结束后都有实际项目练习，最终目标是构建一个完整的、具有动态效果的“Mojamoja Lab”网站。项目由三个部分组成，逐步在HTML基础上添加CSS样式，再加入JavaScript的动态功能。 **Web设计者（Web制作）与Web开发者（Web开发）的区别：** 课程还解释了Web行业中两种主要角色： * **设计者（Web制作）：** 使用HTML/CSS/JavaScript等技术构建用户在浏览器中看到的网页部分（前端）。 * **开发者（Web开发）：** 在网页可见部分之后（服务器端）执行计算和其他处理（后端），通常使用其他编程语言。 课程指出，近年来这两种角色的界限日益模糊，设计师也需要编写代码，而开发者也需要关注视觉效果。两者本质上都是创作者。 **课程特色：** * **实践导向：** 包含大量的代码练习，最终项目将学到的知识融会贯通。 * **持续更新：** 课程内容会根据技术发展和学习反馈进行更新，补充新的视频和示例代码。 * **易于上手：** 无需复杂的环境配置。 **变更历史（部分）：** 课程自2020年12月起多次更新，增加了新的课程视频，如“JavaScript是什么？”，“Web页面浏览机制”、“盒子模型”等，并对现有内容进行了优化，包括添加字幕、更新示例代码注释以及增加代码练习等。
★本講座は、未経験・初心者の方のためのHTML/CSS/JavaScript入門ですプログラミングを学びたいけど、「何から手をつけて良いかわからない」という方、多いのではないでしょうか？Java、PHP、Ruby、Python、JavaScript、C#、C++、Kotlin、Swift…などプログラミング言語をあげるとキリがありません。いったい今旬な言語はなんなのか？シェアが高い言語はなんなのか？将来性がある言語はなんなのか？迷うと思います。何から取り掛かるかは大きな問題ではありません！関数や制御文といったプログラミングの基本的概念は、言語が変わっても大きくは変わらないからです。何か一つの言語を押さえてしまえば、比較的容易に他の言語の習得に取り組むことが可能です（もちろん、なんでも簡単にできるようになるわけではありません）。ただ、はじめるにあたって、言語ごとにメリットとデメリットはあります。例えば、いくつかのインストールで環境構築が必要なものは、初学や独学で進めるのは少し難易度が高いです。機械学習をはじめるためにはプログラミング以外にも統計学のような違う知識も必要になってくるかもしれません。だとしたら、まずは始めるのに敷居の低いものから取り組んでも良いのではないでしょうか。HTML/CSS/JavaScriptはパソコンがあればはじめられます。本講座は、パソコンを持っていてブラウザとテキストエディタがインストールされていれば、すぐに学習を始めることができます。また、今後どの分野に進んだとしても、ホームページなどに使われるHTMLやCSSといったWebの知識はあった方が良いでしょう。JavaScriptではプログラミングの基本を学ぶことができます。★講座の構成レッスンを始める前にHTML超入門！押さえておきたいマークアップの基本CSSデザインの基礎を学ぼう！Webデザインに最低限必要な知識JavaScriptでプログラミングの基本的概念を学ぼう！HTML/CSS/JavaScriptの組み合わせならではの、Webページに動きをつけるプログラミングを学ぼう！修了おめでとうございます！セクション2では前半にHTMLの概念を、後半にHTMLタグの用途を学びサンプルコードを実装していきます。セクション3では前半にCSSの概念を、後半にプロパティの意味と値の指定の仕方を学び、スタイルシートを書いてHTMLを装飾していく方法について学びます。4は、JavaScriptというプログラミング言語を使ってプログラミングの基本的概念を学ぶ、というセクションです。ここで学んだ知識は他のプログラミング言語にも応用可能な基本的概念になります。セクション5では、DOMやイベントといったJavaScriptとHTML/CSSの組み合わせならではのWebページに動きをつける、というプログラミング手法を学びます。各セクションの終わりにはそこまで学んだことの集大成として演習課題があります。もじゃもじゃラボサイトの構築です。3つの課題はすべてつながった課題となっていて、HTMLの課題でできたものに対してCSSの課題を付け足し、その後にJavaScriptの課題を付け足します。すべての演習課題をこなすと、完結した動きのある1つのWebページが完成します。★デザイナー（Web制作）とエンジニア（Web開発）の違いWeb系のお仕事での役割を大きく分けると次の2つが挙げられます。デザイナー（Web制作）エンジニア（Web開発）簡単に言うと、前者はホームページ等のブラウザに表示される部分をHTML/CSS/JavaScriptを駆使して構築するお仕事、後者はホームページの見える部分の後ろ側（サーバ上）で動く計算などの処理を他のプログラミング言語で実装するお仕事です。フロントエンド、バックエンドという言い方もあります。ただ、近年この役割の境界線が曖昧になりつつあります。デザイナーもプログラムを書きますし、エンジニアも見た目を意識することが大事になってきています。どちらもクリエイターという部分で根っこは同じなんです。本講座では、HTML/CSS/JavaScriptをセットで効率的に学び、HTML/CSSの基礎を通してWebページ作成の仕方を学びます。JavaScriptでは、変数や制御文、関数といった他の言語にも応用できるプログラミングの基本的概念を身につけます。★変更履歴2025/01/18 "JavaScriptって何？のセクションで実装する「はじめてのJavaScript」を外部ファイル形式にする動画を付け足しました。2025/01/15 "ボックスモデルって何？"のセクションに「ブロックレベル要素/インライン要素」のサンプルコードを追加2024/02/06 JavaScriptのレッスンにコーディング演習を追加2024/01/30 「Webページ閲覧の仕組み 〜リクエストとレスポンス〜」のレッスン動画を追加2022/02/20 HTML文書の構造についてのコーディング演習と、グループとセクションを使ったコーディング演習を追加（随時更新予定）2022/01/24 「タグの種類 〜テーブル〜」のサンプルソースコードで使用しているtableタグのborder属性のについて注意点を補足2022/01/14 「DOM 〜オブジェクトとは〜」のレッスン動画を刷新！2021/09/01 全レクチャーへの字幕追加作業が完了2021/08/16 各レクチャーに字幕追加作業を開始2021/08/13 「本講座のJavaScriptサンプルコードで使っている命令文についての注意点」のレクチャーを追加2021/07/14 「Visual Studio Codeとサンプルコードを横に並べる方法」の動画を追加2021/03/23 「【補足】文字コードについて〜UTF-8って〜」のレクチャーをテキストから動画に変更2021/03/03 「【補足】ボックスモデルの注意点とその対処法」のレッスン動画を追加2021/02/06 「タグの種類 〜埋め込み〜」の動画にvideoタグとaudioタグの補足説明を追加2021/01/26 「ボックスモデルって何？」にブロックレベル・インライン要素の補足解説動画を追加2021/01/21 「タグの種類 〜メタデータ・セクション〜」のセクションのタグについての解説を見直し2021/01/10 「タグの種類 〜フォント・行〜」のスタイル適用後のイメージを追加2021/01/06 「タグの種類 〜背景〜」のスタイル適用後のイメージを追加2021/01/05 「タグの種類 〜フォーム〜」のチェックボックスとラジオボタンの解説にlabelタグを使った時の効果について解説を追加2021/01/05 「タグの種類 〜HTMLタグを機能的に分類してみた〜」にインタラクティブの動きの解説を追加2020/12/25 「プログラミング演習問題の答えあわせ（解説）」の動画を追加2020/12/22 「デザイン演習問題の答えあわせ（解説）」の動画を追加2020/12/18 「マークアップ演習問題の答えあわせ（解説）」の動画を追加2020/12/16 「本講座でプログラムを書く前の事前準備」の動画と「素材のダウンロード」動画を追加2020/12/15 「プログラミングを学ぶ際の心構え」の動画を追加
