CodeCamp(コードキャンプ)のWebマスターコースレビュー・感想|1日目

プログラミングを習得したい人にとって、プログラミングスクールは「理想の自分に一歩近づける場所」。しかし「プログラミングを学びたいけど、自分にできるか不安」「値段が高くて踏み切れない」「受講のイメージが湧かない」など、挑戦するかを悩んでいる人が多いのではないでしょうか。

そこで今回はCodeCamp(コードキャンプ)のWebマスターコースを実際に受講した様子をお届けします。どんな様子で授業が進み、どんな学びを得ることができるのか。2018年8月1日に受講した1回目の学習内容を、スクリーンショットと共にお届けします。

渡辺彩香
プログラミング初心者の渡辺彩香です!

CodeCamp(コードキャンプ)では常時7種類の講義を展開しています。その中でも、私はWebサービスの開発をしてみたいと思い、HTML、CSS、JavaScript、そしてPHPを学習する「Webマスターコース」を受講することにしました。およそ2ヶ月でどこまで学習できるのか、とても楽しみです。

CodeCamp(コードキャンプ)のWebマスターコースとは

CodeCamp(コードキャンプ)のWebマスターコースは、Webサービスの開発スキルを身につけることを目的としたコースです。プログラミング初心者を対象としているため、そもそもWebサイトがどのようにできているのかという全体像から、文字の表示や動きをつける方法、データ整理や活用方法まで、ひとりでWebサイトを構築する上で必要な知識・経験を積むことができるようになります。

Webマスターコースの時間・料金プランは以下の通りです。

2ヶ月
  • 料金:148,000円(税抜)
  • レッスン回数:20回
  • 受講期間:60日間
  • 週の学習時間目安:20〜25時間
4ヶ月
  • 料金:248,000円(税抜)
  • レッスン回数:40回
  • 受講期間:120日間
  • 週の学習時間目安:10〜15時間
6ヶ月
  • 料金:298,000円(税抜)
  • レッスン回数:60回
  • 受講期間:180日間
  • 週の学習時間目安:5〜10時間

今回は2ヶ月のスケジュールで学習を進めていきます。

事前のCodeCamp(コードキャンプ)の無料体験「2ヶ月でコースを修了するポイント」を伺ったところ、必ず予習をして、疑問点を洗い出してからレッスンに臨むべきとの回答を得ました。そのあたりも意識しながらレビューをします。

それでは、1日目の様子をお伝えします。

Webマスターコース1日目|CodeCamp(コードキャンプ)

本日の講師:栗山 浩一(くりやまこういち)先生
都内近郊でWebサイトの企画・デザインのお仕事をしています。
また、PHPを中心に企業の技術研修の講師もしています。
プログラミングのことだけでなく、サイト制作のお仕事内容についても質問をどうぞ!特に、見やすくてわかりやすいWebページの作り方に興味のある人には、いろいろなワザを教えちゃいます。

引用:CodeCamp(コードキャンプ)

全20回のコースのうち、記念すべき第1回目のレッスン。今回学んだことは以下の通りです。

CodeCamp(コードキャンプ)Webマスターコース第1回目レッスンの内容

  1. 5分のカウンセリング
  2. エディター及び教科書の活用方法(ディレクトリの作成について)
  3. 課題を通してわかったこと(色の指定方法、<!DOCTYPE html>、metaタグ)

※今回は2ヶ月コースのため、「第3章CSSの基礎」まで自己学習を進めていました

1. 5分のカウンセリング

今回は第1回目のレッスンだったので、進め方についてのカウンセリングがありました。私の場合は2ヶ月でHTML、CSS、JavaScript、PHPを学習したいので、予習をどれだけ進められるかが肝となります。

このタイミングで「レッスンを受ける前はなるべく課題を進めて、疑問点を明らかにしておくこと」という受講のポイントを知ることができたのは良かったです。

2. エディター及び教科書の活用方法(ディレクトリの作成について)

レッスンで実際に使用するエディター及び教科書は以下の画面です。

エディター及び教科書の画面

左側にディレクトリ(フォルダのこと)、右側に教科書があります。章のタイトルを開くと、下記のようにメニューがずらり。

体験レッスン教材の内容

HTML5、CSS3の分野だけでも全部で9章まであるので、情報量の多さを感じます。

新しくディレクトリを作成する方法についても学びました。下記画像は、「index.html」を作ってみたところです。

ディレクトリ作成の様子

 

基本的な使い方がわかったところで、実践に入ります!

3. 課題に挑戦

右側の課題を見ながら、中央画面にコードを入力

第3章までは自分で学習を進めていましたが、HTML・CSSの基礎となる大事な箇所です。そのため、授業ではまず「CSSの基礎力を問う課題」からスタートしました。課題内容は下記の通りです。

第3章の課題

上記のように、指定されたデザインをイチから作っていく課題に取り組みます。はじめに教わったディレクトリの作成方法に従い、まずはchallenge_momotaro.cssというファイルを作成しました。

基本的な操作のため、あまり悩まずに課題に取り組むことができました。しかし、気になった箇所が何点かあったため、Q&A形式で紹介します。

1日目のレッスンで生じた疑問

1日目のレッスンを受講し課題を解いていくと、4つの疑問が出てきました。その解答と合わせてご紹介します。

色の指定方法について

Q. フォントの色を「赤」で指定したいとき、red、#ff0000などさまざまな表記方法が存在します。どんな指定方法がベストですか?

どちらがいいということはありませんが、16進数、10進数のどちらも扱えるようにしておくと良いでしょう。

赤だとred、青だとblueなど、色を名前で指定することはできますが、すべての色をカバーしているわけではありません。例えば、レッドとオレンジを混ぜたような色だと、名前がついていないため指定できません。対応しているモニタの色数にもよりますが、256色のみの指定となります。

一方、16進数(#から始まり数字6桁で終わるものです)なら、1670万色も指定することができるのです。

<!DOCTYPE html>とは

Q. HTMLを書くとき、一番最初に書く”<!DOCTYPE html>”とはどのような意味があるのでしょうか。

“<!DOCTYPE html>”とは、HTMLのバージョンを指定するものです

なぜこの宣言をするのかと言うと、ブラウザによって、どの時代のHTMLを読み込むかが異なることがあるためです。古いHTMLの型をデフォルトとしているブラウザがあった場合、見た目が崩れてしまう可能性があります。必ず1行目にバージョンの指定を入れる癖をつけましょう。

metaタグとは

Q. <meta>タグで指定することにはどんな役割があるのでしょうか。

<meta>タグは、その文書内の情報(メタデータと言います)を指定するときに使います。

例えばページのタイトルや文字コードの指定、スタイルシートの指定などを行います。特に、”utf-8”や”shift_jis”などの文字コードの指定は必ず行いましょう。文字化けの原因となります。

コメントを書く方法

Q. 教科書を見ながら、 コードを書くと、どこにどんな指定があったのかわからなくなります……。プログラム中にメモをする方法はありますか?

あります。言語によって変わりますが、HTML/CSSの場合は、メモを「/*と「*/」で挟みます。

上記は「3ー10 課題」のCSS回答箇所です。コメントを入れることで、要件を何度も確認する手間が省けました。

今回は「自分自身の確認のため」にコメントを残しましたが、チームで開発を進めていたり、他の人がメンテナンスをしたりする場合に、コードをわかりやすく保つためにコメントを残すようです。

今回のつまづきポイント

どうしてもできないことや自分で解決できなかった「つまづきポイント」についてまとめてご紹介します。

スペルミス

例えば「stylesheet」を「styleseat」と打ってしまうなど、タグを間違えて覚えていたり、打ってしまったりして、きちんと反映されないことが多々ありました。スペルミスがあると、プログラムが動かなくなってしまうので、細かく確認をしていくことが重要です。

今回のレッスンは初回ということもあり、難しいものはありませんでしたが、20回しかないレッスンの中で、どの言語でどれだけ時間を割くかが学習の鍵となります。それらも考えながら、予習・復習を進めていきます。

Webマスターコース1日目の成果と課題|CodeCamp(コードキャンプ)

第1回を受講して学んだことと、次回に向けた課題について整理します。

・学習の進め方
・HTML、CSSの基礎

今回は、今後を踏まえた学習の進め方と、HTML、CSSについての細かい活用方法について伺いながら課題に挑戦することができました。

授業では4章の課題1まで学習を進めました。第2回に向けて、下記の課題に取り組みます。

第3章の課題(中級)

作成の際、以下の要件は必ず満たすようにしてください。要件以外の文字の大きさや配色などは自由です。

  1. CSSは外部読み込みにする
  2. 見出しの上下境界線を点線(破線ではない)にする
  3. 見出しの文字は半角の「<」と「>」で囲い、中央寄せにする
  4. リンクの文字色の色を変える(サンプルではオレンジ)にする
  5. 赤い字の部分はspanで囲い、文字のサイズを18pxにする
  6. リストの点を丸ではなく四角にする

第4章の課題2

注意すべき点は以下となります。

  1. 全ての要素はブラウザ左端から表示する
  2. 各検索エンジンへのリンクは、背景色の付いた範囲どこからでもクリックできる
  3. 各リンクの文字は中央に表示する
  4. 各リンクは上下に余白をあける
  5. 各リンクに箇条書きのマーカー(黒丸)を表示しない

色や文字の大きさについては自由で、サンプルと全く同じにする必要はありません。教科書では教えていないプロパティを利用する課題もあるようなので、ネットで調べながら課題に挑戦します。

Webマスターコース1日目の感想|CodeCamp(コードキャンプ)

いよいよレッスンがスタートしました! 今回は2ヶ月とCodeCampの提供するコースの中では最短の期間で受講するため、予め「予習をしておいてください」と言われていました。言われた通りに、仕事の合間を縫って第3章のCSSまで教科書を読んでいたので、初回から3章まで終えることができました

今後は、ある程度課題に挑戦してから、わからなかったことを講師に聞くスタイルで受講を進めていきたいと思います。レッスンの40分間をいかに効率的に活用するかがCodeCampでプログラミングを学習するときの肝となるのかもしれません。

そもそもWebマスターコースを受講したのも、最終的に何かWebサービスを創りたいと思ったからでした。しかし、具体的に何をつくるかはまだ決めていないので、そのことについても考えながら頑張っていきたいと思います。