ファドこんにちは！
PHPのLaravelやJavaScriptでWeb開発をしているフリラーンスエンジニアのファドと申します！
今回はHTMLの課題に挑戦していただきます！
まだHTMLの教材を読んでいない方は下記リンクより、学習してください！
課題の解答について
全ての課題の解答例はnoteにて販売しております。
解答が欲しい方のみ下記リンクよりご購入ください！
また、MENTAのサポートでは1日あたり約300円でプログラミング学習のサポートを行っております。
そちらでご契約いただくことで全ての課題をレビューしております。
プログラミング学習サポートと解答例が欲しい方は、下記URLよりMENTAにてご契約ください。
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」という言語を学んでいきましょう！
プログラミング学習サポートについて
「独学で挫折した。。。」
「一人でのプログラミング学習がしんどい。。。」
「未経験からエンジニア転職をしたいけど何をしたら良いかわからない。。。」
このような悩みをお持ちの方向けに、本教材作成者のファドがMENTAという学習サイトにてあなたのプログラミング学習とエンジニア転職を徹底サポートいたします！
サポート価格はなんと1日あたりたったの約300円！
教材で分からない箇所のサポートはもちろんのこと、本サイトで公開しているすべての課題の解答も公開しております。
また、MENTAで学習を終わらせていただいた方限定で懇意にしていただいている企業さんを紹介することもあります！
なお、サポート内容の詳細は下記の通りです。
- 目標設定
- マインドセット
- オリジナル教材見放題
- オリジナル課題見放題
- オリジナル課題の解答見放題
- 課題コードレビュー
- 教材への無制限質問
- 課題への無制限質問
- ポートフォリオ作成アドバイス
- 褒めのコーチング
いくつかのプランを用意させていただいておりますので、下記より一度ご覧ください！
コメント