Arrow

自分のウェブサイトをコード化

webページをデザインしたり、サイトをオンラインにする方法を学びたいと思ったことはありますか？ 今日、私たちはあなた自身の個人的なウェブサイトを構築する方法をお見せするつもりです！ チュートリアルビデオをチェックして、Juni Instructor Mayaが道のすべてのステップを歩いていくのを見てくださ

web開発を学ぶことの重要性、ビデオに付随するステップバイステップガイド、web開発体験をさらに強化するために使用できるツールについての詳細

:

• このチュートリアルのウェブサイトは、教育目的のための単なるプロジェクトの例です。 開始する前に、未成年者はあなたのフルネーム、住所、または電話番号のような個人情報をオンラインで投稿するべきではないことに注意してくださ 個人の写真をオンラインでアップロードするときにも注意してください。
• 何をアップロードしても大丈夫かわからない場合は、必ず大人に確認してください。

これは誰のためですか？

このプロジェクトは、子供のためのJavaScriptレベル1コーディングクラスに該当します。 この初心者のHTML/CSSチュートリアルは、約121行の長さの中程度の挑戦プロジェクトを望む学生のためのものです。 HTMLとCSSがどのように機能するかを事前に理解するのに役立ちますが、まったく新しい場合は、このビデオでさらに基本を説明します！

このチュートリアルは、コーディングの初心者、特にデザインやアートに興味のある人に最適です。 私たちは、学生が一緒に従うために12歳以上であることをお勧めします。

学習成果のために、div、リスト、リンク、位置、表示、テキスト（h1/h2/p）、フォント、および一般的なCSSで多くの練習を得るでしょう。 このプロジェクトは、あなたが得るどのように創造的に応じて、あなたに約40分以上かかると推定されていますが、あなたは自分のペースで速くまたは遅

なぜWeb開発を学ぶのですか？

最近では、ウェブサイトを作成するためにweb開発やコーディングを知る必要はありません。 この記事の終わりに向かって、私たちはあなたのプロセスを行うことは非常に簡単になりますいくつかのドラッグアンドドロップのウェブサイ では、なぜweb開発を学ぶ必要がありますか？ それは素晴らしい質問です。

無制限のカスタマイズ

すべての簡単なウェブサイト作成ツールは、実際には限られています。 彼らはあなたがそれらを変更する必要がない限り、初心者が使用するのは非常に簡単ですテーマやプラグインのセットを提供しています。

ただし、テーマを変更したり、ウェブサイトでよりカスタムなことをしたりする必要がある場合は、少なくともweb開発コードの基本的な理解が必要です。 例として、Javascriptの知識のビットを使用すると、あなたのウェブサイトにほぼすべてのソーシャルメディアフィードを統合することができます！

コーディングのキャリア&基礎

コーディングのキャリアを考慮したら、網の設計および網の開発の知識はまた巨大なヘッドスタートを与える。 Web開発は、アートやデザインに興味のある子供や新しいコーダーが、コーディングの基礎を学びながら情熱を探求するのに役立ちます。 キャリアはさておき、子供のためのコーディングを学ぶことに無数のライフスキルの利点もあります。

多くの分野に適用可能

最後に、あなた自身のウェブサイトを構築することができることは、今日のデジタル時代の貴重なスキルです。 ブロガーは、開発者がカスタムブログを作成したいと考えています。 インターネット企業は、Amazonに商品を投稿するのではなく、eコマースサイトを構築する開発者を探しています。

それはウェブサイトのデザインと開発のための黄金時代であり、あなた自身のサイトを構築する方法を学ぶのに最適な時間です！

始めましょう！

基本的なHTMLとCSSを使用して、簡単な個人的なウェブサイトを作成する方法を学びます。

プロジェクトデモ

コードの記述を始める前に、完成したプロジェクトがどのように機能するかを参照してください。 私たちのプロジェクトのウェブサイトの機能のすべてをチェックアウトするには、ビデオを見てください。

動けなくなった場合は、プロジェクトソリューションコードを表示することもできます。

始める前に心に留めておくべきこと:

• 画像ヘッダーにテキストがあります。 テキストはサイズが異なり、2つの異なるフォントを使用します。 それはまた、白い輪郭を持っています。
• その下の白い部分には二つの部分が並んでいます。
• ハイパーリンクのリストがあり、それは別のページにリンクしています。 あなたがそれらの上にマウスを置くと、彼らは青に変わります。
• テキスト付きの私についてのセクションもあります。
• その下に、異なる色の背景を持つ体験セクションがあります。

プロジェクトをコーディングする手順

私たちのウェブサイトを構築するために、この手順に従います。 チュートリアルを見て、インストラクター Mayaが各パートをどのようにコード化するかを確認し、以下の説明に従ってください。

1. 画像ヘッダー&にテキストを追加します。
2. 共有したいリンクのリストを作成します。
3. 私についてセクションを作成します。
4. 経験セクションを作成します。

ステップバイステップのチュートリアル

ステップ1：画像ヘッダー&にテキストを追加します。

• 画像とテキストを含む相対的な位置を持つdivを作成します。
• テキストを含むdivを作成し、絶対配置を使用して画像上に配置します。
• テキストを追加するには<h1>と<h3>を使用します。
• テキストフォントを変更するにはCSSを使用します。
• CSSを使用して、画像の周りの余分な余白&パディングを削除します。ステップ2：共有したいリンクのリストを作成します。
  • リンクと私についてセクションを含む相対的な位置を持つdivを作成します。
  • divにパディングを追加します。
  • リンクリストを含むインラインブロック表示でdivを作成します。
  • リストを作成するには<ul>を使用します。
  • リンクを作成するには<li>と<a>を使用します。
  • <i>とfont-awesomeリンクを使用してアイコンを追加します。
  • CSSを変更して元のもののようにします。

  ステップ3:About Meセクションを作成します。

  • About Meセクションを含むinline-block displayを持つdivを作成します。
  • テキストを追加するには<h3>と<p>を使用します。

  ステップ4:経験セクションを作成します。

  • 経験セクションを含む相対的な位置を持つdivを作成します。
  • 最初の経験のためのdivを作成し、<h4>と<p>を使用してテキストを追加します。
  • より多くの経験divを追加！

  次のステップ

  素晴らしい仕事！ 今、あなたのウェブサイトにより多くのセクションを加えて自由に感じなさい。 いくつかのアイデアは、あなたが取り組んできたプロジェクトやあなたがしているクラブのためのセ また、GithubおよびGithub pagesを使用して、新しいwebサイトをwebにアップロードすることもできます。

  Webページ作成ツール

  

  先に述べたように、そこにはいくつかのwebサイト作成者がいます。 最高のウェブサイトビルダーのほとんどは、テンプレート、ドラッグアンドドロップインターフェイス、および無料の個人的なウェブサイトを作成する必

  あなたがウェブ開発の基本的な理解を持っているからといって、これらのツールを忘れるべきではありません。 それらはあなたの新しいウェブサイトを催すのを助け、注文の範囲(あなたのウェブサイトの名前そして住所)を見つけ、あなたの網の設計プロセ

  基本を大事にすることによって、これらの用具は完全さにあなたのウェブサイトをカスタマイズすることにあなたの新発見のコーディングの技 あるいは、すべてをゼロから構築したい場合でも、これらのツールは、何を構築するのか、どのように構築するのかについての素晴らしいアイデアを与

  ここでは、webページ作成のための最も人気のあるツールのいくつかです:

  • ウィックス

  Wixは、そこにウェブサイトビルダーを使用するのが最も簡単なの一つです。 彼らの無料プランは、あなたのURLがWixのサブドメインである限り、子供のウェブサイトビルダーのための素晴らしいオプションにするのに十分な完sitename.wixsite.comあなたが無料利用枠を超えて成長する場合、彼らは合理的な価格設定で計画を支払っています。

  • ワードプレス

  人々は無料のウェブサイトビルダーとしてそれを知っていますが、WordPressは本当にコンテンツ管理システム（CMS）です。 単純な意味では、違いは、ウェブサイトビルダーが使いやすいということですが、CMSはカスタマイズのためのより多くの機会を提供しています。 WordPress自体は無料ですが、独自のドメイン名が必要な場合は、いくつかのテーマやプラグイン、またはホスティングのために支払う必要があります。

  • Weebly（ウィーブリー）

  WeeblyはWixのようなウェブサイトビルダーです。 主な違いは、Weeblyははるかに少ないカスタマイズ性を提供しています,それは子供のためのコーディングのための素晴らしいですユーザーフレンドリーなオプ学び続ける: KidsCongratulationsのためのWeb開発クラスは、あなたは今、あなた自身のウェブサイトを持っています！ これはあなたが信じられないほど誇りに思うべきである刺激的なステップです。 学習は、どちらか、そこに停止する必要はありません。

  Keep Learning:Web Development Courses For Kids

  Juni Learningは、新しいサイトを過給するために必要なスキルを与える子供のためのWebプログラミングコースを提供しています。 Web開発以外では、Scratch、Python、Java、C++などのさまざまな言語で、8-18歳の子供のためのコーディングコースも教えています。

  子供のための私たちのオンラインコースをチェックアウトするか、あなたの学生のために最適であるコースを学ぶために私たちのJuniアドバイザ