【ドットインストール】主催の「256times」に参加してみた！【学習メモ】

テクノロジー

2021.01.24 2019.12.11

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

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

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

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

256timesって何？
初回(テスト配信)の課題は？
実際に参加した感想
おさかなの今後の課題
感想・まとめ

256timesって何？

「256times」とは、ドットインストールが主催するLIVE配信型の「ソースコード添削」イベントです！

主にプログラミング学習、初心者を対象としていて、こんな感じの画面でコードを書いていきます！

プレイグラウンドの詳細はコチラ！

html,css,jsとそれぞれタブを切り替えることができます！

公式アカウント
・Twitter(@256times)
・Youtube(256times LIVE)

プログラミングのソースコードは「唯一の正解」というものがないため、初学者の人はつまずきやすいと思います。
そんな悩みを解消してくれる企画になっていて、とてもおもしろいなと思いました…！

初回(テスト配信)の課題は？

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

今回はこんな感じの流れで進められました！

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

時間の関係上、プログラミング学習相談はしていなくて、主に課題を中心としたコードレビューを行ってくれました…！

時間がある人向けの「発展課題」のコードレビューまでとても丁寧でわかりやすい解説でした！

今回の課題の正解コードはコチラ！

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>My Playground</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  
  <header class="header">header</header>
  
  <div class="l-column">
    <main class="main">main</main>
    <aside class="aside">side</aside>  
  </div>
  
  <footer class="footer">footer</footer>
  
  <script src="js/main.js"></script>
</body>
</html>

CSS

html, body {
  height: 100%;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: skyblue; 
  height: 60px; 
}

.l-column{
  display: flex;
  flex: 1;
}

.main {
  background: orange;
  flex: 1;
  /*flex:1 1 auto;*/
  /*height: 400px; */
}

.aside {
  background: pink;
  width: 240px;
}

.footer {
  background: gray;
  height: 60px; 
}

実際に参加した感想

とにかく楽しかった…！✨

そして、自分の拙いソースコードを晒すの恥ずかしかった…！笑

それでも、やっぱり同じものを作るのにも色々なアプローチの仕方があって、他の人のソースコードを見るのは本当に勉強になりました。

おさかなのソースコード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>My Playground</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <header>
    header
  </header>
  <div class="contents">
   <section>Main</section>
    <aside>Side</aside>
  </div>
  <footer>
    footer
  </footer>
  <script src="js/main.js"></script>
</body>
</html>

CSS

html, body {
  height: 100%;
}
body {
  margin: 0 auto;
  font-weight: bold;
}
p {
  padding: 0;
  font-weight: bold;
  width: 100%;
}
header {
  background: #86C6E5;
  height: 50px;
}
.contents {
  display: flex;
  height: 200px;
}
section {
  background: #F69E32;
  flex: 1;
}
aside {
  background: #F8BBC4;
  width: 240px;
}
footer {
  background: #B8B8B8;
   height: 50px;
}