書籍を使った演習 | 講習内
使用学習書籍リスト
これだけで基本がしっかり身につく
HTML/CSS&Webデザイン1冊目の本出版社:翔泳社
スラスラ読める JavaScriptふりがなプログラミング 増補改訂版出版社:インプレス
-
HTMLとCSS:演習内容
書籍の制作例に加えた内容があれば、その内容も記載しています。- SNSリンク集本通り
- 2カラムレイアウトのサイト 本通り
-
1カラムレイアウト
本通り + 独自に追加した機能
- レスポンシブ / + 承認パネル設置
-
複数ページのサイト
- 本通り / レスポンシブ
-
JavaScript:演習内容
- テキスト置換マシンを作る本通り
- 要素の追加演習本通り
- 書籍検索サービス本通り
Webサイト制作演習 |
講習内での追加演習
Web活用コード演習:ライブラリー利用、カスタムデータ利用 | HTML, CSS, Javascript組み合わせ
- フォーム送信用演習 送信フォーム作成演習
- レスポンシブ対応の既存サイトデータにスライド設置 jQueryプラグイン「bxSlider」利用して設置した例
- カスタムデータ属性利用 data属性からスクリプトを使ってサムネイルから画像を選択
- レスポンシブサイトコード作成 figmaのデザイン案をもとに作成する
- svgを活用した動きを作れるもの
- GSAP利用した。動的な処理で見せるサイト
作成コード(JS, WebAPI利用)や講習での追加制作演習、自主制作したものなど
Web API活用コード演習:ライブラリー利用、カスタムデータ利用 | HTML, CSS, Javascriptなどを組み合わせた演習
- indexedDBをつかったToDoリスト
- 郵便番号APIを使った住所検索フォーム例
-
天気表示:地理情報に基づいた情報利用
openweather API - 天気表示:ローディング付と地理情報に基づいた天気表示
- 特定した地域と地理情報に基づいた天気表示
- カウントダウンタイマーAI(claude, Google, ChatGpt)にプロンプト指定をして作成。一部表示関係のみ自分で修正/ノーコードって言っていいんじゃないのかな的な経験
- シンプルモーダル
- 手を加えたモーダル
- メディア表示練習用
- Design's
-
課題用制作例
- いからし坂キャンピングビレッジデザイン案
- 近藤クリーンサービス株式会社デザイン案
About me
講師プロフィール
- 名前
- やまだ
- すきなこと
- ぼーっとすること
- 好きな食べ物
- スイーツ
- Skill's
- Webデザイン・開発(HTML, CSS, PHP, JavaScript)
- グラフィックデザイン(PhotoShop, Illustrator, ADOBE XD, figma)
- データベース管理(MySQL, MariaDB, SQLite)
- CMS開発・カスタマイズ(WordPress, baserCMS, Moodle)
- IT教育・トレーニング(Microsoft Office, Web開発)
MOTトレーナー & MCTトレーナー2011 / CompTIA CTT+ Classroom trainar - WORKS:サイト制作事例
- 新潟 黄昏の古民家 田村 様
- 有限会社 保険パートナーズ様
- 新潟市就労継続支援B型事業施設 フェイバリット 様
- 産直にいがた 様
- 株式会社 磯部ハイテック様
- As hobby
- Youtube