サイタWeb・デザインスクールHTML/CSS入門講座 東京 HTML・CSS・Wordpress講座 レッスンノート 体験レッスン初日

体験レッスン初日

HTML/CSS入門講座のレッスンノート

レッスンノートって?レッスンノートって?

レッスンお疲れ様でした!

とあるサイトの再現ということで、本格的なサイト制作をベースに、わかりにくいポイントに絞っての質疑応答スタイルの講義でした。

【おおまかなレッスン内容】
・コーディングの基本的な考え方
・Flexboxを使ったレイアウトの手法
 参考: https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet
・emmetちょっとした小ネタ
・Position レイアウトに関する話
・Sassに関する話

かなり独学されているので、HTML、CSSの基本的なところの理解は大丈夫だと思います。
今後は応用力や引き出しを増やしていくことに専念してレッスンしていければと思います!

また動きのあるサイトを実現するためにはCSS3アニメーション(animation, transition)や、jQueryをサイトに仕込んでいく必要があります。

ハンバーガーメニューの実装はできていたので、基本的な部分を理解して自分でちょっとしたスクリプトが書けるところまでいければよいですね。
このレッスンノートを書いたコーチ

業界経験20年!現役ウェブデザイナーが1から10まで丁寧に解説します

新着レッスンノート

体験レッスンの受講誠にありがとうございます。 ノートの記入大変遅くなり申し訳ございませんでした。 現在のスキルとレッスンの進め方のヒアリング、Webサイト制作の基本、HTML,CSS,JavaScriptの概要についてお話させていただきました。 Pythonを独学されているという...

前回から間が空いてしまったので、状況確認と課題サイト制作の続きを行いまいした。 ヘッダー部分のレイアウトを細かく実装していきました。 今回のポイントは要素の細かい特徴(インライン要素、ブロックレベル要素)を捉えていくことでした。 ・インライン要素=改行されない、text-alignで並び...

今回はヘッダーのレイアウト中心のレッスンとなりました。 またコンテナ(最大幅の設定コンテンツが入る領域)の考え方について解説させていただきました。 レイアウトではフレキシブルボックスを多用していくことになりますが、その際は親と子でどのような影響を受けているのかを具に見ていくことが重...

今回のレッスンもご自身で進められたコーディングの進捗確認と添削を中心に行いました。 【コンテナの考え方】 最大幅が必要な箇所は .containerなどのクラスを予め作り、max-widthなどで幅を決めておき、対応します。 <div class="container">...</d...

前回はレッスンお疲れさまでした。 新しい課題サイトに関する質問に答える形のレッスンでした。 【プロジェクト設定】 VS Codeにて新規プロジェクトを立ち上げる方法を再度解説させていただきました。 1. ファイル -> 新しいウィンドウ 2. プロジェクトフォルダを開く(ドラ...

レッスンノート ページ先頭へ

HTML/CSS情報

サイタのHTML/CSS講師がブログを通して、HTML/CSS情報を発信。更新情報のチェックはこちらから!

twitter

HTML/CSSの先生

@DTPCyta