これが本当のバイブコーディング - 開発者のためのバイブコーディング編
codecamp
No Code, Only Prompt 10分でバイブコーディングで作れる単純なサービスはもう捨てましょう! 企画とデザイン通りに実サービスレベルの高度化されたサービスをカーソルAI NCOPで作る 「本物の」実務適用バイブコーディングを学ぶことができます。
입문
React, Next.js, cursor
Have you seen a lecture that only collects CSS? In this lecture, you will implement everything from the most basic layout composition to responsiveness while working on a total of two projects! Now, if you are ready, let's get started.
Stop following along and start creating your own code!
Increase your understanding of reactivity
Ability to implement real responsive websites
Handling real-time communication with servers
More than 60 cutting-edge properties used in practice
Chapter 02: Teaching Coding Basics
Powerful CSS!
Build strong CSS skills to build real responsive websites!
A collection of over 60 of the latest properties and important CSS concepts.
One of the things that junior developers find difficult is 'CSS'.
If you're wondering, "The grammar is simple, so why can't I do it the way I want?", you've come to the right place.
Now, let's learn about the basic principles and characteristics of CSS and find out the reasons step by step!
We'll learn practical CSS by building our own responsive website.
This isn't just a course where you simply follow along with the code. We'll explain the meaning of each line of code and teach you practical CSS . By creating your own online store through this project, you'll gain the skills to create the responsive website you desire.
Project 01.
"How was your day?" Make your diary online.
"The text and objects are all messed up... Can't I organize them as I like to make them prettier?"
You can solve any problem with CSS you've mastered. Learn the fundamental principles and usage of CSS while creating your own personal journal. Don't miss out on any difficult concepts and properties!
Project 02.
Learn the basics of website development by creating your own shopping mall.
Understand CSS's Flex layout system through your own online store. Study Flex and Grid, essential for modern web layouts, and learn how to utilize them by cloning and coding actual web pages.
Project 02. Advanced + α
Let's directly implement 'responsiveness', which is essential in development!
How to make your website look beautiful on various platforms! Responsive design is the answer. Using services built on websites, you'll learn advanced CSS techniques like grid layout and responsive web design. Learn dynamic CSS elements like transitions, keyframes, and animation to enrich your webpage's user experience!
💡 We recommend that you create a schedule and study regularly and consistently .
💡 Please create a Notion account, a collaborative tool, to receive learning materials.
💡 Learning materials required for the course are provided in Notion (link) .
※ CodeCamp owns the copyright to this learning material. Unauthorized use, distribution, or duplication is prohibited.
Q. Can I take the course without any prior knowledge?
A. A basic knowledge of HTML is required! If you'd like to take this course after building a more solid foundation in HTML, CSS, and other areas, I recommend the [Start with Free Camp!] course.
Q. Is there a separate textbook?
A. Please use the [lecture materials] provided by Notion!
Q. Is there any program I need to install before taking the course?
A. Yes, please install Chrome and VSCode in advance! We'll install other programs together during the lecture!
Q. What courses would you recommend after taking [Powerful CSS]?
A. I recommend the [Warm JavaScript] course.
Wouldn't it be great if I could enhance my code to fill in the gaps?
Who is this course right for?
(★Recommendation★) [Start with Free Camp] Class Attendees
Publishers or front-end developers who want to learn the latest properties
For those interested in front-end development
UI/UX designers who want to increase their understanding of publishing
People who want to develop themselves through coding
For those who want to build a solid foundation for responsive web/apps
Need to know before starting?
(★Recommendation★) [Start with Free Camp] Lecture Learning
HTML Basics
Passion and commitment to being a developer
Curiosity about coding
13,420
Learners
383
Reviews
193
Answers
4.8
Rating
12
Courses
"Try anything, Try everything!"
코드캠프는 유능한 개발자를 양성하며 개발의 미래를 바꾸고자 하는 목표를 가지고 있습니다. 사회적, 경제적, 교육적 배경에 상관없이 누구에게나 커리어 전환의 기회를 제공하기 위해 인프런에 나타났답니다. 코캠과 함께 커리어 점프에 도전하세요!
All
43 lectures ∙ (11hr 51min)
1. What is CSS?
03:38
2. basic CSS usage
02:12
4. Selector1
05:18
6. Box Model
24:12
7. inline vs block
12:26
8. Practice 1
48:17
9. What is a layout?
02:02
10. Selector2
07:22
11. CSS layout flow
05:02
12. float layout
52:47
13. flex layout
23:20
14. Practice 2
17:14
15. Selector3
33:22
16. flex layout2
11:19
17. Lab 3
08:35
All
61 reviews
5.0
61 reviews
Reviews 10
∙
Average Rating 4.9
5
JavaだけでCSSに触れてみたくて偶然受講することになりました。 いったんほとんどの講義が講師一人で楽しんで騒いで泣き、長口打ちしますが、この講義は星★★★★★★6個お届けします。 利点: 1. この講義講師は長い授業であるにもかかわらず、落ち着いて、安定した声のトーンを維持しています。 ライブコーディングが可能 2.講義は気を散らしません。 (開発者の道具を前後に行ったりしなくていいです) 3. flex, position, grid, transition この部分がとても良いですね。 フレックスやグリッドを説明するとき、PPTは神の一人のようです。 4. 講師様がとても気をつけてください。言葉で撤去したり、大体渡ったりすることはほとんどありません。 5. 70%程度を教えてくれた後に30%を課題に、このシステムもとても素晴らしさ...
こんにちは、同じことを書いています。 なんと6つ星をくれます…ありがとうございます!本当に受講生の立場で感じられるメリットを細かく並べていただき、私たちも本当に感動しました☺️これからも有益な講義をたくさん開設する予定なので、多くの期待と関心をお願いします:)
Reviews 1
∙
Average Rating 5.0
5
普段はcssの知識が足りないと思って受講するようになりました。講義後最後に実習を通じて学んだことを適用させて結果物を作ってみるといいですね。特にセクション7. animation、セクション9.レスポンシブレイアウト部分はよく聞きました!そして講師分の声が良くて快適に聞きました。前にした個人プロジェクト講義の内容を参考にしてリファクタリングしてみましょう。
こんにちは hry😊 コードキャンプcss講義を受講していただきありがとうございます。個人プロジェクトのリファクタリングにぜひお役に立てば幸いです💪
Reviews 1
∙
Average Rating 5.0
5
デザイン感覚のない初心者の開発者なので、いつもcssで一番詰まって時間をたくさん使うと思います。基礎を間違えて学んで始めたんだよねㅜ だからインフラで無料講義でも聞きながらcss基本基を固めておこうと思いましたが、ついにこの講義が安く解けて聞くことになりました。よかったです。みんなで決済しましたが、他の講義も頑張って楽しみです。
こんにちは コードキャンプ講義を受講してくれてありがとう!実際にジュニア開発者の方が最もトリッキーにするのがCSSなので、この部分を考慮して制作した講義です。
Reviews 3
∙
Average Rating 5.0
5
受講評イベントクーポンを早くもらいたいです。
こんにちはdydtjq324さん😊 コードキャンプ講義をお待ちいただきありがとうございます!コードキャンプと一緒にぜひフロントエンド開発者として生まれ変わりたいと思います😊
$17.60
Check out other courses by the instructor!
Explore other courses in the same field!