サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
GPT-4o
mosya.dev
この記事では私がmosya Reactというオンライン上でReactを学習できるサービスをリリースした背景を語らせていただこうと思います。 まずはmosya Reactがどんなものなのかイメージが湧きやすいように動画を用意したのでぜひ見てください👇 動画をみていただくとわかるように環境構築不要でその場でReactのコードを書いてプレビュー結果を確認できます! 問題を解いた後は「提出」ボタンを押すことで実際に書いたコードがあってるかの確認プログラムが動いて採点してくれます! なぜ mosya Reactを作ったか mosya Reactを作った背景には 完全未経験の方に仕事を手伝ってもらうためにReactを教える機会があったこと が関係しています。 その方は保育園の業務でパソコンを使う程度でプログラミング言語には触れたことはありませんでした。 そこでmosyaという別サービスでまずはHTM
環境構築不要で Reactのコードを書いて学べる プログラミング学習サービスJavaScriptの基礎を学習済みで次にReactを学んでみたい方や、既にReactを使っている方で周辺知識を含めたより深い知識を身につけたい方におすすめです! その場でコードの結果がプレビューで確認できるのでサクサク学習が進みます! 初心者から現役エンジニアまで 力がつく充実のカリキュラム基礎から実践まで、モダン技術や周辺ライブラリを網羅した教材で幅広い知識を身につけよう。
v0とは v0は自然言語で作りたいUIをAIに指示するとそのUIをTailwind (shadcn/ui)ベースで作ってくれるサービスです。 shadcn/uiとは shadcn/uiはRadix UIというUIをもたないヘッドレスUIに対してスタイルを当てたコンポーネント集で、TailwindというCSSライブラリを使ってRadix UIに対してスタイルを当てています。 shadcn/ui本体のライブラリがあるわけではなく、自身のプロジェクトにコンポーネントを直接コピーして使うことが特徴です! Tailwindが好きな人にはたまらないコンポーネント集ですね! shadcn/uiに最適に作られていますが、Tailwindユーザーであれば作られたUIをほぼそのまま使うことができます。 下の画像のようなチャット風のUIが特徴なサービスになっていて、このチャットに指示を出すことでUIを作ってくれ
この機能は2023年8月現在、ChromeやEdgeなどのChromiumベースのブラウザーではサポートされていますが、他のブラウザーではサポートされていません。 使用する場合はブラウザーのサポート状況を確認してから使用することをお勧めします。 皆さんはスクロール連動型アニメーションをご存知でしょうか? スクロール連動型アニメーションとは、スクロール量に応じてアニメーションを発生させることができるCSSの機能です。 この機能を活用することでJavaScript不要でユーザーのマウススクロールに応じたアニメーションを実装することができます。 従来のanimationのCSSに加えて、animation-timelineというプロパティを指定することでアニメーションの進行度をスクロール量に応じて変化させることができます。 スクロール連動型アニメーションの使用例 使用例1.(パララックス) パラ
displayの2値構文とは displayの2値構文とは、displayプロパティに指定する値が2つあることを指します。 今まで通りの1値構文も使えますが、今後、2値構文の書き方がされるサイトも増えてくると思うのでここでしっかりと理解しておきましょう。 例えば、display: inline flexのように、displayプロパティにinlineとflexの2つの値を指定している場合、2値構文と呼ばれます。 これは、diaplay: inline-flexと同じ意味になります。 早速サンプルのコードを見てみましょう。
Type Challengesに挑戦しよう!TypeScript好きの方、型パズルに挑戦して型力をつけませんか? mosya<TC>はGitHubで公開されているTypeScriptの問題集Type Challengesに挑戦して解答を判定できるサービスです。 ログインして挑戦(無料)
以前こちらの記事でエンジニアのためのFigmaの使い方を紹介しました。 こちらの記事の後にFigmaのプラグインがリリースされ、VSCodeとの連携が可能になりとてもエンジニアにとって使いやすくなったので今回はその使い方を紹介します。 Figma for VS Codeで何ができるのか Figma for VS CodeはFigmaのプラグインで、VSCode上でFigmaのデザインをみたり、CSSのコードを取得したりすることができます。 FigmaのデザインをVSCode上で確認 以下はFigmaのデザインをVSCode上で見た例です。 ご覧いただいてわかる通り、要素間のの距離やサイズなどコーディングに必要な情報を一通り把握することができます。 コードの補完 Figmaのデザインをコーディングする際に、Figmaのデザインを元にCSSのサジェストをしてくれます。タブを打つだけでサジェスト
mosyaはオンラインでHTML,CSS,JavaScriptを基本から学習できるサービスです。現役エンジニアが作成した豊富なカリキュラムに沿って学習を進めましょう。
プログラミングを もっと身近に。他にはないほど教材が丁寧で、初心者も安心。 mosyaでプログラミングの楽しさと可能性を発見しましょう! 今すぐ始める(無料) Web業界への就職・転職を目指す方既にプロとして活躍していて、さらに知識を身につけたい方デザイナーとしてのスキルに加えてコーディングを学びたい方自身のブログを個性的にカスタマイズしたいブロガーの方他の学習サイトで勉強したけど、物足りないと感じている方
このページを最初にブックマークしてみませんか?
『mosya - HTML,CSS,JavaScriptを基本からしっかり学ぶオンライン学習サービス』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く