【AIの時代でも】FigmaからLPのコーディングをする初心者OK実践講座【HTML,CSS,JavaScript入門】

「入門書は読んだけど、まだ自分でWebページを完成させられる気がしない」

「実際のフロントエンドエンジニアがやっている作り方を知りたい」

「Webページを作る練習をしたいが、練習の仕方がわからない」

このコースはフロントエンドエンジニアとしての就職や転職を目標とする方向けにHTMLやCSS,JavaScriptのより実践的な開発手法を身につけるための最初の教材となることを目指して制作しました。

デザイナーが作成したFigmaのデザインファイルを見ながらWebページのコーディングをしていく過程をそのまま体験することができます。

動画の中では以下のような知識や開発手法について解説しています。いずれもフロントエンドエンジニアとしてサイト制作を進める上では必須の知識です。

• 開発者目線でのFigmaの基本的な操作方法

• HTMLの基礎

• CSSの基礎

• JavaScriptの基礎

• 制作物の共有方法

ぜひ、「ひとつの作品を作り切る」という体験をしていただき現場で使える開発力を磨き上げていきましょう！ひとつのWebページを最後まで作り切ると開発力は桁違いに向上します！

近頃はAIやノーコードのサービスを取り入れたより効率的な開発手法も普及してきています。コーディングに人が直接費やす時間は今後より削減されていくことでしょう。

しかし、HTML,CSS,JavaScriptといったWeb開発の土台となる基礎的な知識が今後も必要とされることに変わりはありません。

AIが代わりにコーディングをすることになったとしても、成果物の最終確認や修正指示は人間が引き続き受け持つ領域です。そうした仕上げの工程においてもHTML,CSS,JavaScriptの具体的な知見が備わっていないと迅速かつ的確な仕事はできません。

従来はコーディングをする過程が結果的に学習の機会としても機能していたという側面は否定できないでしょう。学習する機会がある程度までは必然的に確保されていたのです。

AIやノーコードを取り入れた開発手法が普及するということは、直接手を動かして学習する機会が損なわれていくことにつながります。そうした状況のなかで、学習する時間や機会を確保していくことは初学者にとっては大切になるでしょう。

本講座がAIやノーコードと伴走する開発スタイルとなっても色褪せることのない知識資産構築の一助となれば幸いです。

プレビューとして約15分ほど、コースの一部を無料でご視聴いただけます。

コースの内容や雰囲気を事前にぜひご確認ください。

【学習環境について】

• MacやWindowsなどお好きなPCをご利用ください。

• ブラウザはchromeの利用を推奨しています。

• エディタはお好きなものをお使いください。コース内ではVisual Studio Codeを使用しています。

【同梱されている教材について】

• Figmaのデザインファイル

• サンプルコード(各レクチャーが完了した時点のものをそれぞれ収録しています)

• 講座内で紹介したWebページのリンク集