HTML / CSS / JavaScript を理解するための学習サイトを作りました

Form Practice Static

この記事を読んでほしい人

• HTML、CSS、JavaScriptをある程度学んだ人

• Progateなどを終えて次どうしようか悩んでいる人

• Web系の会社に入れたものの、イマイチプログラミングの理解力に自信がない人

• フロントエンドエンジニアになりたい人

• Web制作会社に入りたい人 / 入っている人

先に結論を記載します

結論を先にお伝えしますが、私がプログラミングを理解でき始めたと思えたのはフォームの自主制作です。

どんなフォームなのかと言いますと、百聞は一見にしかずということで、私の作った Form Practice Static サイトを見ていただけたらと思います。

このWebサイトを自主制作できるのであれば、あなたはもう初級エンジニアを卒業したと言っても良いでしょう。ぜひチャレンジしてみてください！

Form Practice Static サイトのリンク先は以下です。
※ すべて入力して送信ボタンを押しても「あなたは適切にフォーム入力ができました。」というアラートが出てくるだけで、特になにも送信しませんので安心してください。

Form Practice Static

学習サイト Form Practice Static の詳細について

Form Practice Static を見に行きましたでしょうか。
シンプルなデザインだと思いますので、実装するのは余裕だと感じた人もいたかと思います。

このサイトのHTML/CSSはそこまで難解なものではないですが、問題はJavaScriptです。

フォームにバリデーションを搭載しているので、バリデーションがかなり難しく感じる方は多いでしょう。
下に詳細を記載しますのでご覧になってください。

使用プログラミング言語

• HTML

• CSS

• JavaScript

デザイン（マークアップ）について

• 特に制限ないので自由に記載いただいてOKです。

• マークアップ構築後にJavaScriptを用いるので、それを考慮した作りにするとJavaScriptを書くときにとても楽です。

バリデーションについて

各フォームにバリデーションを追加しております。※ バリデーションというのは、例えば「カタカナ入力以外で入力したら、エラーを出す」という処理のことです。

• 各タグの入力値が変更するとバリデーションイベントが発火します。

• 「パスワード」と「パスワードの確認」の値が異なっているとエラーメッセージが出ます。

• 送信ボタンを押すとバリデーションイベントが発火します。

• すべての項目に正しく入力がされると「あなたは適切にフォーム入力ができました。」がアラートで出てきます。
  

バリデーションが発火している状態

学習サイト Form Practice Static の解説

こちらに関しては現在執筆中です。もうしばらくお待ちください。

なにかあった際にはTwitterのDMにてご連絡ください

Form Practice Static サイトの感想、質問、レビュー、などなど、なんでも良いのでなにかありましたらTwitterにてご連絡ください。

Tweets by deeeeeweb