<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サイト制作のコツを学び、案件獲得までに必要なスキルをキャッチアップします。

サンプルコース

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

レッスン_サンプル

## 【入門】簡単なWebサイトをつくろう
Webサイト制作がはじめての方を想定した、実践型演習課題です。

答えを見ながらでも大丈夫なので、「なんでこのコードを書くとこうなるのか」を考えながらWebサイトを実装していきましょう。

### 依頼背景
あなたは、フォトグラファーの青年です。
この度、自分のスキルをアピールするプロフィールサイトを作成することにしました。

シンプルで必要な情報だけを掲載したサイトを作成しようとしています。

### 単価目安
3,000〜5,000円

## こんな方におすすめ
* サイト制作経験がほとんどない方
* CodeLessonでHTML・CSSの入門レベルを学習中・学習済みの方
* 制作フローを学びたい方
* 自分に何が足りないか確かめたい

## コーディング仕様書
下記の要件に従ってコーディングをしてください。

### 素材
* ロゴや画像を含めたスターターのコーディングデータをZip化して掲載（Googleドライブ？）

### デザインカンプ
下記のFigmaのデザインを確認しながら、本番を想定して実際にコーディングしていただきます。

[デザインデータ（Figma）](https://www.figma.com/file/vkzIlVtdphjwTitvxl9c6q/%E6%95%99%E6%9D%90%E7%94%A8%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3?type=design&node-id=1229%3A212&mode=design&t=ifKp5BjjCWlw9AzQ-1)

### 指示書
- 全体
  - コンテンツの横幅(wrapper)は1,080pxで、左右の余白は32pxで固定します。
- ヘッダー
  - 横並びにするプロパティを使用してください。
- Aboutセクション
  - 横並びにするプロパティを使用してください。
- Worksセクション
  - 画像はwrapperに沿って、３分割になるように調整してください。
- スマホレスポンシブ
  - ブレークポイントは768pxからです。
  - メディアクエリを使用して、該当箇所が縦方向になるように調整してください。

### コーディングの流れ
#### 1. VSCodeを開き、ファルダーを開いて開発する準備を整える
VSCodeでの開発がはじめての方はこちら(VSCodeの初期設定や、開発までの準備を伝える記事を引用。将来的にはCodeLessonチュートリアルで作成する)

#### 2. Figmaを開き、デザインを確認する
Figmaを使ってのコーディングがはじめての方はこちら（Figmaの使い方を説明する記事を引用。将来的にはCodeLessonチュートリアルで作成する）

#### 3. HTML/CSSを準備する
HTML・CSSのおすすめ初期設定はこちら（以下略）

#### 4. 指示書やFigmaを参考にコーディングする
分からない点があれば、ソースコードなどを参考にしてください。
[Figmaでのコーディングの参考はこちら](https://mosya.dev/blog/figma-for-vscode)

#### 5. 完成したら、ソースコードやデモサイトを確認する
見本のコードを参考にして、Webサイトを完成させてください。

#### 6. SNSやポートフォリオに掲載する
こちらのデザインをもとにコーディングしたサイトは、SNSやポートフォリオ、ブログへ掲載していただいてOKです。

進捗をTwitterで、 **#CodeLesson** のハッシュタグ付きでツイートしていただければ、いいねやRTをさせていただきます。

掲載する際は、本チュートリアルのリンクを貼るようにお願いいたします。
※再配布や販売する行為は禁止です。

### デザイン例
#### PC版
![PC版デザイン](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/cdfe5d2a-bc34-48b6-8110-9614077a28f2.png)

---

#### SP（スマートフォン）版
![スマートフォン版デザイン](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/976283b9-a4ca-41b5-b77c-0954fbc1bae8.png)

## 参考例
コーディングが完了したり、コーディングに行き詰まったりした場合、下記の参考データを確認してください。

### ソースコード
- Notionなどで作成？？
- それか、コーディングデータをZip化して掲載

### デモサイト（コーディング例）
デモサイトをコーディングし、静的サイト化して、URLを貼り付け

## 関連サイト
サイト制作に行き詰まった時の参考にしてください。
* VSCodeのはじめ方
* Figmaの使い方
* リセットCSS
* 検証ツールの使い方
* 模写コーディングの仕方

※各種、いずれはCodeLessonのチュートリアル化をしたい。

【旧】はじめに

1. 【旧】はじめに