Share this course

Get up to 20% revenue for each qualifying new purchase you refer.
You can join the course referral program after purchasing this course.
Let's take this course now!

Edit Your Review

Describe your thoughts and experience with this course.
Cancel
Complete

Your Review

Delete
Edit

Review This Course

Describe your thoughts and experience with this course.
Exit
Complete

Review This Course

Post a review
Top Programming サイトを作りながら学ぼう! 実践Webサイトコーディング講座
PRO COURSE

サイトを作りながら学ぼう! 実践Webサイトコーディング講座

実際にHTMLとCSSを利用して、様々なタイプのWebサイトを一からマークアップする方法をレクチャーしていきます。実践的なWebサイトのコーディングスキルを身に付けます。

一人でWebサイトをマークアップできるようになる!

HTMLとCSSの基礎を習得した方へ向けた、実践的なWebサイトコーディングを学ぶコースです。

3つの種類のWebサイトを初級・中級・上級と段階を踏んで制作していくので、
「基礎的なHTMLとCSSの知識はあるけれど、実際のWebサイト制作への自信や経験が無い」という方から、
「少しコーディングは出来るけれど、より実践的なスキルを身に付けたい」という方までに学習していただける内容です。

動画を見ながら一緒に操作をして作品を作っていくことをテーマとしていますが、動画は全て5〜10分前後に収めているので、ご自身のペースで無理なく受講を続けていただけます。

また、つまずいたところは何度でも戻って復習でき、理解を深めてから次のレベルへ進むことが可能。実際にWebサイトを作りながら進められて、進捗状況が見えるので、分からないまま進んでしまうことや挫折してしまうこともありません。


※各セクションの冒頭に動画内で使用するデータを添付しています。あらかじめダウンロードした上でご覧ください。

※推奨条件
HTMLとCSSの基礎コースを事前に受けることをおすすめします。

このコースについて

Photoshop、Webデザイン、HTML、CSS、コーディングの5講座が全てセットになった未経験からプロのWebデザイナーに! 450レッスン完全マスターコースのコーディングの部分を抽出したWEBサイトコーディングを学ぶコースです。

この講座で学べること

【初心者向け】クリニックサイトのマークアップ

仮想のクリニックを紹介するWebサイトを、1からマークアップしていきます。
シンプルなデザインなので、マークアップもあまり複雑ではない初心者向けの課題ながら、画像タグを利用してメイン画像を表示させるところから、floatを駆使してボックスを横並びにするなど、幅広くHTMLとCSSを利用していきます。 初めてWebサイトをマークアップする方にオススメです。

【中級者向け】美容院のWEBサイトのマークアップ

仮想の美容院を紹介するWebサイトデザインを、1からマークアップする方法を学びます。

  • シャドウや背景画像等の少し複雑なスタイルを使用する
  • マウスホバーでリンクに下線をつける
  • 要素内からはみ出た部分をスクロールできる新着窓の作成
  • トップページのファイルを複製して、下層ページをマークアップする
  • inputタグを利用した、お問い合わせフォームを作成する

など

少し複雑なスタイルや操作性を意識したマークアップ方法、覚えておくと便利なマークアップ方法などを学ぶ中級者向けの内容です。

【上級者向け】Webマガジンサイトのマークアップ

様々なコンテンツを提供するWebマガジンサイトを、 HTMLとCSSを使って一からコーディングしていきます。

  • HTMLタグ、CSSプロパティを駆使して、デザインをそのまま反映させるようなマークアップ方法
  • 背景画像を利用して、なるべくページの読み込み速度が早くなるようなマークアップ
  • ページネーションや、フッターの作成

など

縦に長いコンテンツ量の多いサイトになりますので、上級者向けの章です。

【チャレンジ】実際のWebサイトのマークアップ

理解度チェックとして、講師運営スクールである、NESTschoolのWebサイトを実際にマークアップしていきます


講師はテクノロジーとクリエイティヴのプロを目指す方のためのスクールを運営しており、卒業生は1000名以上。
未経験からWebデザイナーとして働けるレベルになることをゴールとしているので、Webデザイナーを目指す方には是非学んでいただきたい講座です。


※HTML、CSSの基礎を習得されていない方やデザイン面から学びたいという方へ、同講師のHTML講座、CSS/CSS3講座、Photoshop講座、Webデザイン講座、フルセット版もご用意しています。

About the Instructor

テクノロジーとクリエイティブのプロを目指す人のためのスクールを運営しています。

卒業生は1000名以上です。

★提供しているサービス

2ヶ月のWebデザインコース

2ヶ月で未経験からWebデザイナーへ。
未経験からWEBデザイナーとして働けるレベルになることをゴールとした大学生や若手社会人向けのコースです

Webデザインキャンプ

【2日間で全てを学ぶ!】Webデザイン集中講座

Railsキャンプ

RailsCamp -2日間集中プログラミング入門講座-

など

See more

Course content

Total
Preview You can preview lectures with this label
Loading

Ratings and reviews

4.4
9 reviews
5 stars
56%
4 stars
33%
3 stars
11%
2 stars
0%
1 stars
0%

Related Courses

現役エンジニアが教える、はじめてのiOS 10アプリ開発入門
PRO COURSE

現役エンジニアが教える、はじめてのiOS 10アプリ開発入門

3h 28m Video Course
Instructor: 井上 博樹
34
$96.99
Khóa học Tiếng Nhật trực tuyến cấp độ N5 - JLPT N5 Level
PRO COURSE

Khóa học Tiếng Nhật trực tuyến cấp độ N5 - JLPT N5 Level

21h 34m Video Course
Instructor: Tập đoàn Attain
8
$149.99
経営者のための「No.1事業」の作り方とはじめ方
PRO COURSE

経営者のための「No.1事業」の作り方とはじめ方

2h 3m Video Course
Instructor: 山崎 伸治
$444.99
【一括受講】一発合格シリーズCCNA (200-301)【2021年改訂試験対応】
PRO COURSE

【一括受講】一発合格シリーズCCNA (200-301)【2021年改訂試験対応】

17h 25m Video Course
Instructor: 阪西 敏治
$429.99
ミミプロ - 耳で覚えるプログラミング【最新版】
PRO COURSE

ミミプロ - 耳で覚えるプログラミング【最新版】

2h 17m Video Course
Instructor: BeSomebody
$200.99
Web制作者のための知っておくべき知的財産講座
PRO COURSE

Web制作者のための知っておくべき知的財産講座

1h 9m Video Course
Instructor: 福永 正也
$96.99
仕事ができる人の整理整頓術 - 5Sの徹底を図り、仕事の効果効率を上げる!
PRO COURSE

仕事ができる人の整理整頓術 - 5Sの徹底を図り、仕事の効果効率を上げる!

40m Video Course
Instructor: 藤本 剛士
2
$87.99
長所発見講座 - ストレスフリーな働き方を手に入れよう!!
PRO COURSE

長所発見講座 - ストレスフリーな働き方を手に入れよう!!

1h 40m Video Course
Instructor: MARU
1
$89.99
Word 2016 - ビジネス文書を作成するための 効率的Word活用テクニック
PRO COURSE

Word 2016 - ビジネス文書を作成するための 効率的Word活用テクニック

58m Video Course
Instructor: 渋谷 玲子 & 株式会社ビジネスITアカデミー
$89.99
英語脳育成プログラム マンガENGLISH100 【スタンダード】
PRO COURSE

英語脳育成プログラム マンガENGLISH100 【スタンダード】

10h 1m Video Course
Instructor: 山口 智子
214
$354.99
Japanese Learning Course for JLPT N2 Level
PRO COURSE

Japanese Learning Course for JLPT N2 Level

11h 9m Video Course
Instructor: Attain Corp.
18
$149.99
ビジネス文書のための効率的Word活用テクニック【Word 2010版】
PRO COURSE

ビジネス文書のための効率的Word活用テクニック【Word 2010版】

1h 8m Video Course
Instructor: 渋谷 玲子 & 株式会社ビジネスITアカデミー
9
$89.99