マークアップ特化型コーディング効率UPセット
- HTML
- CSS
- JavaScript
- SASS
- EJS
- mixin
- BEM
- FLOCCS
- CSS設計
- 共通化
学習期間:11時間20分
解説動画:92本
ポートフォリオ掲載:✓OK
LPやコーポレートサイトをコーディングする際実務では
HTMLやCSSに直書きなどほとんどしません。
チーム単位で実装するならもってのほかです。
●SASSを使用してのCSS設計
●EJSでテンプレート開発
これらの効率のUP手法を用いてプロは案件に挑みます。
このスキルセットの知識1本で基礎からロジック観点実務実装と
3段階で重点的に学べ、実務でもポートフォリオ作成にもすぐ使えます。
マークアップ効率化を学んで自身に刷り込ませることで2~3倍以上に
作業の効率が上がります。
SASSを使用するためのやり方も適切にわかりやすく解説させていただいております。
さらにEJSを使用するためのローカル開発環境も
簡単にセットアップできる解説動画&ファイルもお渡しするので
これから先ejsの実装で困ることはなくなります。
この講座で学べること
-
HTMLの書き方や役割を基礎から学ぶマークアップ入門(8本)
- HTMLの宣言をしてみよう15:10
- HTMLの構成を理解しよう22:07
- タグの役割を覚えよう22:32
- コメントアウトの利用例10:21
- 外部ファイルの読み込み方09:47
- パスとは24:52
- idとクラスを見極めよう17:43
- ブロックとインライン要素の違い11:43
-
CSSで挫折しない為の基礎学習【超重要プロパティ】(11本)
- プロパティと値について11:10
- プロパティと値の使い方を覚えよう【文字編1】17:18
- プロパティと値の使い方を覚えよう【文字編2】09:51
- displayプロパティについて11:22
- marginとpaddingの違いとは14:15
- widthとheightについて15:52
- flexboxについて06:20
- positionについて06:35
- 擬似クラスについて06:37
- 特殊なセレクタについて08:17
- 疑似要素について03:54
-
Web制作でCSSを簡単に書くためのSASS入門【小技あり】(8本)
- SASSとは03:44
- 使用するための環境構築04:35
- &を使ってネストを省略しよう05:21
- 変数を使ってみよう11:30
- mixinを知ろう14:45
- functionとmixinの応用14:19
- 配列とeachについて13:57
- for文を使ってみよう06:36
-
現場で使うCSS設計の考え方参考サイトを元に解説(15本)
- CSS設計を始めよう09:00
- FLOCSSについての解説06:59
- BEMについての解説04:41
- CSS設計の思想について理解を深める10:38
- CSS設計のコーディングを始めよう17:29
- keyVisualを整えよう07:30
- Footerを整えよう04:45
- コンテンツ一覧部分の設計を実装しよう17:55
- コース一覧部分の設計を実装しよう21:35
- @import廃止による対応をする場合はコチラ
- DartSassとは03:27
- VSCODEでDartSassを使えるようにしよう04:15
- @useの使い方11:18
- @forwardの使い方11:29
- パーシャルファイルの自動保管06:50
-
JavaScriptで学ぶプログラミングの基本のきほん【16項目】(18本)
- JavaScriptでできること03:36
- console.logとalert03:40
- 外部ファイルに接続しよう03:57
- 変数を定義しよう03:57
- 変数に再代入しよう02:56
- 定数について07:17
- 型について05:13
- 四則演算とは03:27
- 文字連結のやり方03:53
- 配列について05:49
- 連想配列について06:45
- if文を習得しよう08:42
- for文を習得しよう05:22
- 関数について学ぼう【その1】03:53
- 関数について学ぼう【その2】02:41
- 関数について学ぼう【その3】09:34
- forEachについて06:32
- 組み込み関数について07:13
-
EJSを使いコーディング力を中級者まで引き上げる(13本)
- ejsについて04:27
- macの環境構築09:26
- windows環境構築03:04
- ejsのコンパイル06:16
- パーセントの使い分け08:56
- includeを学ぶ13:21
- if文をやってみよう06:15
- for・forEachが便利すぎ07:36
- 実践開始!!includeからやってみる11:37
- headとheaderとfotterをejs化20:47
- 商品一覧部分のejs化15:26
- コース一覧をejs化10:57
- あとがき09:40