【デイトラ】実案件チャレンジ第三回【WEB制作コース】

当記事はデイトラでWEB制作コースを受講して38週間、どんな状況でどんな勉強をしているのかまとめています

未経験、プログラミングの事は全く分からない私が、デイトラで学んだらプログラミングができるようになるのか？という趣旨で発信しています。

そんな方の判断材料になれば幸いです！

なるべくコードや専門用語を使わないように書いているので気楽に見てくださいね。

この記事では以下のことが書かれています。

現在学習時間は1113Hほど。ひたすらコードを書いている一週間でした。

＼デイトラを受けるならここから／

デイトラ実案件チャレンジ？

デイトラ主催？の実案件チャレンジに挑戦している1週間でした。

#デイトラ Web制作コース
第3回 #実案件チャレンジ 開催🧑‍💻✨

◎課題
コンサルティング専門の情報メディアサイト（※架空です）

◎提出期限
2024/8/30(金) 21:00まで

無料で実務レベルの腕試しができるチャンス！
合格された方には合格証もお送りします🎖️
参加は次のポストから↓

=====… pic.twitter.com/AtmYk706bf

— ショーヘー@デイトラ代表 | 受講生25,000人突破 (@showheyohtaki) August 19, 2024

デイトラ代表であるショーヘーさん自らポストの実案件チャレンジ。

実案件ほどのボリュームのあるデザインカンプを高クオリティ、納期でコーディングを行おうというものです。

第三回目にしてwordpress化までを目標にしたコーディングになっています。

納期内にクオリティ高く納品(提出)できたら箔が付く！ということで挑戦しています。

卒業制作でwordpress作ったしなんとかなるでしょう〜の感じです。

デザインは全6ページ、納期は2週間。wordpressによる動的なコーディングもそうですが、シンプルに静的なコーディングも難しいカンプとなっています。

カテゴリ一覧から投稿記事を一覧でカードスタイルで出力したり、スワイパーを数か所で使ってみたり。

見ている分にはいいんですが、作ろうと思うと大変です。

挑戦1週間でできたこと

1週間ほど挑戦して、トップページを動的に動くようにするところまで作成できました。

制作した順番は

• HTMLでトップページをザーッと作る(平日5日、20H)
• wordpress化、投稿記事ページを作る(土曜、6H)
• トップページに投稿記事が反映されるようにする(日曜、9H）

トータル35Hほど作業しました。

ヘッダーが変化したり、ホバーを作っていなかったり、色々中途半端ですが。

トップページを作成する際にスワイパーの仕様を勘違いし、実装できないものを必死に実装しようと８H位使いました。

役に立った記事

サイト制作時に役に立った記事をまとめておきます。

タブメニュー制作

動くWebデザインアイディア帳|タブメニュー

ページ内タブメニューを実装するのに参考にしました。

ラジオボタンを使用したり、チェックボックスを使ったりする方法がありましたが、aタグで切り替える方法を使うために参考にしました。

https://shogo-log.com/category-tab/

aタグを使ってwordpressで動的にタブ切り替えを行うためにクラスやHTML構造を参考にしました。

カテゴリに色付

HPcode|カテゴリーの色を管理画面から指定してラベルの背景色とするWordPressカスタマイズ

カテゴリを動的に取得した際に、勝手に色分けされるようにするために参考にしました。

ダッシュボードで色を指定。wordpressの関数で指定された色を取得して反映させます。

figmaプラグイン

figmaから画像をエクスポートするときに勝手にwebpにしてくれる

Webp Exporter|Figma

figmaのプラグインで、png画像を勝手にwebpに変換してくれます。

倍率も決められて、いつも通りにエクスポートするだけで軽い画像にしてくれるのでわざわざ変換する手間が省けて時短になります。

デイトラ実案件チャレンジ第三回【学習38週目】

今週は実案件チャレンジに全ふりした一週間でした。他のこと何もしていません…。

前回の第二回は全然間に合わず、悔しい思いをしたので今回はもうちょっとマシにしたいと思い頑張ります。

ブログも落ち着いたらまとめようと思います。

これからも続けたらどうなるか？を更新していくので見て頂ければ幸いです。

リスキリング(大人の学びなおし)やIT人材不足はまだまだ続いていきます。勉強を始めるのに遅いことはありません。