【体験談】初心者がデイトラでプログラミングを学んだらどうなる？【11週間目】

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

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

未経験でもできるの？
他の人がどんな風に勉強しているのか知りたい。
デイトラを受講したいと思っているけどどんなものなの？

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

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

ばく

11週目はデイトラ中級の復習をしています！ボリュームがあるのでところてんのように知識が抜けていきます…。

当記事ではデイトラ中級の追加課題での苦労話。

私のWEB制作学習中の失敗談と解決方法の考え方をまとめています。

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

デイトラ中級復習中
とにかく手を動かす学習法
学習中の失敗談と解決への考え方
【体験談】初心者がデイトラでプログラミングを学んだらどうなる？【11週間目】❘まとめ

デイトラ中級復習中

私はデイトラを受講しているのですが、メインのカリキュラム以外に「余裕のある人向け」課題といったものが存在します。

デザインカンプ(WEB制作で作成するサイトのデザイン)が置いてあり、復習しながらやってね。といったものです。答えも解説もありません。

デイトラ中級DAY30中28まで終わったところ、一通り学習が終えたので復習がてら取り掛かっています。

復習することで脳に記憶が定着し、長期保存されると言います。参考❘STUDY HACKER

ばく

私は特に記憶力がないと自覚しているので、何度も繰り返しています。

約一月前に行っていた学習の復習をしています！全く覚えていないかと思いきや、意外にやっていればできるようになります。

とにかく手を動かす学習法

世の中たくさんの資料や学習方法がありますよね。WEB制作の現場で最前線で仕事を行っている方が発信しているYoutubeなんかはとても参考になります。

学習中、ピンポイントでわからない箇所の解決方法がわからなかったり、全体がおかしくなったりして手が止まってしまうことも多々あります。

それでも「10秒手が止まったら何でもいいから書く」という学習方法を取っています。

ばく

総当たりでコードを書いていけば案外何とかなるもんです！

考えていてもわからないものはわからないので

何となく思いつくコードを片っ端から書いていく
わからないプロパティ(widthやtransitionなど)について検索する
それっぽい関連動画を見る

等々を行っています。

手が止まるというのは次の一手の選択肢がない、もしくは正解がわからないといった状態のため、

選択肢を増やす(インプットをする。動画を見たり記事を探したりする
選択肢を探る(アウトプットしてみる、数うちゃ当たるの精神

上記の二つをしてみて正解を探っています。

学習中の失敗談と解決への考え方

WEB制作の学習ではうまくいかないことの方がほとんどだと思います。

うまくいかな過ぎて心が折れてしまうこともあるかもしれません…。それにSNS等で他の方の進捗をみて順調だと「自分はダメなのかな」なんて落ち込んでしまうこともあります。

失敗ばかりの私の具体例を挙げてみるので、こんなことで悩んでるやつがいるんだと笑ってみてください。

ヘッダー(サイトの一番上)を作る上で詰まった事

原因が分かればしょーもない失敗ばかりですが、わからないと焦ってしまいます。

ちょっと専門用語が多くなりますが、こんなことで悩んでいました。

jQueryでクラスの指定をするのに(".class")としていた。.がいらなかったのに気づかず1時間位格闘してた。
なんかボタン周りに変な線ができてる…。直すのに30分かかる。
transitionプロパティの理解が足りないまま実装。変な動きする！と30分カチカチやる。
ドロワーメニューの実装をした際、画面いっぱいでない原因がわからず1時間かかる。
ドロワーメニューを実装、メニュー画面が一番手前に出ない(本文テキストがメニューの手前に出て邪魔)
ドロワーメニュー実装後、メニューを閉じると一瞬変な動きをする、直らずふて寝。
ドロワーメニュー作ろうと思ったら出したい線がでない。30分位困惑する。
メニューを選んだ時に出るエフェクト(色が変わったり動いたり)がいらないところにまで出た。消すのに2時間くらいかかる。
エフェクト消したら他の出したいところも消えて修正に時間をかける。2時間。
スマホとパソコンで出したい画像を切り替えるのに大苦戦。トータル3時間位かかる。
文字と画像を横に並べたときにきれいに並ばない。おかしい！となって関連するコード周りを1時間位みる。
JavaScriptが効かない！コードを見直すも変なところはない。HTMLにscript書き忘れ。
jQueryが効かない！！原因を探るもコードは大丈夫。＃の入れ忘れ。30分位。
flex-direction: row-reverse;で配置がおかしくなる。狙った通りに配置が動いてくれない…。解消に3時間くらいかかる。
画像のサイズがいい感じにならない。CSSに思いつく限り書いてもダメ！2時間位。
疑似要素が表示されない。必要なプロパティの入れ忘れ。30分位。
疑似要素が表示されない！必要なプロパティ入れたのに！html側のミス。30分位。

上は1週間でのミスですが、1日に何度も詰まって投げ出したくなる時がよくあります。

毎日これはちょっと辛い(´；ω；`)ｳｩｩ

詰まった時の考え方：1.現状把握

思ったような配置ができない！なんでそうなるんだよ！とイライラしちゃうのですが、まずは落ち着きます。

最初に行うのはデバック用のコードを入れて「今何が起きているか？」を確認していきます。

コードはコチラ。このコードを使うことで現状が把握できます！

* {/* WEBページ内すべての要素 */
  outline: #000 2px solid;/* 各要素の境界が明確に可視化 */
}

参考❘Tips web【超簡単！】予期せぬ横スクロール・謎の余白を瞬時に解決する方法！

最近検索しているときに見つけたCSSの要素のはみ出し（？）を見つける方法が便利で感動✨要素ごとに線を引いてくれるので、なんとなく配置に違和感があったところも明確にできる🙆‍♀️

いろいろ手直ししてたら時間が溶けました🫠https://t.co/MuLHWWRkKB pic.twitter.com/Z9KtxMcr2V
— あんちゃん【Web制作】 (@Web_AnChan08) February 5, 2024