【Udemy講座】フロントエンドエンジニアになりたい人の Webプログラミング入門

Webプログラミング入門

前回、Pythonでブラウザ制御の記事を書きました。

Pythonでブラウザ制御PythonでWeb申込を自動入力する方法

この時に作成したWebページを今回も使用していきます。

pythonでブラウザの自動制御

 

 

このUdemyの講座ではHTML/CSSからJavaScriptまで学習できます。
授業で学べるコンテンツは以下の事項です。

  • 入会フォームをHTML/CSSで作成しよう
  • レスポンシブWebデザインで、スマホ対応のサイトを作ろう
  • Bootstrapで素早くWebページを作ろう
  • JavaScriptde今日の日付を表示しよう
  • イベントドリブンな、ストップウォッチプログラムを作成しよう
  • Ajax通信でフォトライブラリーを作成しよう
  • JavaScriptライブラリーを利用しよう

10時間分の授業なので結構ボリュームがあります。
1講座でWeb系のプログラミングを体系的に学習することができます。

講師の先生の教え方はどう?

とても分かりやすく、喋り方も落ち着いた優しい声なので聞きやすいです。
講座ではVisual-Studio-Codeを使用してコードを書いていきます。
Visual-Studioのインストール方法も解説してくれるため丁寧です。

Visual-Studio-Code

visual studio code

サンプル動画もありますので、ぜひ一度ご覧になってみてください。

この講座を受けるとオシャレなWeb申込フォームが簡単に作れるようになる!

HTMLとCSSのコードを書いていきます。
さきに完成したWeb申込みフォームの画像を載せておきます。

完成したWeb申込みフォーム!

医学生Mediの申込みフォーム



index.html
<!--index.html-->
<!DOCTYPE html>
<html>
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>Mediの申込フォーマット</title>
        <link rel="stylesheet" href="style.css">
    </head>
<body>
<div class="content">
<h1>医学生Mediの申込フォーマット</h1>
<p>入会するには、次のフォームに必要事項をご記入ください</p>
<div class="control">
<label for="mymail">メールアドレス<span class="required">必須</span></label>
<input type="email" name="mymail">
</div>
<div class="control">
<label for="passcode">パスワード<span class="required">必須</span></label>
<input type="password" name="passcode">
</div>
<div class="control">
<label for="number">TEL<span class="required">必須</span></label>
<input type="number" name="number">
</div>
<div>
<button type="submit">登録する</button>
</div>
</div>
</body>
</html>
style.css
/*style.css*/
h1{
font-size: 32px;
text-align: center;
}
.content{
background-color: rgb(204, 224, 255);
width: 600px;
margin:100px auto;
padding: 30px;
border: 5px solid #0930af;
border-top: 30px solid #0930af;
font-size: 20px;
}
input{
border: 0px;
border-bottom: 1px solid;
width: 100%;
font-size: 1.5em;
padding: 8px;
}
button{
width:100%;
background-color: #446ae6;
color: #fff;
border: 0;
padding: 15px;
border-radius: 50px;
box-shadow: 0 5px 10px rgba(0,0,0,.5);
font-size: 25px;
}
.control{
margin-bottom: 3em;
}
label{
display: block;
margin-bottom:  .5em;
}
.required{
color: #f33;
font-size: .8em;
background-color: #ffeeee;
padding: 1px;
font-weight: bold;
margin-left: .6em;
}
body{
background-color: rgb(247, 247, 247);
}
最初に作ったWebページに比べて、かなり完成度の高いフォームが作成できました。
これぐらいのレベルがサクッと作れるようになるとかなり実用的ではないでしょうか。
今回は、Web申込みフォーム作成だけを取り上げましたが、Udemy講座では他のことも学習できます。

これからUdemyで学習を始めようと思っている方はぜひ参考にしてみてください。
終わり。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください