「CSS Position、Transition、Transform、Animation、Flexbox、Grid、レスポンシブウェブ」など、中級以上のCSS技術を体系的にマスターし、多様な実習プロジェクトを通して実務で即座に応用可能なスキルを習得できる講座です。
CSS ポジション(Position): Static、Relative、Absolute、Fixed、Sticky などを活用し、多様なレイアウトを自由自在に構成します。
CSSトランジション(Transition) & トランスフォーム(Transform): 自然でダイナミックなUI効果を実装し、ウェブページの完成度を高めます。
CSSアニメーション(Animation): Keyframes、Duration、Timing-Functionなどを活用して、インタラクティブで生き生きとしたウェブ要素を作ることができます。
Flexbox & Grid: 最新のレイアウト技術を使って、レスポンシブWebページをより簡単かつ迅速に設計するノウハウを学びます。
レスポンシブデザイン：メディアクエリを通じて、様々なデバイス（PC、タブレット、モバイル）でレイアウトが崩れない柔軟なレイアウトを実装します。
多様な実習プロジェクト：カードレイアウト、レスポンシブナビゲーションバー、イメージギャラリー、ダッシュボード、ローディングスピナーなど、実務型事例を通してコーディング経験を積みます。
レイアウト設計&UI/UX改善: 実際の業務やポートフォリオにすぐに適用できるデザイン設計能力を身につけます。
HTML+CSS基礎を終えて中級CSS・アニメに挑戦したい方
Flexbox & Gridでレイアウト設計を自由にしたい予備・現職開発者
反応型ウェブでパソコン・モバイル・タブレットまで支援したいウェブデザイナー・フロントエンド志望生
学習対象は
誰でしょう？
HTML+CSSの基礎はある程度身につけたものの、より豊富なCSS機能を活用してワンランクアップしたページを作りたい方
WebデザインとUI/UXに興味があり、多様なCSSアニメーション・レイアウト設計技法で実務力量を培いたいWeb開発志望者
FlexboxとGridに馴染みがなく漠然とした不安を感じていた方 - 実際に手を動かしながら確実に理解したい方
レスポンシブウェブの制作を通じて、モバイル・タブレット・デスクトップなど多様なデバイスをサポートする必要がある開発者
チームプロジェクトや個人のポートフォリオで、一段階高いデザインクオリティを目指すすべての方々
前提知識、
必要でしょうか？
基本的なHTMLとCSSの概念をある程度知っていればスムーズに進められます。
「ちゃんと学ぶHTML + CSS: Part1」またはこれに準ずる基礎コースを受講された方は、学習効率がさらに向上します。
341
受講生
19
受講レビュー
8
回答
4.7
講座評価
11
講座
안녕하세요, 우리동네코딩 스튜디오에 오신 것을 환영합니다!
우리동네코딩 스튜디오는 카네기 멜론, 워싱턴, 토론토, 워터루 등 북미의 주요 대학에서 컴퓨터공학을 전공하고, Google, Microsoft, Meta 등 글로벌 IT 기업에서 실무 경험을 쌓은 개발자들이 함께 만든 교육 그룹입니다.
처음에는 미국과 캐나다의 컴퓨터공학 전공자들끼리 함께 공부하며 성장하고자 만든 스터디 모임에서 시작되었습니다. 각기 다른 대학, 다른 시간대에 있었지만 함께 문제를 해결하고 서로에게 배운 그 시간은 매우 특별했고, 자연스럽게 이런 생각이 들었습니다.
“우리가 공부하던 이 방식, 그대로 다른 사람에게도 전하면 어떨까?”
그 물음이 바로 우리동네코딩 스튜디오의 출발점이었습니다.
현재는 약 30명의 현직 개발자와 컴퓨터공학 전공 대학생들이 각자의 전문 분야를 맡아, 입문부터 실전까지 아우르는 커리큘럼을 직접 설계하고 강의합니다. 단순한 지식 전달을 넘어, 진짜 개발자의 시선으로 배우고 함께 성장할 수 있는 환경을 제공합니다.
“진짜 개발자는, 진짜 개발자에게 배워야 합니다.”
저희는 웹 개발의 전 과정을 처음부터 끝까지 체계적으로 다루되, 이론에 머무르지 않고 실습과 실전 중심의 피드백을 통해 실력을 키워드립니다.
수강생 한 사람, 한 사람의 성장을 함께 고민하고 이끌어가는 것이 우리의 철학입니다.
🎯 우리의 철학은 분명합니다.
"진정한 배움은 실천에서 오고, 성장은 함께할 때 완성된다."
개발을 처음 시작하는 입문자부터, 실무 능력을 키우고 싶은 취업 준비생, 진로를 탐색 중인 청소년까지.
우리동네코딩 스튜디오는 모두의 출발점이자, 함께 걷는 든든한 동반자가 되고자 합니다.
이제, 혼자 고민하지 마세요.
우리동네코딩 스튜디오가 여러분의 성장을 함께하겠습니다.
Welcome to Neighborhood Coding Studio!
Neighborhood Coding Studio was founded by a team of developers who studied computer science at top North American universities such as Carnegie Mellon, the University of Washington, the University of Toronto, and the University of Waterloo, and went on to gain hands-on experience at global tech companies like Google, Microsoft, and Meta.
It all began as a study group formed by computer science students across the U.S. and Canada, created to grow together by sharing knowledge, solving problems, and learning from one another.
Though we were attending different schools in different time zones, the experience was so meaningful that it led us to one simple thought:
“What if we shared this way of learning with others?”
That thought became the foundation of Neighborhood Coding Studio.
Today, we are a team of around 30 active developers and computer science students, each taking responsibility for their area of expertise—designing and delivering a curriculum that spans from foundational knowledge to real-world development.
We’re not just here to teach—we’re here to help you see through the lens of real developers and grow together.
“To become a real developer, you must learn from real developers.”
Our courses take you through the entire web development journey—from start to finish—focused on hands-on practice, real-world projects, and practical feedback.
We care deeply about each learner’s growth and are committed to supporting your path every step of the way.
🎯 Our philosophy is simple but powerful:
"True learning comes from doing, and true growth happens together."
Whether you're just getting started, preparing for your first job, or exploring your future in tech,
Neighborhood Coding Studio is here to be your launchpad—and your trusted companion on the journey.
You don’t have to do it alone.
Let Neighborhood Coding Studio walk with you toward your future in development.
全体
136件 ∙ (2時間 24分)
講座資料（こうぎしりょう）:
全体
1件
2.0
1件の受講レビュー
受講レビュー 2
∙
平均評価 3.5
2
現在、講義をセクション4まで受講しましたが、例と問題のコードが異なる場合（例えばセクション4のtransition and transformプロジェクト：テキスト移動効果の場合、問題とは異なり提供される例のファイルはテキスト移動効果ではなく画像拡大効果のStarterです）があり、また、提供されるStarterコードと解答が全く別の環境のように感じられる場合があります。 また、CSSの様々なプロパティを例単位に分けて説明している点は良いのですが、構成に比べて講義のクオリティが低い印象です。各セクションの講義は単にテキストをTTSで読み上げているだけで、むしろ講師の声を直接聞くことができれば、はるかに講義から真摯さを感じられると思います。
devhoonie様、こんにちは。 貴重な受講レビュー、誠にありがとうございます。まず、例題と問題コードの不一致により、ご迷惑をおかけしましたことを心よりお詫び申し上げます。お話しいただいたセクション4のtransition and transformプロジェクトのように、実際の講義内容とStarterコードがずれている場合、迅速に確認し、一括で点検および修正作業を進めさせていただきます。学習の流れを妨げないよう、最優先で対応いたします。 また、CSSプロパティごとに例を分けた構成を肯定的に評価していただき、感謝申し上げます。講義の配信方法に関する率直なご意見も、深く心に留めます。現在、一部の講義がTTS音声のみで提供されている点が、学習への集中度合いに影響を与える可能性があるという点に、全面的に共感いたします。該当パートは、今後順次、講師音声に置き換えられるよう、内部で検討を重ね、アップデートを準備いたします。 より良い学習体験をご提供できるよう、継続的に改善してまいります。改めまして感謝申し上げますとともに、いつでも不便な点やご提案がございましたらお聞かせください。
devhoonie様、こんにちは。 まず、サンプルと課題内容に不一致があった点につきまして、改めてお詫び申し上げます。該当箇所は修正完了いたしました。ご不便をおかけし、誠に申し訳ございませんでした。 加えて、HTML、CSSの授業を含む講座内容全般、ソフトウェア開発全般に関するご質問、または次のプロジェクトに関するお悩みなど、どのようなテーマでもご不明な点がございましたら、いつでもオープンチャットを通じてお問い合わせください。誠心誠意、ご回答させていただきます。 今後もdevhoonie様に実質的な助けとなるような、より充実した有益なコンテンツでお会いできるよう努めます。 ありがとうございます。 オープンチャット：https://open.kakao.com/o/gC10Fnoh
期間限定セール、あと08:38:50日で終了
￥2,426
22%
￥3,120
知識共有者の他の講座を見てみましょう！
同じ分野の他の講座を見てみましょう！
![DOMからピクセルまで、ブラウザレンダリングとCRP完全攻略 - [DOM完全攻略 Part 3]Course Thumbnail](https://cdn.inflearn.com/public/files/courses/338418/cover/01k34f9mhtvq2xgzr15w1qhmas?f=avif&w=420)
![イベントからSPAまで、インタラクティブWebの必須エンジン - [DOM完全攻略 Part 2]Course Thumbnail](https://cdn.inflearn.com/public/files/courses/338102/cover/01k1bjkdeb2ap7p4b0vb2fck06?f=avif&w=420)
![構造探索と操作のすべて - [DOM完全攻略 Part 1]Course Thumbnail](https://cdn.inflearn.com/public/files/courses/338045/cover/01k1cvnt514nzd42eadka09p64?f=avif&w=420)
![本格的に学ぶ JavaScript: オブジェクト指向プログラミング マスター & 戦略型AI 三目並べ 実践 Part2 [中級編]Course Thumbnail](https://cdn.inflearn.com/public/files/courses/336946/cover/01jv48md3p02hgkwt4yh1svf3j?f=avif&w=420)
![ちゃんと学ぶ Express.js: Part1 基礎から応用まで [基礎編]Course Thumbnail](https://cdn.inflearn.com/public/files/courses/336833/cover/01jre8d93dtfptrdx7kjrt7rh0?f=avif&w=420)
![[ウェブ開発入門] 一人でも開発するHTMLとCSS with ニンジンマーケットCourse Thumbnail](https://cdn.inflearn.com/public/courses/329537/cover/e58304bd-ac81-4ec4-88c8-479cde58188a/329537-eng.png?f=avif&w=420)
![Bootstrap を活用したレスポンシブ Web 制作 [基本概念編] ブートキャンプCourse Thumbnail](https://cdn.inflearn.com/public/courses/333092/cover/5a3043a4-fc2d-4b25-9096-306c8f707b5b/333092.jpg?f=avif&w=420)
![[2025年出題基準] Webデザイン技能士実技試験完全ガイドCourse Thumbnail](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?f=avif&w=420)
![フルスタックのための堅実なフロントエンドブートキャンプ (HTML, CSS, バニラJavaScript + ES6) [フルスタック Part2]Course Thumbnail](https://cdn.inflearn.com/public/course-326306-cover/4ea213de-f786-4af1-a9d0-b8932263885a?f=avif&w=420)
