未経験からエンジニア転職をするための最強ロードマップロードマップ

【HTML課題】HTMLを学んだあとの腕試し問題を公開!【超有料級】

ファド

こんにちは!
PHPのLaravelやJavaScriptでWeb開発をしているフリラーンスエンジニアのファドと申します!

今回はHTMLの課題に挑戦していただきます!

まだHTMLの教材を読んでいない方は下記リンクより、学習してください!

あわせて読みたい
【完全無料】知識ゼロから体系的に学ぶプログラミング学習教材 イントロダクション FADOTECHでは、これからプログラミングを学ぼうと思っている方向けに、知識ゼロから完全無料でプログラミングが学べるように、すべての教材と課題を...
目次

課題の解答について

全ての課題の解答例はnoteにて販売しております。
解答が欲しい方のみ下記リンクよりご購入ください!

note(ノート)
HTML課題の全解答|ファド|無料プログラミング学習ブログ運営 こんにちは! 福岡でフリーランスエンジニアをしている「ファド」と申します! こちらの記事は、私の技術ブログ兼無料プログラミング学習教材サイトの「FADOTECH」で無料で...

また、MENTAのサポートでは1日あたり約300円でプログラミング学習のサポートを行っております。
そちらでご契約いただくことで全ての課題をレビューしております。

プログラミング学習サポートと解答例が欲しい方は、下記URLよりMENTAにてご契約ください。

あわせて読みたい
【プログラミング学習】1日あたりたったの「300円」のみでプログラミングを学び、最短で転職or稼ぐ!|【ME... プログラミングを学びたいすべての方へこれからの時代は格安でプログラミングを学び、最短で稼げ自己紹介はじめまして!この度はプランをご覧いただき、誠にありがとうござ...

HTML課題用フォルダ作成

HTML課題を始める前に、課題用のフォルダを作成します。
VSCodeでProgrammingフォルダを開きましょう。
そして、tasksフォルダをクリックして、フォルダ作成マークをクリックし、新しいフォルダを作成して、HTMLと名前を付けましょう。

これでHTML課題用のフォルダが完成しました。

課題を進める上での注意点

  • インデントを意識してください。
  • インデントなどでは、半角スペースを使用してください。
  • 調べたことをコピペするだけではなく、しっかりとコードの意味を理解してから使用しましょう。
  • 課題ごとに記載されている検索ワードは、詰まるまでなるべく見ないようにしましょう。

h1タグの使い方

フォルダ名:「〇〇〇〇_html_h1_tag」
〇〇〇〇にはご自身のフルネームを入力してください。

h1タグを使って見出しを表示してください。

⬇出力例⬇

★検索ワード
h1タグ 使い方

pタグの使い方

フォルダ名:「〇〇〇〇_html_p_tag」
〇〇〇〇にはご自身のフルネームを入力してください。

pタグを使って文字を表示してください。

⬇出力例⬇

★検索ワード
pタグ 使い方

brタグの使い方

フォルダ名:「〇〇〇〇_html_br_tag」
〇〇〇〇にはご自身のフルネームを入力してください。

brタグを使って文字を改行してください。

⬇出力例⬇

★検索ワード
brタグ 使い方

imgタグの使い方

フォルダ名:「〇〇〇〇_html_img_tag」
〇〇〇〇にはご自身のフルネームを入力してください。

imgタグを使って画像を表示してください。

○注意点
画像はご自身で用意して下さい

⬇出力例⬇

★検索ワード
imgタグ 使い方

ul,liタグの使い方

フォルダ名:「〇〇〇〇_html_list」
〇〇〇〇にはご自身のフルネームを入力してください。

ul,liタグを使ってリストを表示してください。

⬇出力例⬇

★検索ワード
ul,li 使い方

aタグの使い方

フォルダ名:「〇〇〇〇_html_a_tag」
aタグを使って任意のサイトへのリンクを作成してください。

⬇出力例⬇

★検索ワード
aタグ 使い方

テーブル1

フォルダ名:「〇〇〇〇_html_table1」
〇〇〇〇にはご自身のフルネームを入力してください。

table要素を使って以下のようなテーブルを表示してください。

★検索ワード
table要素 使い方

テーブル2

フォルダ名:「〇〇〇〇_html_table2」
〇〇〇〇にはご自身のフルネームを入力してください。

table要素を使って以下のようなテーブルを表示してください。

★検索ワード
table要素 使い方

テーブル3

フォルダ名:「〇〇〇〇_html_table3」
〇〇〇〇にはご自身のフルネームを入力してください。

table要素を使って以下のようなテーブルを表示してください。

★検索ワード
table要素 使い方

テーブル4

フォルダ名:「〇〇〇〇_html_table4」
〇〇〇〇にはご自身のフルネームを入力してください。

table要素を使って以下のようなテーブルを表示してください。

★検索ワード
table要素 使い方

テーブル5

フォルダ名:「〇〇〇〇_html_table5」
〇〇〇〇にはご自身のフルネームを入力してください。

table要素を使って以下のようなテーブルを表示してください。

★検索ワード
table要素 使い方

フォーム要素

フォルダ名:「〇〇〇〇_html_form」
〇〇〇〇にはご自身のフルネームを入力してください。

以下のような入力フォームを作成してください。

○注意点
・form要素を使うこと
・都道府県のプルダウンを押すと47都道府県の選択肢が選べるようにする
・見た目を厳密に合わせる必要はありません

★検索ワード
form要素
inputタグ
ラジオボタン
select 要素

テーブルレイアウト

フォルダ名:「〇〇〇〇_html_layout」
〇〇〇〇にはご自身のフルネームを入力してください。

tableタグを使用して以下のレイアウトを作成してください。

○注意点
・見た目を厳密に合わせる必要はありませんが、テーブルの構造は見本と同じにしてください

おめでとうございます!

よくここまで頑張りました!

これでHTMLの課題はすべて終了です。

次はWebサイトの見た目をカッコよくする「CSS」という言語を学んでいきましょう!

あわせて読みたい
【CSS教材①】CSSとは?CSSファイルの作り方から基本的な書き方までを徹底解説 こちらの記事はCSS教材の第1回目の記事になります。 その他のCSS教材を学習したい方は下記リンクから直接教材へ飛ぶことができます。 CSSとは CSSとは「Cascading Style...

プログラミング学習サポートについて

「独学で挫折した。。。」

「一人でのプログラミング学習がしんどい。。。」

「未経験からエンジニア転職をしたいけど何をしたら良いかわからない。。。」

このような悩みをお持ちの方向けに、本教材作成者のファドがMENTAという学習サイトにてあなたのプログラミング学習とエンジニア転職を徹底サポートいたします!

サポート価格はなんと1日あたりたったの約300円!

教材で分からない箇所のサポートはもちろんのこと、本サイトで公開しているすべての課題の解答も公開しております。
また、MENTAで学習を終わらせていただいた方限定で懇意にしていただいている企業さんを紹介することもあります!

なお、サポート内容の詳細は下記の通りです。

  • 目標設定
  • マインドセット
  • オリジナル教材見放題
  • オリジナル課題見放題
  • オリジナル課題の解答見放題
  • 課題コードレビュー
  • 教材への無制限質問
  • 課題への無制限質問
  • ポートフォリオ作成アドバイス
  • 褒めのコーチング

いくつかのプランを用意させていただいておりますので、下記より一度ご覧ください!

あわせて読みたい
【プログラミング学習】1日あたりたったの「300円」のみでプログラミングを学び、最短で転職or稼ぐ!|【ME... プログラミングを学びたいすべての方へこれからの時代は格安でプログラミングを学び、最短で稼げ自己紹介はじめまして!この度はプランをご覧いただき、誠にありがとうござ...

コメント

    この記事が気に入ったら
    フォローしてね!

    よかったらシェアしてね!
    • URLをコピーしました!

    コメント

    コメントする

    目次