
Vanilla JS ベース UIコンポーネント - タブメニューの作成
codingghost2025
¥1,791
初級 / HTML/CSS, vanilla-javascript
一つのウェブページを構成するには、部分部分の各コンポーネントを作れる必要があります。ピュアコーディングだけでUIコンポーネントを作ってみましょう。HTML、CSS、JavaScriptを使える方におすすめです。
初級
HTML/CSS, vanilla-javascript
本教材はフロントエンドコーディング入門者向けの書籍であり、HTML、CSS、JavaScriptについて扱っています。 すべてバニラコーディング(純粋なコーディング)で作業し、それぞれの原理を理解しながらコーディングを学べるよう、基礎から説明しています。 「コーディング・レベルアップ」は、ウェブページ制作の基礎から自習できるように、多様な例題と補足動画をあわせて提供しています。 [ 動画紹介 ] 1、2章まではYouTube動画を見ながら、インストールおよび実行を真似して進められるよう動画を用意しました。 それ以降の3章からは、YouTube動画を見ながら学習の復習または予習をしつつ、本を読み進めるのが最も効率的だと思われます。 入門書は計「春・夏・秋・冬」シーズンで構成される予定であり、本書はシリーズの最初の本として「春(Spring)」シーズンの本です。
フロントエンドの第一歩
HTML / CSS / JavaScript バニラコーディング
実習中心で自然に慣れること
各チャプターのミッション提供 / ミッションの解説提供
ネイバーのバナー、メニューなどをすぐに作ってみる実習
1〜3章までは動画講義をあわせて提供
『コーディング・レベルアップ』は、私が知っていることをゆっくりと紐解くように作りました。
HTML、CSS、Javascriptを純粋なコーディングで学ぶ本です。
私自身が勉強した方法でもありますし、どなたかにとって私のやり方が役に立つのではないか
という思いで作ることになりました。
オンライン・オフラインで長い時間、学生たちを教えながら
学ぶ順番がいかに重要であるかも知るようになりました。
入門として「春・夏・秋・冬」の全4シリーズで構成する予定です。
入門者の方が難しく感じるであろう第1、2章は、動画で教材の内容を順番に進めていく方法を講義します。
3章からは、教材を解く前後に見ると役立つ追加補講映像です。
本で例題を一度やってみて、動画を見ながら他の例題も練習してみることができます。
合間合間にMISSIONを3つのチャプターに分けて提供します。
"まねっこミッション"または"解いてみようミッション"があります。
デベロッパーツールでデバッグする方法も、少しずつ見ていきましょう
小さなことから練習してみるミッション〜!
コードを一段階ずつ入力しながら、変化する過程を説明します〜
可愛いフリーランスの「イラン」キャラクターで、合間合間に応援メッセージを.. ^^
最近、数多くのライブラリやフレームワーク、そしてAIの登場やバイブコーディングまで、本当に便利にプログラミングができる時代が来ました。
どれが良い、悪いということよりも、私の考えでは、最初は手軽に触れられるものから始めて好奇心を満たし、勉強を進めていくうちに必ず気になることが出てくるようになります。なぜなら、最初に始めた時よりも少し知識が増えた時の方が、より多くの疑問が湧いてくるからです〜
そんな時に、基礎を固めるためにコーディング学習を一つひとつやり直したくなるかもしれません。どのような方法であれ、まずはアプローチして挑戦してみることをお勧めします。
コーディング・レベルアップ・シリーズは「独学で進めるコーディング自習書」らしく、一人で勉強されている方々の助けとなるよう、本の内容を物語のように解きほぐして伝えるよう努めました。
入門シリーズは全4巻で制作される予定であり、本教材はその第1弾である「春」シーズンです。 ^^
プログラミング「言語」と言うじゃないですか?どんな言語でも、最初は頭でわかっていても口から出てきません。英語の勉強に例えると、より理解しやすいですよね?プログラミング言語も、慣れるための時間が本当に重要です。
小さなことから一つずつ作りながら身につける「コーディング・レベルアップ」で、今すぐレベル〜アップ!
学習対象は
誰でしょう?
VSCodeも初めて使う入門者向けの講義
フロントエンドを始める際に、基礎をしっかり固めたい方
純粋にコーディングをしたい方
前提知識、
必要でしょうか?
基本的なWindows/Mac OSの使い方がわかる程度で大丈夫です。
キャリア認証
こんにちは。私はプロダクトデザインとコーディングを共に行っている個人事業主のフリーランスです。
数多くのウェブサービスやハイブリッドアプリ、ネイティブアプリを企画からローンチまで手掛けてきました。
数年前に済州島に移住して拠点を構え、これまで休むことなく走り続けてきた自分にひと時の休息を与えつつ、これまでオン・オフラインで講義してきたことや積み上げてきた知識を、一つひとつ足跡として残しています。
講義を作りながら、ゆっくりと…分かりやすいものであってほしい。「あ、これならできそう」と思ってもらえることを常に忘れないようにしています。また、例題を作りながら達成感を感じてもらうことも、私の計画の一部です ^^:: 今日ももう一行コーディングしてから眠りにつきましょう。皆さん、応援しています!
2025 独学で進めるコーディング自習書「コーディング・レベルアップ」著者
YouTube「コーディングゴースト」を運営しています。
YouTubeチャンネル:https://www.youtube.com/@codingghost941
Instagram:@blackcrown.design.studio
フリーランス・インスタ漫画「イランイ」:@ejey.irangi
全体
43件 ∙ (7時間 7分)
講座資料:
2. 開発環境構築
11:48
10. CSSボックスモデルの練習 1
14:14
11. CSSボックスモデルの練習 2
20:46
12. JSでDOMを操作する 1
09:01
13. JSでDOMを操作する 2
15:22
14. JSでDOMを操作する 3
08:33
15. JSでDOMを操作する 4
13:03
16. JSでDOMを扱う 5
09:37
17. JSでDOMを操作する 6
08:11
知識共有者の他の講座はこちら
同じ分野の他の講座を見てみましょう!
新規会員登録で25%OFF
¥1,878
25%
¥2,508