見出し画像

デイトラ Web制作コース 初級編 まとめ

MIO

ご覧いただき、ありがとうございます！

デイトラWeb制作コースの初級編が終了したので、学んだことの総集編にしようと思います。
デイトラ受講を検討中の方はぜひ読んでみてください✨


デイトラ初級編で学んだこと

初級編はDAY0〜DAY32までのセクションで構成されており、私は約1ヶ月で完走しました。

基本的には全ての基礎を学びながら、簡単なWebサイトを制作します。

実際にサイトを作りながら学べるので、簡単なWebサイトは自分で制作できるようになりました。
総集編として、項目ごとに学んだことを記述していきます。

使用言語やツール

初級編で使用した言語やツールは、以下になります。

  • HTML：
    Webサイトの骨組みとして、テキストや画像の配置を行う
    コンテンツの構造や基本的なページの制作に使用する言語

  • CSS（Sass）：
    HTMLで作成したコンテンツに、色をつけたり配置を変えたりして、レイアウトを整えるために使用する言語
    Sassは、変数やネストなどの機能を追加して、CSSを簡単に記述するための拡張言語

  • JavaScript（jQuery）：
    動的なWebサイトやインタラクティブ※な要素を実現する言語
    jQueryはJavaScriptのライブラリの一つで、より簡潔にコードを書くことができるようになるJavaScriptライブラリの一つ

インタラクティブ：
閲覧者がコンテンツに対して、直感的に操作したり、反応したりすることができる性質。
例えば、「フォームの入力」や「アニメーションの開始」などがインタラクティブの要素

デイトラ初級編では、上記の言語やツールをVSCodeというエディタ上で実装しました。
VSCodeには無数の拡張機能が備わっており、操作が簡単になったり、記述量を減らすことができるので、初心者の方にもおすすめのエディタです。

そして、Google Chromeの拡張機能を使用しながら、WEbサイトを仕上げていきます。
VSCodeの拡張機能「Line Server」を使えば、ローカルサーバーが立ち上がるので、リアルタイムで表示確認をすることが可能です。

デイトラでは、コーディングの中身だけではなく、環境構築や拡張機能、酢にペとについても学ぶことができ、実際の案件で必要な知識も学ぶことができました。

レスポンシブ対応

レスポンシブはどのデバイスでも、表示崩れせず、適切に表示を調整する手法です。

いまは、スマートフォンを一人一台以上持っている時代になり、タブレットも普及しています。
様々なデバイスでの見え方がとても大切になるので、絶対に学んでおきたい能力になります。

レスポンシブ対応をする上で、「ブレイクポイント」という言葉が必ず出てきます。
ブレイクポイントは、異なるデバイスや画像サイズに適応するための基準になるポイントです。

表示の切り替わる瞬間であるブレイクポイントは767px

ブレイクポイントをどこにするかは、案件によって様々ですが、デイトラで設定した一般的なブレイクポイントは以下です。

  • デスクトップ：1440px

  • タブレット：768px

  • スマートフォン：375px

デスクトップファーストで制作するか、スマートフォンファーストで制作するかも状況によります。

デイトラでは、スマートフォンファーストで作成して、そのあとデスクトップの実装を行います。
最後に、表示崩れがないか、画面の大きさを変えて表示を確認します。

いまはスマートフォンでWebサイトを見る人が増えたので、スマートフォンの使いやすさやデザインを重視して進めているのかなと思いました。
スマートフォンファーストが一般的になっているのかもしれません。

ポートフォリオサイトのブラッシュアップと公開

デイトラ初級編では、「言語を学ぶ」→「実装」→「新しい言語を学ぶ」→「実装」という形で勉強してきました。

最後のセクションで、「自分のポートフォリオサイトを作ろう」という項目が出てきます。

初めは、講座通りにポートフォリオサイトを作っていきますが、そのあとのセクションで「ブラッシュアップ編」と「公開してみよう」が登場しました。

自分で考えたテキストや、自分で用意した画像やロゴを使って、ポートフォリオサイトをブラッシュアップしていきます。

「画像や素材の準備」や「文章の考案」は今後行うかどうかわかりませんが、デザイナーさんたちはそういった作業も場合によっては行います。
自分のサイト分だけでも大変だったので、デザイナーさんに尊敬の念を覚えました（本質ではないですね）

その後、サイトが完成したら、自分で公開まで行います。
大体の流れは以下のようになります。

  1. ウェブサーバーとドメイン名の準備

  2. ドメイン名とWebサイトの紐付け

  3. サーバーに必要なファイルをアップロード

  4. Web上での動作確認・修正

  5. 公開（お仕事だとお客様へ納品）

Webサイトの仕組みとアップロード手順については、前回の記事でも書きましたが、上記の流れで公開まで行なっていきます。

前回の記事⇩
https://note.com/mio_ttr25/n/nebb7ffaf65d9

感想

初級編の完走で、Webサイトを0からコーディングして、公開までできるようになりました！

初級編ではまだ難しいことはできませんが、中級編ではデザインカンプからコーディングをしながら、より高度な実装を学んでききます。
中級編の最後のセクションでは、「課題編」が出てきます。

課題を提出するんでしょうか。
どきどきです。

また、デイトラではたくさんの受講生の方がXで学習記録をつけていたり、コーディングに役立つ知識を発信してくださっています。
応援してくれる人がいたり、周りに頑張っている人がいるのは、とてもいい環境だと感じます。

次回からはデイトラ中級編について、ブログを書いていきます。

最後までお付き合いいただき、本当にありがとうございました🌸

Xで毎日デイトラの学習記録つけてます！
応援していただけると嬉しいです✨
X : https://twitter.com/totoro_mi8


この記事が気に入ったらサポートをしてみませんか？