【ドットインストール】主催の「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;
}

 

おさかなの今後の課題

今回のコードレビューを通して、これから学習するべき課題が見えてきたので、きちんと復習して更にレベルアップしていきたいです…!

・「flexbox」の理解不足

・「section」,「aside」の使い分け

 

 

 

感想・まとめ

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

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

プログラミング初学者にとっての「痒い所に手が届く!」そんなイベントですごく楽しかったです!

企画してくださった、ドットインストールのみなさん!ありがとうございました。

今後も開催してく予定みたいなので、興味のある方はぜひ!積極的に参加してみてください…!

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

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

おさかなでした!

 

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

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

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

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