|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/web_design2/
课程评论：没有评论
本课程为WEB设计进阶Level 2，旨在教授学员使用Flexbox和媒体查询（media queries）来创建响应式网页。课程将引导学员完成一个包含首页、作品集详情页、关于页和联系页的投资组合网站的制作。 **课程亮点：** * **Flexbox深入学习：** 课程详细讲解了Flexbox的各个属性，包括`flex-direction`、`flex-wrap`、`flex-flow`、`flex-basis`、`flex-grow`、`flex-shrink`、`flex`、`justify-content`、`align-items`、`align-self`和`align-content`，并提供实践练习，帮助学员掌握其精髓。 * **响应式设计：** 通过媒体查询，使网页能够适应不同设备的屏幕尺寸，实现真正的响应式布局。 * **实战项目：** 学员将亲手用HTML和CSS构建一个完整的网站，锻炼实际编码能力。 * **工具介绍：** 推荐并讲解了Brackets编辑器，并提供了Visual Studio Code的安装和基础设置教程。 * **附加内容：** 课程包含关于AI对WEB设计未来影响的特典讲座，以及关于 문의フォーム（联系表单）的实用教程。 * **专业制作：** 课程采用专业配音员的旁白，并提供背景音乐和插画，营造良好的学习体验。 **课程目标：** * 掌握Flexbox和媒体查询的核心技术。 * 能够独立设计和制作响应式网站。 * 提升WEB设计技能，为职业发展打下基础。 **适合人群：** * 已经掌握WEB设计基础，希望进一步提升的学员。 * 希望学习Flexbox和媒体查询等现代CSS技术的学员。 * 希望独立完成响应式网站制作的学员。 * 对WEB设计系列课程Level 1已完成的学员。 **请注意：** * 课程提供代码示例供学员比对，但不会直接提供完整的网站源文件。 * 推荐使用Brackets编辑器以确保与视频内容一致的显示效果。 * 部分内嵌字幕为自动生成，可能存在不准确之处。
▼ご注意くださいstoreGが公開している講座は、講師によるナレーションではなく、全てプロのナレーターによるナレーションを採用しています。そのため、ナレーションにこだわりがある方は、ひとまず無料視聴動画をご確認いただき、受講をご検討いただければ幸いです。新着情報 [NEW] 【確認テスト】コースの理解度をチェックしよう を追加しました。※全部で11問です。全問正解を目指してがんばってください！特典レクチャーの「WEBデザイナーの仕事は将来、AIに奪われるのか？」で9.最新のテスト結果 (GPT-4V) 2023/10/10 を追加しました。※ChatGPTのコーディングレベルがかなりアップしています！【追加】WEBデザイナーの仕事は将来、AIに奪われるのか？【7】【8】※2023年7月上旬版特典動画を追加しました！※シリーズWEBデザイン講座共通の特典動画となります。WEBデザイナーの仕事は将来、AIに奪われるのか？について、気になっている方も多いのではないかと思います。そのような疑問に対する答えとなるような動画を作成しましたので、是非、ご視聴ください！特典セクション※エディタのインストール方法などのセクションに、【Brackets】ライブプレビューがエラーになる場合についてのテキストレクチャーを追加しました。Udemyのシステムにより自動で生成された字幕が表示されるようになりました。※字幕内容は自動生成のため、正しい日本語に置き換わっていない部分があります。予めご了承ください。エディタソフトの Brackets が復活！※詳細については、ご使用中のエディタについて のレクチャーをご確認ください。本講座のサポートについてのレクチャーを追加しました。Flexboxを楽しく学べるサービス「FLEXBOX FROGGY」の紹介を追加しました。特典セクションに以下のレクチャーを追加しました。Visual Studio Code のインストールテーマの変更ファイルの保存と設定リアルタイムプレビュー問合せフォームで使用しているformrun（フォームラン）の画面が一部変更されたので、動画を修正・更新しました。14.問合せフォームの作成15.メールフォームの編集特典セクション※Flexboxの基本を追加しました。FlexboxとはFlexboxの基本lesson13つの画像を横並びで表示させるlesson26つの画像のうち、上の3つの画像のみ横並びで表示させるflex-directionlesson3flex-directionプロパティflex-wrap 横並び表示「row」lesson4flex-wrap 横並び表示「row」wrapwrap-reverseflex-wrap 縦並び表示「column」lesson5flex-wrap 縦並び表示「column」wrapwrap-reverseuser agent stylesheetのリセットflex-flowlesson6flex-flowプロパティショートハンドプロパティとは値を省略した場合の注意点flex-basislesson7flex-basisプロパティwidthやheightとの違いflex-growlesson8flex-growプロパティ複数のFlexアイテムに同じ値を指定する各Flexアイテムに違う値を指定する3つのFlexアイテムの幅を1：2：3に設定するflex-shrinklesson9flex-shrinkプロパティflexlesson10flexプロパティflexプロパティの値を省略した場合単位がない数値を1つ指定した場合単位がつく幅や高さを1つ指定した場合単位がない数値を1つと単位がつく幅または高さを1つ指定した場合単位がない数値を2つ指定した場合justify-contentlesson11justify-contentプロパティflex-startflex-endcenterspace-betweenspace-aroundspace-evenlyalign-itemslesson12align-itemsプロパティstretchflex-startflex-endcenterbaselinealign-selflesson13align-selfプロパティalign-contentlesson14align-contentプロパティflex-startflex-endcenterspace-betweenspace-aroundspace-evenly本講座の特徴複数のWEBページからなる「WEBサイト」を作成する制作するのはポートフォリオサイトですが、ベーシックな構成なので、画像やテキストを変更すれば、その他のWEBデザインに対応させることが可能です。WEBサイトの構成TOPページ【HOME】ポートフォリオ詳細ページABOUTページCONTACTページ ※問合せメールフォーム※1. Brackets(エディタソフト)を使って、レスポンシブWEBデザインのHTMLとCSSを作成(コーディング)します。 Bracketsでないと動画と同じ表示にならないレクチャーがありますので、ご注意ください。※2. CONTACTページは無料のメールフォームサービスを利用します。Flexboxとメディアクエリでレスポンシブ対応サイトを作るレスポンシブ対応のWEBサイトを作成するには、いくつかの実装方法がありますが、本講座ではFlexboxとメディアクエリを使ったレスポンシブWEBデザインを作成します。Flexboxはとても便利なモジュールですが、仕様の部分で知っておかないと思い通りに表現できない癖などもあるので、そのポイントを学習しながら、意図したイメージ通りのWEBサイトを作成します。対象と目標本講座は、初級レベルから次のレベルへステップアップされたい方を対象に、 Flexbox と メディアクエリ を使用した「レスポンシブ対応のWEBサイト制作」について学習します。WEBサイトの制作に必要な知識や技術を学びたい方。ご自身の力だけでオリジナルのWEBサイトを作成・公開したい方。これまでWEBサイトの作成にチャレンジしてきたけれど、思い通りに完成できなかった方。WEBサイトに必要な技術やサービスについてトータルで学びたい方。シリーズ講座のlevel1を修了された方。などにとって、役立つ講座になるかと思いますので、ご自身にあてはまると思われる方は是非ご受講ください。【ご注意】Flexboxやメディアクエリについて学習済みの方にとっては優しいレベルになりますので、ご受講の際にはカリキュラムをご確認いただき、ご検討いただければ幸いです。教材について【ご注意】WEBサイト完成版（HTMLやCSS）は、教材の中に入っておりません。※各セクションの最後には、受講者様がコーディングされた内容と比較、答え合わせができるように、サンプルソースはご用意していますが、原則、講座を修了されたときにWEBサイトが完成されるようなカリキュラムとなっています。予めご了承ください。ナレーション・BGMほかナレーション 竹中 さやかBGM YOU (storeG)イラストなどDesigned by FreepikfreepikMacrovectorイラストACprezicanva
