ども、しゅうです。
プログラミング学習サイト、【ドットインストール】の実践練習【256times】の自由課題など、
自分のhtmlやプログラミングを練習して作ったものを、この記事にリンクを貼って並べていきます。
まだまだ、、、まだまだなレベルなので、見て参考になるものではないですが、、、
自分の成長の足跡としても残していきます。
おっさんが、下手くそなコード書いてやがる、、、
こんな下手くそが頑張ってるんだから、ボクだって、ワタシだって!!
と思ってくれれば幸いです。

学習の進捗:主にプログラミング学習サイト【ドットインストール】利用
2023年08月に、プログラミング学習サイトのドットインストールに登録して、まともに勉強始めたの9月からです。
html、cssと基本を動画でみて、10月末からJavaScriptを始めています。
cssなど、実際に自分で0からコードを書いて作る練習を10月末から始めました。
ドットインストールの実践練習、【256times】も始めています。
公開に使っているサイト
書いたものの公開には、無料でページが作れる、
【GitHub Pages】
というサイトを利用しています。
このサイトの使い方は、ドットインストールのサブスク動画の中にもあります。
使っているコードの見かた
どんなhtmlやcssなどのコードを使っているか見るには、
ブラウザ上で、マウスを右クリックして、出てくるメニュー一覧の中から「検証」を選びます。
すると、開発者ツールが立ち上がって、コードが見られるようになります。
実際自分で0からコード書いて作ったもの
2023年11月
今のところ、スマホ画面にサイズを合わせる、レスポンシブデザインというのを一切やっていないので、スマホで見ると表示が崩れます。
近いうち、勉強見直してレスポンシブデザインもできるようにします。
- 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アニメーションの練習、とにかくぐちゃぐちゃ動かして回数練習
きれいな円形に動かすやり方がまだよくわかってない
順次追加していく予定です。
楽しんで、頑張りましょう!!
まだまだですが、ドットインストールの学習動画の作り方がうまいのか、ガッツリプログラミングの勉強にハマれています。
せっかく買った、アーマードコア6をやるヒマがないくらい、、、
収入につながるにはまだかかるでしょうが、楽しんで、コツコツ一歩ずつ頑張りましょう!!
読んでいただいて、ありがとうございます。
m(_ _)m