ここではcodecademyの日本語訳、解答を載せていきます。
私自身、codecademyで学んでIT企業に転職しました。

ただ、英語なので苦労する方も多いと思います。
なので私自身の勉強のためにも日本語訳と解答を記載します。
参考にしていただけたら幸いです。


では、codecademyから HTML&CSSからです。

まず、初回なので使い方から。
アカウントをとって、HTML&CSSのコースを選択すると、こちらの画面が表示されます。


左に問題、ヒント。真ん中にコードを書く。
そして右上の余白は、あなたが書いたコードが反映されるところです。

HTMLやCSSを学ぶと、あなたが使っている
アメーバブログやライブドアブログなどのデザインを
簡単に編集することができるようになります!

是非とも学んでみてください。

さて、早速問題から。

Why learn HTML?

Every webpage you look at is written in a language called HTML. You can think of HTML as the skeleton that gives every webpage structure. In this course, we'll use HTML to add paragraphs, headings, images and links to a webpage.

In the editor to the right, there's a tab called test.html. This is the file we'll type our HTML into. See the code with the <>s? That's HTML! Like any language, it has its own special syntax (rules for communicating).

When we press Save & Submit Code, the results tab will act like an Internet browser (e.g. Chrome, Firefox, Internet Explorer). A browser's job is to transform the code in test.html into a recognizable webpage! It knows how to lay out the page by following the HTML syntax.

Instructions
To the right, we have a test.html file.
Change the text on line 2 (the bit between and ) to anything you like!

Hit Save & Submit Code, and you'll see how the test.html file would look in a browser. Did you see that? The tags made our text bold!
Hint
If you're not sure what to change the text on line 2 to, why not change Feel free to change this text. to I'm about to learn HTML?

Don't change or remove the bit or the bit! We'll explain what those do soon.


なぜHTMLを学ぶの?

すべてのWEBサイトはHTMLと呼ばれる言語で書かれています。
HTMLの構造は、人間の骨格のように考えることができます。
HTMLを使って、webページに段落や見出し、画像、リンクをつけてみましょう!

右のエディター(書き込みができるところ)に、test.htmlと呼ばれるタブがあります。
これは、これから打つHTMLのファイルです。
コードの中に<>がありますね?これがHTMLです!
多くの言語には、特別なsyntaxがあります。
syntaxというのは、言語を書く際の規則です。

Save&Submit Codeを押すと、タブの結果がネット上のブラウザのように表示されます。(インターネットエクスプローラーやChromeやFireFoxのように)

ブラウザーの仕事は、test.htmlの中のコードを
webpageだとわかるように変換させることです。
HTMLの内容から、ページのレイアウトがどのようなものか知ることができます。

課題

01. 右にHTMLファイルがあります。
02. 2行目の<strong></strong>の間に、あなたが好きな言葉を書いてみてください。
03. Save&Submit Codeを押すと、test.htmlがブラウザでどのように表示されるかみることができます。
みれましたか?<strong></strong>のコードは、文字を強調します。!

?ヒント

もし、2行目のテキストを変えるところがわからなかったら、
Feel free to change this text.のところを
 I'm about to learn HTML?に変えてみては?

<strong>や</strong>の かっこをとらないでくださいね!
これらが何を意味するかは今後説明します。


私はこんな感じにしてみました!



では、Save&Submit Codeを押してみましょう!

バッジがもらえましたね!

Codecademyでは、いくつかの課題をクリアするとバッジがもらえます^^
バッジを集めてみましょう( ´ ▽ ` )ノ

ちなみにそこのスクリーンショットを撮るのを忘れました・・・。

バッジのウィンドウを閉じたらこんな感じです。



次の課題に取り組むページが出てきました!
緑色のStart Next Lessonを押して、次の課題に行きましょう!

※ちなみに、間違うとエラーメッセージがでます。

では今日はここまでです。


Sample

<!DOCTYPE html><strong>私のブログ( ´ ▽ ` )ノ</strong>
    
動画もあるよ。