いずべママ実際に講座の生徒になった私が、Fammのママ向けWebデザイン講座の授業内容や自主学習のリアルをお伝えしたいと思います。
ちなみに当記事を書いたのは、第1回の授業が終わって50日が経過したところです。
Fammのママ向けWebデザイン講座を受講するかどうか悩んでいる方は、ぜひこの記事や関連記事を読んで、自分が受講する姿を想像してみて欲しいです。
Fammのwebデザイン講座の第5回目の授業を終えての感想
今回は作業が少なく、講師の説明が多かったです。
でもCSSの入力作業は、自分で課題のコーディングに取り掛かっているだけあって、手慣れてきて、みなさんとても早かったです。少し焦りました。
Fammのwebデザイン講座の第5回目の授業内容
授業はZOOMです。15分前から接続可能です。（第1回のみ30分前から可）
第5回目の授業は次のような内容でした。
①JavaScriptとjQueryとSlick
現在Webブラウザーが直接実行することができる言語にはHTML、CSS、JavaScriptの3つがある。
JavaScriptは唯一のプログラミング言語。難しいので、簡単に使えるようにしたものがjQuery。
今回は、さらに簡単に使えるようにしたslickというプラグインを使って、トップ画像が自動で切り替わるWebページを作成しました。
カレー作りに例えると、
JavaScript→香辛料をブレンドするところから作る。
jQuery→市販のカレールーで作る。
Slick→レトルトカレーを温めるだけ。
みたいな感じで、手軽にできるもの程、オリジナリティーは出しづらいといった感じ。
②Slick
「index.html」、「style.css」ファイル、「script.js」ファイルにSlickのHTML・CSS・JavaScriptを記述すれば使える。
script.js に書くコードは頭に＄が付いているが、これがjQueryのマーク
頭のfunctionは通常はHTMLが前から順に処理してしまうところを、「HTMLが最後まで読み込まれた段階で処理を始めて」と命令する記述で、必ず必要。
自動再生速度は、画像が止まっている時間をミリ秒で表す。（最後のautoplaySpeed:2000は2秒の意味。Sは大文字なので注意）
例）
$(function () {
$(‘.slider’).slick({
arrows: false,
dots: true,
autoplay: true,
autoplaySpeed:2000
});
});
↓カスタマイズしたい場合はこちらを参考に。
③CSSのサイズの単位
「px」以外にも「%」「em」「rem」なんかがある。
レスポンシブ対応（PCにもスマホにも対応）のことを考えると、「px」は面倒なので、最近は「rem」を使う人が増えている。
「rem」は「root em」の略でhtmlのfont-sizeを基準としてその○倍にするという単位。
例）
htmlでfont-size: 10px;と指定した場合
1remは10pxであり、1.5remが15px となる。
④::before、::afterの使い方
擬似要素→HTMLには書かれていないものをCSSで作ること。
HTMLを汚さずにCSSだけで装飾文字や記号を入れちゃう機能。
タグ名やクラス名、id名などの後に「::before」や「::after」をつければOK。
必ず「content:”」が必要。
⑤完成したWebサイトの公開方法
サーバーを用意する（ドメインも取得）→サーバーにWebページの情報をアップロードする
FTPクライアントと呼ばれるファイル転送ソフトを使用してアップロードする。
FTPクライアントの例→Filezilla、Cyberduck
なお、写真の位置情報データは残ってしまうので、自分で削除しておく必要あり。
レッスン終了後のオススメの勉強方法
デザインとコーディングは全く違うもの。講師からは、得意な方を伸ばしていけばいいとのアドバイスがありました。
Fammのwebデザイン講座の第5回目の課題について
前回から引き続き、オリジナルウェブサイトのコーディングファイルを完成するまで提出。
途中で息づまった場合は、途中提出して質問も可能です。
Fammの受講料無料キャンペーン（スキル枠）の課題について
課題は結構早い目にFacebookで発表されていました。20日くらいだったと思います。
受講講座に関係なく、4つの部門から1つを選んで提出します。翌月15日が提出期限です。
なお、講師への質問はNGですので自力でする必要があります。
毎回テーマは変わりますが、今回のテーマは
①バナー：「行政の子ども向け施設のオープン告知」サービス内容から自分で考えて作成。サイズ:W1200px × H628px(500KB以内)
②ページデザイン：「行政の子ども向け施設のオープン告知」サービス内容から自分で考えて作成。サイズ:W1366px(※縦䛿指定ないが、1ページで収める)
③コーディング：「Leather Craft ItemについてのLPをコーディング」こちらは見本通りにコーディングを行う課題です。スマホ対応は不要。
④動画：「人におすすめしたいもの・こと」1分以内のオリジナル動画を作成。
Fammのwebデザイン講座の第5週目以降に私がした自習内容について
いずべママ実際に私がやった学習や、時間の都合上できなかったけどやりたかった学習についてお伝えします。
第5回講座の復習
復習用動画を観ました。
前回から引き続きのオリジナルサイトのコーディング続き
意外とすんなり出来上がりました。幅を変更した時の対応で修正がありました。
受講料無料キャンペーン（スキル枠）の課題
私はページデザインを選択しました。
まずはどんなサービスにするかを考えてから、デザインを始めました。
私がオリジナルサイトの課題で作ったサイトは素人感がすごくて、おしゃれなデザインではなかったので、まずプロの方がどうやってサイトを作っているのかを学びました。
↓の動画がオススメです。
コメント