Learning to Code is always exciting and fun for everyone and when it comes to step into programming world of people most starts with the easiest thing HTML and CSS. フロントエンドのすべての初心者のコーディングの旅は、これらの2つの基本的なビルディングブロックから始まり、それが美しいアプリケーションを設計することになると、創造的である必要があります。
当初、初心者はボタンの作成、リンクの追加、画像の追加、レイアウトでの作業、Web デザインの多くのクールなものを楽しみましたが、HTML と CSS だけでプロジェクトを作成するとなると、これらのものをすべて練習するには何を作成すればよいか行き詰まってしまい、混乱してしまうのです。 結局のところ、彼らの知識はHTMLとCSSに限られているのです。 しかし、HTMLとCSSのスキルを身につけるには、プロジェクトを作ることが重要だと気づくはずです。 HTMLとCSSがどのように連携して、美しいフロントエンドアプリケーションを設計するのかを確認する必要があるのです。
A Tribute Page
初心者が作ることのできる最も簡単なウェブサイトは、あなたの人生で尊敬する人のトリビュート・ページです。 これには HTML と CSS の基本的な知識が必要なだけです。 その人の画像を加えて、その人について書いたホームページを作ります。 ウェブページの上部に、その人の画像と名前を追加し、その下に残りの詳細のためのレイアウトを提供します。 段落、リスト、リンク、CSSによる画像などを使って、見栄えをよくする。 あなたのウェブページに適した背景色とフォントのスタイルを追加します。 ほとんどの部分はHTMLで作ることができますが、CSSのビットを使用して、より良い外観を与えるために。
- My Tribute Page
- Tribute Page to Steve Jobs
- Tribute Page to Albert Einstein
Webpage Including Form
フォームは常にどんなプロジェクトにも不可欠な部分であり、あなたはなぜ以前にそれを練習して、あなたの知識をテストしないのでアプリケーションのほとんどで多くのフォームを使って作業することでしょう。 一度、入力フィールドまたはフォームを作成するための HTML の基本タグに慣れると、すべてのこれらのタグを使用してプロジェクトを作成します。 テキストフィールド、チェックボックス、ラジオボタン、日付、その他の重要な要素を1つのフォームでどのように使用するか。 フォームを作成しながら、ウェブページに適切な構造を与える方法を学びます。 HTML/HTML5の知識があれば十分ですが、プロジェクトの見栄えを良くするためにCSSを少し使用することができます。 以下に与えられたリンクから助けを借りてください。
- Survey Form
- Good Vibes Form
Parallax Website
パララックスウェブサイトには背景に固定画像があり、そのままにしておけばページをスクロールして画像の異なる部分を見ることができるようになるのです。 HTML と CSS の基本的な知識があれば、Web サイトに視差効果を与えることができます。 ウェブデザインで視差効果を使用すると、本当に人気があり、それは美しい外観を与え、ウェブページに感じています。 それを試してみて、3〜4つの異なるセクションにページ全体を分割します。 3-4の背景画像を設定し、異なるセクションのテキストを整列し、マージンとパディングを設定し、パララックス効果を作成するためにバックグラウンド-ポジションや他のCSS要素やプロパティを追加します。 あなたはParallax Website.
Landing Page
A landing page is another good project you can make using HTML and CSS but it requires a solid knowledge of these two building blocks.から助けを取ることができます。 ランディングページを作成する際には、多くの創造性を発揮することになるでしょう。 フッターとヘッダーを追加し、列を作成し、アイテムを整列し、セクションと多くのものを分割する方法を練習することになります。 CSSは、異なる要素同士が重ならないように注意しながら使用する必要があります。 また、色の組み合わせ、パディング、マージン、セクション間のスペース、パラグラフ、ボックスにも気を配らなければなりません。 色の組み合わせは、異なるセクションや背景のためにお互いによく合うようにする必要があります。 あなたはunder.9268>
- Full Screen Landing
- Landing Page
Restaurant Website
レストランのための美しいWebページを作成してHTMLとCSSのあなたの固体知識を紹介から助けを取ることができます。 レストランのレイアウトを作成することは、以前のプロジェクトの例よりも少し複雑になります。 あなたは、CSSレイアウトグリッドを使用して、異なるフードアイテムやドリンクを整列させることになります。 価格、画像を追加し、色、フォントスタイル、画像の適切な組み合わせを使用して、同様に美しい外観を与える必要があります。 あなたは、さまざまな食品の写真ギャラリーを追加することができます、あなたはまた、より良い外観のためにスライドさせる画像を追加することができます。 内部ページへのリダイレクト用リンクを追加する。 メディアクエリとグリッドを使って、ビューポートを設定し、レスポンシブに対応させる。 あなたはレストランのWebサイト.
イベントや会議のWebページ
あなたは、イベントや会議を開催する静的なページを作ることができますから、助けを取ることができます。 会議に出席するために興味を持っている人は、彼らのために登録ボタンを作成します。 ヘッダー部分の上部に、スピーカー、会場、スケジュールなどの異なるリンクを記載します。 カンファレンスの目的や、このカンファレンスから利益を得ることができる人々のカテゴリを記述します。 スピーカー、会場の詳細、カンファレンスの主な目的の紹介と画像をウェブページに追加してください。 ページをセクションに分け、ヘッダーとフッターを追加し、メニューを紹介する。 様々なセクションのためにお互いによく行くことができ、適切な背景色を使用しています。 あなたのウェブページのテーマに一致する適切なフォントスタイルとフォントカラーを選択します。 HTML/HTML5とCSSの深い知識が必要です。 あなたはスタイル会議から助けを取ることができます。
Music Store Page
あなたは音楽愛好家であれば、それのためのウェブページを作ることができます。 それにはHTML5/CSS3の知識が必要です。 目的またはページがすべてであるものを記述する適切な背景画像を追加します。 ヘッダーセクションには、さまざまなメニューを追加します。 ボタン、リンク、画像、利用可能な曲のコレクションについてのいくつかの説明を追加します。 下部には、ショッピング、ストア、キャリアや連絡先の詳細のためのリンクを言及する。 また、トライアルオプション、ギフトカード、サブスクリプションなど、他の機能を追加することもできます。 ビューポートを設定したり、メディアクエリやグリッドを使用して、レスポンシブに対応させましょう。 myTunes.
Photography Site
HTML5とCSS3の深い知識があれば、1ページのレスポンシブな写真サイトを作ることができます。 レスポンシブにはフレックスボックスとメディアクエリを使用します。 トップ（ランディングページ）に会社名と画像（写真に関連するもの）を追加します。 その下に複数の画像を追加して作品を紹介する。 下部（フッター）には、カメラマンの連絡先を記載する。 あなたの作品を見るためのボタンを追加します。 このボタンは直接画像セクションに移動します。 余白、パディング、色の組み合わせ、フォントサイズ、フォントスタイル、画像サイズ、ボタンのスタイリングに気を配る必要があります。 Acme Photography.
Personal Portfolio
HTML5とCSS3の知識があれば、ポートフォリオを作成することもできます。 あなたの名前と写真を使って、あなたの作品サンプルとスキルをポートフォリオで紹介します。 また、そこにあなたの履歴書を追加し、あなたの完全なポートフォリオをGitHubアカウントでホストすることができます。 ヘッダーセクションには、about, contact, work, services などのメニューがあります。 一番上にはあなたの画像を一枚追加し、そこで自己紹介をしましょう。 その下に仕事のサンプルを追加し、最後（フッター）には連絡先やソーシャルメディアのアカウントを追加します。 Personal Portfolio.
Technical Documentation
Javascriptの知識が少しあれば、技術文書のウェブページを作成することができます。 これには、HTML、CSS、および基本的なjavascriptの知識が必要です。 Webページ全体を2つのセクションに分割します。 左側は、すべてのトピックが上から下へリストアップされたメニューを作成します。 右側には、トピックに関するドキュメントや説明を記載する必要があります。 左側のセクションでトピックの1つをクリックすると、右側のコンテンツが読み込まれるようにします。 クリックには、javascriptまたはCSSブックマークオプションを使用することができます。 あまり派手にする必要はなく、技術文書にふさわしい、シンプルできちんとした外観にします。 Technical Documentation.
Helpful Linkからヘルプを得ることができます。 2019年の効果的なWebデザインのための10のヒント
