ども、しゅうです。
プログラミング学習サイト、【ドットインストール】の実践練習【256times】の自由課題など、
自分のhtmlやプログラミングを練習して作ったものを、この記事にリンクを貼って並べていきます。
まだまだ、、、まだまだなレベルなので、見て参考になるものではないですが、、、
自分の成長の足跡としても残していきます。
おっさんが、下手くそなコード書いてやがる、、、
こんな下手くそが頑張ってるんだから、ボクだって、ワタシだって!!
と思ってくれれば幸いです。
学習の進捗:主にプログラミング学習サイト【ドットインストール】利用
2023年08月に、プログラミング学習サイトのドットインストールに登録して、まともに勉強始めたの9月からです。
html、cssと基本を動画でみて、10月末からJavaScriptを始めています。
cssなど、実際に自分で0からコードを書いて作る練習を10月末から始めました。
ドットインストールの実践練習、【256times】も始めています。
公開に使っているサイト
書いたものの公開には、無料でページが作れる、
【GitHub Pages】
というサイトを利用しています。
このサイトの使い方は、ドットインストールのサブスク動画の中にもあります。
使っているコードの見かた
どんなhtmlやcssなどのコードを使っているか見るには、
ブラウザ上で、マウスを右クリックして、出てくるメニュー一覧の中から「検証」を選びます。
すると、開発者ツールが立ち上がって、コードが見られるようになります。
実際自分で0からコード書いて作ったもの
2023年
今のところ、スマホ画面にサイズを合わせる、レスポンシブデザインというのを一切やっていないので、スマホで見ると表示が崩れます。
近いうち、勉強見直してレスポンシブデザインもできるようにします。
- 2023/11/01:html、css練習
- 2023/11/03:256times【書いて覚えるCSS Vol.1】自由課題
- 2023/11/09:256times【書いて覚えるCSS Vol.2】自由制作
主にposition
や、Bootstrapアイコンの使い方を練習 - 2023/11/16:256times【書いて覚えるCSS Vol.3】自由制作
table
タグの使い方や、background-image
の配置方法など。その他以前学んだ、アイコンや角を一部だけ丸めるのも練習。
ホントは背景イメージない方が見やすいんですけど、練習するの優先しました。 - 2023/11/26:256times【書いて覚えるメディアクエリー】自由制作
・画面幅によって3段階に表示変化(PCでウインドウ幅変えると表示変わります)
・アイキャッチやマップの画像は%で指定してどの画面サイズにも合うように
・以前の256times身につけた`position: abusolute;`も練習
・知らなかった「タグの中でテキストの一部だけスタイルを変える方法」をググって実装(`span`タグ)
もうちょっと遊びべるかな?とも思いますが、そこそこ納得いく見た目にできました。 - 2023/11/28:JavaScript初練習
今までは動きのないページだけでしたが、JavaScriptを使うことによって「動き」をつけられるようになります。
初なのでシンプルに。
「{}」と「()」の使い分けと、つけるつけないの判断が一番むずい、、、 - 2023/11/28:JavaScript、ハンバーガーメニュー作ってみた
GitHubページでページ公開するとスマホで見たとき、コンパクトに小さくなるみたいなので、大きめに作ってみました。
部品組み合わせて組み立てる感覚が、ホント、プラモデル作ってるのと変わらん、、、
動くプラモデル、、、普通に楽しい。 - 2323/12/3:256times【書いて覚えるフレックスボックス】自由制作
img
にvertical-aline: bottom;
とかをあえて噛まさないと、margin
でもpadding
でも消せないスキマが下にできることを知った。
一応、600px境にレスポンシブデザインにしとります。posision: abusolute;
と、色指定でrgba使って、背景色透過させるのも練習。
MAP画像とか素材あれば、もうちょい遊びたかった?? - 2023/12/8:256times【書いて覚えるCSSアニメーション】自由課題
CSSアニメーションの練習、とにかくぐちゃぐちゃ動かして回数練習
きれいな円形に動かすやり方がまだよくわかってない
2024年
- 2024/1/12:256times【フロントエンド案件修行 給食ぱん屋編】
初めて受けた疑似案件クラス、ホームページのトップひととおり全部作成。
JavaScriptちょこちょこ使えたのでいい練習。
エンドレスで手を加えたくなるけど、実案件だと「納期」を意識しないといけないこと学んだ。 - 2024/02/01:JavaScript 練習【押しボタン式信号・曜日付きカレンダー・時計】
だいぶ JavaScript 書くの慣れてきて、さらにコード書くのが楽しくなってきました。
ボタンを押してみてください。
html や CSS も書くの楽しいけど、JavaScript は動かせるので、より楽しい。 - 2024/02/23:256times【なおして学ぶWebデザイン Vol.3】自由課題
電卓のデザインだけ(機能は未実装)。事務機器なので必要最低限のシンプルデザイン。
こういうスキマを均一にするの、学習初期めっちゃ苦戦してました、慣れって大事。 - 2024/02/25:JavaScriptで実際に計算できる電卓
ひとつ上でデザインした電卓にせっかくなので実際に計算機能実装。
最初書いたら驚きのクソコードになったので、「||」使って整理して書き直しました。
めっちゃいい練習になりました。 - 2024/03/20:カ◯ジ風?じゃんけんゲーム
JavaScriptの練習。カイ◯風じゃんけんゲーム。
ローカルストレージや、コンファームのポップアップ、CSSのアニメーションと組み合わせて動かす練習なんか。
お暇な人遊んでみてください。
ポートフォリオサイト【2024/07月段階で作成途中】
デイトラで作成するポートフォリオサイト
注:サイトに案件募集などと記載ありますが、2024年07月段階で、まだ学習途中、作成途中なので実際はまだ案件は受け付けてません。検索結果にもでないように、no index にしてあります。
他の練習で作ったものと違い、これはレンタルサーバーに実際にあげているためドメインが違います。
順次追加していく予定です。
楽しんで、頑張りましょう!!
まだまだですが、ドットインストールの学習動画の作り方がうまいのか、ガッツリプログラミングの勉強にハマれています。
せっかく買った、アーマードコア6をやるヒマがないくらい、、、
収入につながるにはまだかかるでしょうが、楽しんで、コツコツ一歩ずつ頑張りましょう!!
読んでいただいて、ありがとうございます。
m(_ _)m