技術記事やフリーランス記事をメインに情報公開をしています。是非見ていってください。

  1. ツール紹介
  2. 113 view

プログラミング学習環境を整える

development

プログラミングの勉強はまずは、HTMLやCSS、JavaScriptの勉強をするとことから始まります。
プログラミングは、手を動かさない限り出来るようにはなりません。
今回は、実際に自分でコードを入力&結果を確認出来る学習環境を整えていきましょう。

※今後、サンプルコードを実際に自分で入力する作業の事は写経と言います。

CodePenなどを利用すると、会員登録するだけで環境が整えられますが、今回はサービスに頼らない一般的な方法をご紹介します。
パソコンさえあれば基本的には問題なく進める事が出来ますが、Web業界で働くのであればMacがオススメです。

今回は、youtubeの動画を撮ってみたので、そちらも参考にしてください。

環境構築&写経・表示確認の流れ

  • GoogleChromeを標準のWebブラウザにする
  • テキストエディター(ATOM)をダウンロード
  • フォルダ、ファイルの作成
  • GoogleChromeで表示を確認

GoogleChromeを標準のWebブラウザにする

Web開発をする際に、必須となるのがGoogleChromeの検証機能です。
GoogleChromeは、InternetExplorer.Edge.FireFoxなどよりもWeb開発に向いているので標準のブラウザにしておきましょう。

GoogleChrome

テキストエディター(ATOM)をダウンロード

ATOMは無料で使えるテキストエディタで、コーディングの効率を高めてくれます。
初心者からベテランまで多くの人に愛されているエディターなので最初はATOMから始めましょう。
有料のものだとWebStormが便利ですので、就職してから使いたいなとおねだりしてみるのがオススメです。

フォルダ、ファイルの作成

デスクトップ上にフォルダを作成しましょう。
そしたらATOMでindex.htmlファイルを作成しましょう
そこに、適当な文字を記入し、command+sで保存をしてください。

GoogleChromeで表示を確認

index.htmlを右クリック。このアプリで開くでGoogleChromeで開くを選択してください。
Chromeで表示を確認してみましょう。

先ほど入力した文字が反映されているはずです。

学習環境が整ったら次はHTMLの使い方について学んでいきましょう!

動画内で言っているオススメの拡張機能等は、こちらにまとめてあるので是非ご覧になってください

The following two tabs change content below.

ぞえ

1994年生まれ、1年のアルバイト経験を経てフリーランスエンジニアに。週3で常駐しながら、ブログ事業、受託事業、新規開発を行っています。 フリーランスになるまで Twitterぞえ 雑記はぞえの雑記記事

ツール紹介の最近記事

  1. 記事の書き溜めにはBoostnoteがオススメ!【最強のメモ帳アプリ】

  2. プログラミング学習環境を整える

  3. SEOquake+SEMrushで競合サイトを調査&キーワード解析

  4. ブログで画像・gif・スクリーンショットを使う一連の流れ【Mac】

  5. WordPressサイトのアクセス解析をスマホでみる方法

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。