【ドットインストール】第2回!「256times」に参加した感想!【学習メモ】

Technology
スポンサーリンク

みなさんこんにちは!おさかなです!

今回は「第2回256times」について、書いていこうと思います!

「256times」って何?という方はコチラをチェック!

今回もドットインストールが用意している、「プレイグラウンド」という環境でコーディングしていきました…!

それでは、レッツゴー!!!!!

想定読者
・ドットインストールで学習中の方
・256timesって何?という方
・ソースコードを添削してほしい方

第2回の課題は?

課題の詳細についてはコチラ!

今回も前回と同じような流れで進められました!

・21:00 課題発表
・21:30 課題提出締め切り、休憩
・21:35 コードレビュー開始、時間が余ったらプログラミング学習相談
・22:00 番組終了

実際に参加した感想

今回もすごく楽しかった…!✨

自分のソースコードを公開することに慣れてきましたが、まだまだ課題がたくさんあるので、しっかりと復習していきます…!

ボタン1つ作るのにも本当に奥が深いなと感じました…!

おさかなのソースコード

HTML 

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>My Playground</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
<button type="submit"><span>+</span>BUTTON</button>
  <script src="js/main.js"></script>
</body>
</html>

CSS

button {
  width: 100px;
  height: 50px;
  color: white;
  background: #247CC0;
  font-size: 15px;
  border-radius: 5px;
  border-style: none;
  box-shadow: 2px 2px 3px 1px #DCDCDC;
  outline: 0;
  font-weight: bold;
}
button:hover {
  cursor: pointer;
  background: rgba(36,124,192, 0.5);
  transition: 0.3s;
}

 

おさかなのソースコード2 (:active疑似クラス)挑戦.ver

(ボタンを押すとへこむようにスタイリングしました…!)

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>My Playground</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
<button type="button"><span>+</span>BUTTON</button>
  <script src="js/main.js"></script>
</body>
</html>

CSS

button {
  width: 100px;
  height: 50px;
  color: white;
  background: #247CC0;
  font-size: 15px;
  border-radius: 5px;
  border-style: none;
  box-shadow: 2px 2px 3px 1px #DCDCDC;
  outline: 0;
  font-weight: bold;
  border-bottom: solid 4px #627295;
}
button:hover {
  cursor: pointer;
  background: rgba(36,124,192, 0.5);
  transition: 0.3s;
}
button:active {
  margin-top: 3px;
  border-bottom: none;
  transition: 0.3s;
}

 

おさかなの今後の課題

・「:active疑似クラス」の練習

・<button>にwidthを設定しないでおくと、文字数の変化に対応できる

・ボタンにはmarginを使用せずに、他の要素とぶつかることを防ぐ

・「material」などからデザインの流行をチェック

感想・まとめ

今回は「256times」について、書いていきました…!

いかがだったでしょうか?

第2回目もかなり勉強になったし、自分のソースコードを客観的に見るクセが付いてきて、とても良い感じでした…!

次回の開催日は、まだ未定とのことですがまた参加する予定です…!

ドットインストールのみなさん!今回もありがとうございました。✨

それでは今回はこの辺で!

ここまで読んでくださり、ありがとうございました!

おさかなでした!

 

【おさかなび-osakanav-】では、この記事の感想!おさかなへの応援メッセージ!おさかなに聞きたい事、質問!記事にしてほしい内容!などを大募集中!

「氏名」「メールアドレス」「内容」の3点をご記入の上「osakana1699@gmail.com」までご応募ください!

この記事は役に立ちましたか?

タイトルとURLをコピーしました