11 の実践的な CSS 学習ツール_html/css_WEB-ITnose

1. ボックスモデルのスライドショー

3D 変換効果によって生成されたインタラクティブなスライドショー。より良い結果を得るには、左または右の矢印キーを押して全画面表示に切り替えます。

2. CSS Diner

簡単なゲームを通して CSS セレクターを学び、正しいセレクターを入力して各レベルを完了します。メニューからレベルを選択することもできます。

3. CSS セレクターの操作

これは、シンプルな視覚的な CSS セレクターです。左側のメニューでセレクターを選択すると、選択した項目が右側に表示されます。

4. フロントエンド Web 開発試験

CSS 属性では大文字と小文字が区別されますか?

5. CSS の魔法

CSS チュートリアルは 6 章あり、より詳細なチュートリアルは徐々にリリースされます。

6. CSS を楽しむ

CSS を学ぶための聖地、CSS に焦点を当てています。

6

7. CSS ガイドライン

Harry Roberts がオープンソースを更新しました。以前は GitHub 上の単なるライブラリでしたが、現在は独自のドメイン名があり、多くのリソースが最適化および更新されています。

8. CSS トリガー…

Chrome 開発者 Paul Lewis は、特定の CSS プロパティが変更されたときに有効になるページ解析リファレンスを作成しました。たとえば、一部のプロパティは再描画と合成をトリガーしますが、レイアウトはトリガーしません。 CSS トリガーを使用すると、これらの変更を簡単に検出できます。

9. mdo によって提供されたコード ガイド

Bootstrap の Mark Otto が独自のスタイルの HTML および CSS ガイドラインをまとめました。これらの提案には、属性の順序、連続する HTML 属性セレクターなどが含まれます。

10. Flexplorer

これは、さまざまなフレックスボックス機能を試し、ページに表示される完全なコードをライブで確認するためのシンプルなアプリケーションです。ページ上のテキスト ボックスを編集できる優れた機能があり、その変更が他のコンテンツにどのような影響を与えるかを確認できます。

11. CSS セレクター: プロのように HTML をターゲットにする

SitePoint の姉妹サイトである Russ Weakley の新しいコースには、CSS セレクター要素を紹介する 20 以上のビデオがあります。これは単なるミニマリストのプラグインではなく、真の CSS プロのように機能します。したがって、CSS を始めたばかりでセレクターをまだマスターしていない場合は、これが良い選択になる可能性があります。

まとめ

CSS のレベルに関係なく、進行中の関連プロジェクトやその他の優れたリソースがある場合は、それらを全員と共有することができます。

オタクタグ - プロフェッショナルで正確な共有、興味のあるオタクをフォローします、コミュニティは優れた品質のチュートリアル、インタラクティブな教育を提供します

フロントエンドテクノロジーについて学ぶには、ギークインタラクティブコースライブラリとコードレコーディングにアクセスしてください

読む原文: 11 の実践的な CSS 学習ツール