現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます！

プログラミングの勉強はまずは、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の使い方について学んでいきましょう！

HTMLとは？使い方と主要要素を紹介#1【初心者向け】

今回は、初心者の方にもわかるようにHTMLとはなんなのか。HTMLを使うと何ができるかを紹介していきます。HTMLとはHTMLとは、ハイパーテキストマークアップ言語のことを指し、Webページの構造を記述するために使用されます。HTMLでは、コンテンツを開始タグと終了タグ...

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

エンジニアにオススメなChrome拡張機能【厳選11選】

今回はエンジニアやブロガーさんに圧倒的にオススメなGoogle Chromeの拡張機能を11個に絞って紹介します。 他のエンジニアやブロガーと差をつけたい！といった方にオススメな一味違ったまとめです。全員・エンジニア・ブロガーと分けて紹介しているので、目次からお...

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

WINDII

WINDII（ウィンディ）は、フリーランスエンジニアが運営するテックメディアです。 日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします！ また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

最新記事 by WINDII (全て見る)

• Nuxt.js + Contentful。HeadlessCMSでポータルサイトを作る - 2019年12月28日
• IOSアプリをAppStoreに公開する手順書（Ionic） - 2019年9月11日
• IonicAcademyでIonic＆Angularでのアプリ開発を学ぶ - 2019年8月30日