当記事はデイトラでWEB制作コースを受講して28週間、どんな状況でどんな勉強をしているのかまとめています!
未経験、プログラミングの事は全く分からない私が、デイトラで学んだらプログラミングができるようになるのか？という趣旨で発信しています。
- 未経験でもできるの？
- 他の人がどんな風に勉強しているのか知りたい。
- デイトラを受講したいと思っているけどどんなものなの？
そんな方の判断材料になれば幸いです！
なるべくコードや専門用語を使わないように書いているので気楽に見てくださいね。
デイトラ上級編最終課題に挑戦しています！
この記事では以下の３点について書いています。
- デイトラWEB制作上級で学べること
- デイトラ上級編最終課題とは何をするのか？
- 個人的に最近の学習内容
学習時間は約800時間。数字で見ると結構やっている気はしますが、中身が伴っていないのが辛いところ(´；ω；｀)
後半は少しコードが多くなっております(^o^;)
＼デイトラを受けるならここから／
デイトラWEB制作上級で何をするのか
デイトラWEB制作コースの上級編を一通り学びました。
上級編で学べることは大きく2つ。
- 「HTMLのサイトをwordpressに対応させる方法」
- 「wordpressを使ったサイトを納品するときに気をつけること」
wordpressに対応するというのは、コーダーにとって必須のようで案件も多いといいます。
私はまだ案件を探していないので伝え聞きですが(・・;)
上級ではwordpressについてガッツリと学びました。
HTMLでコーディングされているサイトをwordpressにするための方法、コードの書き方。wordpressで便利なプラグインの紹介、使い方。
サイトセキュリティの方法、サイト更新時のキャッシュ削除方法、サイトの表示速度改善方法などのクライアント様への配慮方法などなど。
テストサイトを使ってwordpressに関する様々なことを学びます。
デイトラ上級編最終課題に取り掛かる
「デイトラを卒業する」なんて言います。卒業式があるわけではないのですが、指定された最終課題をクリアしたらデイトラの学習を卒業できます。
上級編最終課題は、初級、中級、上級で習った要素がてんこ盛り(＋αされてる気がする)なサイトを作成します。
何ページもあるコーディングを行い、wordpressに対応したサイトにするといったものです。
何百時間も学習してきた人たちがちょっと怯むようなサイトが3つ並んでいて、自分にあったものを選んでねというものです。
デイトラを学習し始めて6ヶ月に入り上級編最終課題制作に取り掛かりました
サイトをwordpress化させる前のサイトを作るコーディングの時点でヒィヒィ言っておりますが、頑張って続けていきたいと思います(´；ω；｀)
最近の学習内容
最近の学習で時短のために試したこと、コーディングでの失敗例と解決策をまとめておきます。
コーディングの時短のために試したこと
コーディングに時間がかかってしまうため、少しでも時短ができないかな？と試しています。具体的には以下の2点
- コードスニペット登録をする
- 新しく拡張機能を入れる
といったことをしています。
コードスニペット登録をする
HTML
ピクチャータブ：ピクチャータブのソースセット、imgタグを1セットでまとめました。
ウィンドウサイズは768pxで切り替わるようにしていますが、数字を変更するだけでレスポンシブの対応をします。
"Picture Tag": {
"prefix": "picture",
"body": [
"<picture>",
" <source srcset=\"$1\" media=\"(max-width: 768px)\">",
" <img src=\"$3\" alt=\"$4\">",
"</picture>"
],
"description": "Basic picture tag with responsive sources"
},
}スワイパー全般：swiperと打ち込むだけで公式のコードをまるっと出すようにしています。
notionにまとめていましたが、呼び出す手間を省けます。
"Swiper Slider HTML": {
"prefix": "swiper",
"body": [
"<!-- Slider main container -->",
"<div class=\"swiper\">",
" <!-- Additional required wrapper -->",
" <div class=\"swiper-wrapper\">",
" <!-- Slides -->",
" <div class=\"swiper-slide\">Slide 1</div>",
" <div class=\"swiper-slide\">Slide 2</div>",
" <div class=\"swiper-slide\">Slide 3</div>",
" <!-- 他のスライドを追加 -->",
" </div>",
" <!-- If we need pagination -->",
" <div class=\"swiper-pagination\"></div>",
" <!-- If we need navigation buttons -->",
" <div class=\"swiper-button-prev\"></div>",
" <div class=\"swiper-button-next\"></div>",
" <!-- If we need scrollbar -->",
" <div class=\"swiper-scrollbar\"></div>",
"</div>",
"",
],
"description": "HTML code for a Swiper slider."
},
scss
疑似要素：使うたびに打ち込んでいたのを、よく使うものをまとめて登録しました。
画像を貼り付けたいときが多いので、urlの中に画像パスを設定したらとりあえず使えるところまで設定しています。
before
"CSS Before Pseudo Element": {
"prefix": "before",
"body": [
"&::before{",
" position: absolute;",
" content: \"\";",
" background: url(../)center / cover no-repeat;",
" top: 0;",
" left: 0;",
" width: auto;",
" height: auto;",
"}"
],
"description": "CSS before pseudo-element"
},after
"CSS After Pseudo Element": {
"prefix": "after",
"body": [
"&::after{",
" position: absolute;",
" content: \"\";",
" background: url(../)center / cover no-repeat;",
" top: 0;",
" left: 0;",
" width: auto;",
" height: auto;",
"}"
],
"description": "CSS after pseudo-element"
},javascript
スワイパーのカスタマイズ：javascriptで使うswiperの基本的なカスタマイズを登録しています。
"Swiper Slider JavaScript": {
"prefix": "swiper-js",
"body": [
" var swiper = new Swiper('.swiper', {",
" loop: true, // スライダーをループさせる",
" breakpoints: {",
" 1200: {",
" }",
" }",
" pagination: {",
" el: '.swiper-pagination',",
" clickable: true,",
" },",
" navigation: {",
" nextEl: '.swiper-button-next',",
" prevEl: '.swiper-button-prev',",
" },",
" scrollbar: {",
" el: '.swiper-scrollbar',",
" },",
" });",
],
"description": "JavaScript code for initializing a Swiper slider."
},HTMLではピクチャータブ、スワイパー
SCSSでは疑似要素
Javascriptではスワイパーのカスタムを登録しました
VScodeで便利な拡張機能を入れる
時短のために使えそうなもの、便利そうなものを入れました。
ネストの範囲がひと目で分かる：Blcokman
コードを書いていると、どこにネスト(入れ子)されているのかわからなくなって、どこの親要素？兄弟要素？どこに効いているの？と、なることが多いです。私だけでしょうか(´・ω・｀)
視覚的にわかりやすくしてくれるブロックマンという拡張機能を入れました。
マルチカーソルで連番を簡単に入れられるInsert Sequence
スライドの画像やカードレイアウトが連続で続くとき、語尾の番号を連番に登録しておけば上記の拡張機能を使うことで簡単に複数の設定ができます。
card-image-1
card-image-2
card-image-3
といったものを調整するのに非常に役に立ちます。
コーディングで失敗したなぁという内容
日々失敗を重ねています、反省と対策を兼ねて書いています(´・ω・｀)
gridレイアウトに固執してレイアウトがめちゃくちゃになった。
→時代はgridだ！flexに頼ってばかりじゃだめだ！と意気込んで、gridをあちこちにあててレイアウトをするも、収集がつかず何時間も無駄にした。
インライン要素を縦に並べたいのにできなかった
→インライン要素が並んでいると、ウィンドウサイズが大きくなると横に並んでしまって縦に並べられなかった。
親要素にflexやgridを使うと、子要素はblock要素になってしまい、インライン要素ではなくなってしまう。
border-bottomをテキストに合わせて設定したいのにblock要素だと不自然になってしまうため合わせられず。
→解決のために
テキストを囲う要素で位置調整を諦め、テキストそのものにposition:absoluteをつけて位置調整をした。
すごく強引なのでいい方法を探したい。
以下にposition:absoluteを使った配置のコードを置いておきます。
各行に対してスタイルを当てているので直すのが非常に手間になりますのでなんとかしたいところ…
.fv-titles {
position: relative;
}
.fv-title {
position: absolute;
padding-inline: 10px;
font-size: 50px;
border-bottom: 2px dotted black;
display: inline-block;
$top: 10px;
top: $top;
&:nth-of-type(2) {
top: calc($top + 60px);
}
&:nth-of-type(3) {
top: calc($top + 125px);
}
&:nth-of-type(4) {
top: calc($top + 190px);
}
}【体験談】初心者がデイトレでプログラミングを学んだらどうなる｜まとめ
デイトラ上級編最終課題まで進んで
- デイトラ上級ではHTMLサイトのwordpress化、wordpressを納品するときに必要なことを学ぶ
- 最終課題は今までの総合的な能力を図るための課題。
ということがわかりました。
しばらくは最終課題に集中したいと思います(｀･ω･´)ゞ
並行してコーディングの効率化、時短化を探して行きます。
まだまだ始めたばかりですが、行ったことは
- swiper、疑似要素のスニペット登録
- 拡張機能Blockman、Insert Sequenceのインストール
もっと便利な拡張機能を探したり、スニペット登録を増やしていきたいですね。
現在学習時間は800時間ほど。1000時間が一区切りと言われていますがあっという間に言ってしまいそう。
これからも続けたらどうなるか？を更新していくので見て頂ければ幸いです。
リスキリング(大人の学びなおし)やIT人材不足はまだまだ続いていきます。勉強を始めるのに遅いことはありません。
自分も何かのスキルを得たい、変わりたいと思っている方、
一緒に頑張りませんか？
WEB制作のスクールは安い買い物ではありませんが、
頑張るだけの価値はあると感じます。
＼デイトラを受けるならここから／
