第 1 週 #DaysOfCode: フレックスボックス、タイポグラフィ、アクセシビリティなど!

8 日目: 今日は #freeCodeCamp の「フォト ギャラリーを構築して CSS Flexbox を学ぶ」モジュールを完了しました。 ? Flexbox はレスポンシブ レイアウトにとって非常に重要なツールであり、画像を配置し、柔軟なグリッドを作成し、美しくレスポンシブなフォト ギャラリーを構築する方法を学びました。レイアウトを柔軟で適応性のあるものにするという点で、Flexbox がどれほど強力であるかを知るのは非常に興味深いことです。これでさらに自信が持てるようになりました！ ?

9日目: 今日はウェブデザインにおけるタイポグラフィーについてでした。読みやすさを向上させ、デザインをより洗練されたプロフェッショナルな外観にするために、フォント ファミリー、フォントの太さ、文字間隔を詳しく調べました。タイポグラフィには非常に多くの微妙な詳細があり、フォント サイズや間隔などがユーザー エクスペリエンスを劇的に向上させる仕組みを理解し始めています。 ?

10 日目: #freeCodeCamp でアクセシビリティを学ぶためのクイズ プロジェクトを完了しました。このプロジェクトでは、Web アクセシビリティについて、また、障害の有無に関係なく、すべての人が Web サイトを利用できるようにする方法について考えるようになりました。すべての要素が正しくスタイル設定されていることを確認するのは大変でしたが、より包括的な Web デザインを作成していると知ると満足です。また、核となる概念を習得するには、HTML と CSS をさらに深く学ぶ必要があることにも気づきました。 ?

11 日目: #W3Schools を通じて HTML と CSS を深く掘り下げることに何時間も費やしました。 CSS がどれほど広大であるか、私はまったく知りませんでした。想像していたよりもはるかに広範です。基本的なスタイルから複雑なアニメーションまで、学ぶべきことはたくさんあります。まだ読んでいる途中ですが、これまで学んだことを応用することに興奮しています。 ?

12 日目: HTML と CSS を使用して、ノーマン ボーローグ博士に捧げられたトリビュート ページ プロジェクトを完了しました。 ?これも #freeCodeCamp からの挑戦でした。レイアウト、画像キャプション、レスポンシブデザインについて多くのことを学びました。大変ではありましたが、やりがいがあり、結果には満足しています。最近、#W3Schools を通じて CSS をさらに深く掘り下げているので、以前は難しかった概念がより明確になるのに役立っています。 CSS は膨大ですが、これまでの道のりを楽しんでいます。 ?

13 日目: 「貸借対照表を作成することで擬似的に学ぶ」プロジェクトに取り組みました。このプロジェクトでは、CSS の疑似要素と疑似クラスについて学びました。これは非常に新しい概念でしたが、余分な HTML を追加せずに要素の特定の部分をスタイルする方法を学ぶことは衝撃的でした。このプロジェクトにより、CSS セレクターとその強力な機能についてより深く理解できました。

14 日目: 「猫のペイントを構築することで中級 CSS を学ぶ」プロジェクトを終了しました。とてもクリエイティブな挑戦でした！ CSS を使用してアートワークを構築するのはユニークな経験でした。形と色を正しく設定するのに時間がかかりましたが、このプロセスにより、CSS がレイアウトやスタイル以外にもできること、つまりアートのためのツールでもあることを新たに理解することができました。

課題:
Flexbox を使いこなすには時間がかかりましたが、今ではレスポンシブ デザインに Flexbox を使用することに自信を持っています。
タイポグラフィは一見シンプルですが、テキストを読みやすく、視覚的に魅力的にするには多くの微調整が必​​要です。
アクセシビリティが最大の課題でした。優れたデザインとアクセシビリティ基準のバランスを取るのは困難でしたが、着実に進歩しています。
疑似要素は最初は扱いにくかったですが、追加のマークアップを追加せずにスタイルを改善できる方法を理解し始めています。
これまでの進捗状況:
レスポンシブ レイアウトには Flexbox を使用する方が快適です。
タイポグラフィがより直感的に感じられるようになり、より良い実践方法を実践しています。
アクセシブルな Web デザインに対する認識が深まり、自分のプロジェクトでもそれにもっと注目するようになりました。
CSS 疑似要素と CSS アートについての理解が深まったので、これらのスキルを将来のプロジェクトに応用したいと思っています。
#100DaysOfCode の旅を前進し続けるため、今後の最新情報にご期待ください。 ??

これまでに私が取り組んできた HTML と CSS コードの概要をここに示します。私のすべての進捗状況を文書化している GitHub リポジトリをチェックしてください: https://github.com/heritech9/100-days-of-code.git

以上が第 1 週 #DaysOfCode: フレックスボックス、タイポグラフィ、アクセシビリティなど!の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。