プロジェクトの作成は、コーディングの学習において非常に重要です。プロジェクトを作成すると、ポートフォリオを拡張し、自分のスキルを新しい状況に適用する方法を学ぶことができます。

私たちは、freeCodeCamp.org Spanish YouTube channelに2時間のコースを発売しました。これは、HTML、CSS、およびJavaScriptを使用して3つのプロジェクトをステップありに作成する方法を指導します。 responsive navigation bar with dropdown menus、slider、およびcustom modalのlanding pageを作成することで、スキルを实践します。

スペイン語を話す友達がいる場合は、この記事のスペイン語版を彼らに共有することができます。

このコースを教えているのは、Jordan Alexander Cruz Garciaです。彼は、自分の知識を共有して、他の人にCSSの素晴らしい世界について教えるのが好きなウェブ開発者です。

💡 Tip:请注意、このコースはHTMLとCSSに焦点を当てていますが、interactivityを実装するためにはJavaScriptの基本知識が必要です。

HTML、CSS、およびJavaScript

HTMLはHyperText Markup Languageの略であり、CSSはCascading Style Sheetsの略です。HTMLはウェブサイトの構造と内容を提供しており、CSSは内容が表示される方法を決定します。これはウェブサイトの visibility を制御します、fonts、colors、layouts、spacing、animation など。

CSSを使用することで、異なる画面サイズに合わせてスタイルとレイアウトを簡単に作成できます。これにより、デスクトップ、タブレット、モバイルデバイスにても您的ウェブサイトが美しく表示されます。

💡 ヒント:異なる画面サイズに合わせて表示されるウェブサイトは「レスポンシブウェブサイト」と呼ばれます。

通常、CSSを外部ファイルに書きます。このスタイルシートをHTMLファイルにリンクし、CSSの選択子とプロパティに基づいて全てのHTML要素にスタイルを適用します。

ウェブサイトのコンテンツと表示を分離することは非常に有益です。これにより、より维护性の高いプロジェクト構造になり、より効率的なレンダリングプロセスになります。なぜなら、ブラウザが構造をより速くレンダリングし、背景でCSSスタイルをダウンロードするからです。

基本的に、CSSは今日見られる美しい、視覚的でユーザーフレンドリーなウェブサイトを作成するための欠かせないツールです。

JavaScriptを使用することで、ウェブサイトに対話性を追加します。プレーンな要素を対話的な要素に変換し、ユーザーの経験を深めるように作成します。

スペイン語でのHTML、CSS、およびJavaScriptのプロジェクト

素晴らしいですね。HTML、CSS、およびJavaScriptについてもっと理解したとおりです。では、このコースで作成するプロジェクトについて見てみましょう。

プロジェクト1: ナビゲーションバー

始めに、ドロップダウンメニューを持つナビゲーションバーを作成します。このナビゲーションバーはレスポンシブであるため、画面サイズに合わせて伸びるか缩めることができます。画面がすでに小さすぎる場合、自動的にサイドバーとなります。

💡ヒント： 主なオプションは常に表示されます。ユーザーが「About」または「Projects」をクリックすると、追加のオプションを含むドロップダウンメニューが表示されます。

デスクトップ版

ここではデスクトップ版を見ることができます。

モバイル版

これは小さなデバイスで見られるモバイル版です。

💡 ヒント： このナビゲーションバーを隠して切り替える技術は、コンテンツのためのスペースを可能な限り最適化するために非常に频繁に使用されます。

プロジェクト2：スライダー

次に、ユーザーが左右の矢印をクリックすると変化する3つの位置を持つスライダーを作成します。それぞれの位置にはタイトル、短いパラグラフ、円形の画像があります。

💡ヒント： スライダーは、ユーザーフィードバック、引用、レビューを共有するのに役立ちます。

プロジェクト3：ランディングページ

最後に、CSS Gridを使用して一歩一歩ランディングページを作成します。

ユーザーが「参加しよう！」ボタンをクリックすると、カスタムモーダルが表示されます。このモーダルは、HTML、CSS、JavaScriptを一歩一歩実装します。

HTML、CSS、JavaScriptのスキルを練習し始める準備ができている場合は、freeCodeCamp.org Spanish YouTubeチャンネルのコースをチェックしてください：

✍️ コースはJordan Alexander Cruz Garcia (AlexCG)によって作成されました。