<iframe>

<button>

チャレンジ_入門編_テンプレ

チャレンジ_実践編_テンプレ

reactテスト

ターミナル問題テスト

CONSOLE問題テスト

テストのテスト

reactjsxテスト

vue3テスト

vue2テスト

vue3.2テスト

typescript

vueモジュール

Processなし課題

CSSテスト確認

リンクのテスト

sass

scss

隠しファイルテスト

rust

python

ViewZone

分割代入

比較演算子(JavaScript)

オブジェクト{}

変数定義(JavaScript)

console.log

QuizSample

express

echo

katex_sample

Markdown確認challenge1

border

Markdown確認challenge2

wordpress

ファイルロゴチェック

react退避(イベントオブジェクトに型をつけてみよう)

配列操作/forEach

テンプレートリテラル

JavaScript退避

java

deno

rustパーサ

実践チャレンジ用テスト

実践Lessonサンプル

JavaScriptテストサンプル

テストのテスト3

phpApache

http-server

コーディングなし

pythonLib

sandbox-react-js

sandbox-react-ts

sandbox-vue-js

sandbox-vue-ts

0からWebサイト制作のコツを学び、案件獲得までに必要なスキルをキャッチアップします。

サンプルコース

サンプルレッスングループ

レッスン_サンプル

ここでは完成物のデザインを確認します。
デザインを見ながら、**どのようにコーディングするかをイメージ**します。
下記のポイントを参考に[**デモサイト**](https://if-tech-support.github.io/code-lesson-tutorial/middle2/answer/index.html)を確認してみよう。

<br />

### ポイント
* 各セクションをグループ分けする
  * ヘッダー、 各コンテンツ、サイドバー、フッターなど 
* どこで画像を使用しているか
* コンテンツの最大幅は設定されているか
* レスポンシブデザインの横幅の余白はあるか
* 共通パーツはあるか
  * 見出し、コンテナなど
* 見出しはいくつ使われているか
  * h1-h2-h3...　など

### PC版
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/ce722484-2b4d-4744-9e45-7121eed552f1.png)

### SP（スマートフォン）版
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/0086499e-4f77-4c58-80ca-0c20db9b367d.png)

2. 完成物のデザイン確認（ブログ）

1. 2. 完成物のデザイン確認（ブログ）