プログラミング学習やフリーランスエンジニア情報を発信していきます。現役フリーランスエンジニア2人で運営してます!

  1. ツール紹介

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

最終更新日:2019/01/17

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.

ぞえ

実務未経験から1年でフリーランスエンジニアになって給料が6倍になった男/アル中の記憶ない系/しかも190cmの巨人。今は週3勤務しながら@ryudoi1と当メディア運営中 詳細なプロフ ぞえのプロフィール!! Twitterアカウント Twitter 技術系の雑談や、質問の行える無料サロンもやっています。 windii social

関連記事

コメント

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

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

PAGE TOP