CSS FlexとGridを正しく習得する
studiomeal
現在、将来の標準となるCSSレイアウトの作成方法であるFlexとGridについて学ぶことができます。
초급
HTML/CSS, Flex
BEST
Bản sao tương tác trang web của Apple!
Bạn có thể tìm hiểu cách phát triển các hiệu ứng tương tác nâng cao thường xuất hiện trên trang web của Apple từ đầu.
Đánh giá từ những học viên đầu tiên
Dịch cái này sang tiếng Việt
Các kỹ thuật tương tác nâng cao thường được sử dụng trên các trang web của Apple
Tương tác video độ phân giải cao
Kiểm soát khung hình chính và phần tử bằng cách cuộn
Cách sử dụng canvas để xử lý ảnh có độ phân giải cao
Tương tác web tuyệt vời như trang giới thiệu sản phẩm của Apple ,
Bạn có muốn thử tự tay phát triển nó không? 🍎
Trang sản phẩm của Apple
Tự mình thực hiện các nguyên tắc cốt lõi 🏰
Các trang giới thiệu sản phẩm của Apple có đôi chút khác biệt về thiết kế và hiệu ứng, nhưng các nguyên tắc tương tác cốt lõi của chúng thì tương tự nhau. Khóa học này khám phá và xây dựng các nguyên tắc tương tác cốt lõi áp dụng trên các trang sản phẩm của Apple , sử dụng thao tác cuộn chính xác để điều khiển các yếu tố thiết kế khác nhau . Bằng cách sử dụng các hiệu ứng được áp dụng, chúng ta sẽ tạo ra các trang hoàn chỉnh, được kết nối một cách tự nhiên .
Trang giới thiệu Macbook Pro (nhấp vào) 
Trang giới thiệu Airpods Pro (nhấp vào)
Ngày nay, mỗi khi Apple ra mắt một sản phẩm mới, việc lướt qua cũng rất thú vị, nhưng cũng không thiếu sự mong đợi về việc trang giới thiệu sản phẩm sẽ tuyệt vời đến mức nào. Tôi chắc rằng mọi người trên mạng đều đang thích thú với điều đó, phải không?
Từ kinh nghiệm thực hiện của riêng tôi
Tạo ra thứ gì đó mới 🧰
Vì chúng tôi không chỉ sử dụng những gì người khác tạo ra mà còn phân tích các nguyên tắc cốt lõi và triển khai chúng từng cái một , tôi nghĩ điều này sẽ rất hữu ích khi triển khai các hình thức hoặc ý tưởng hoàn toàn khác với Apple.
Sau khi làm việc chăm chỉ và kiên trì, bạn sẽ cảm thấy tự tin hơn khi phát triển các ứng dụng trực quan đầy thử thách.
Nhìn vào nó, tôi nghĩ, 'Làm sao mình có thể làm ra thứ như thế này?'
'Tôi cũng muốn thử điều này trong dự án của mình.'
Lớp học này dành cho những người có suy nghĩ như thế này.
Một giọt một lần
Làm đúng ngay từ đầu 💡
Nội dung học tập
- Tạo bộ khung trang web
- Nguyên tắc và thực hành triển khai tương tác cuộn
- Tương tác video độ phân giải cao và hành động cuộn
- Thực hành triển khai tương tác cuộn bằng cách tính toán vị trí và kích thước.
- Kiểm soát video chất lượng cao của bạn mượt mà hơn
- Tạo hoạt ảnh SVG
Các tính năng của bài giảng
👌 Chúng tôi xây dựng nó từ đầu bằng cách chỉ sử dụng các công nghệ web tiêu chuẩn, luôn ghi nhớ các nguyên tắc.
👌 Khóa học được cấu trúc chi tiết để bạn có thể luyện tập trong hơn 10 giờ mà không bỏ sót một nhịp nào, ngay cả khi biên tập chặt chẽ không kéo dài.
👌 Vì chúng tôi chỉ sử dụng các kỹ thuật tiêu chuẩn nên bạn có thể học được những kiến thức cơ bản vững chắc không thay đổi theo thời gian.
Tôi sẽ cho bạn biết trước 📌
- Bạn cần biết những kiến thức cơ bản về CSS và JS để học một cách dễ dàng.
- Nếu bạn cần có cái nhìn tổng quan cơ bản về CSS và JS, tôi khuyên bạn nên học qua các video tổng quan cơ bản trên kênh YouTube của tôi .
- Chúng tôi khuyên bạn nên tham gia khóa học này sau khi đã học khóa học "Bắt đầu với Phát triển web tương tác" vì khóa học này cung cấp nền tảng vững chắc về những nguyên tắc cơ bản của phát triển web tương tác .
- Sử dụng phiên bản EMCA 2015 (ES6) của tập lệnh.
- Mã nguồn hoàn chỉnh đã được cung cấp.
Thông tin nội dung thưởng bổ sung
Đã thêm mã và video hướng dẫn để tạo hiệu ứng tương tác mới trên trang giới thiệu iPad Air phát hành vào tháng 9 năm 2020.
Lộ trình liên quan 🚎
Tạo các trang web năng động, tương tác có thể khiến người dùng thốt lên "Ồ!"
Tạo một trang web tương tác với 1 Minute Coding
Đây là lộ trình các bài giảng. Bài giảng này được bao gồm .
Khuyến nghị cho
những người này
Khóa học này dành cho ai?
Bất kỳ ai tò mò về cách triển khai các tương tác thú vị và hấp dẫn trên trang web của Apple
Bất kỳ ai quan tâm đến việc triển khai một trang web tương tác, sáng tạo
Bất cứ ai muốn tạo một trang web danh mục đầu tư đặc biệt
Những người có giấc mơ về Gaeseiner hoặc Dibalza
Những người thường thích bài giảng viết mã dài 1 phút
Cần biết trước khi bắt đầu?
Kiến thức cơ bản về CSS và JavaScript
19,442
Học viên
1,242
Đánh giá
1,175
Trả lời
5.0
Xếp hạng
11
Các khóa học
서울에서 웹 개발자/디자이너로 일했고, 제주를 거쳐.. 현재는 말레이시아 페낭에서 열심히 개발도 하고, 교육 콘텐츠도 만들고, 1인 기업으로서 해볼 수 있는 여러가지 시도와 실험들을 해보고 있습니다.
비주얼 임팩트가 있는 인터랙티브 웹에 관심이 많고, 유튜브와 페이스북 "1분코딩"에서 웹 개발 관련 기술들을 공유하고 있어요.
개발자/디자이너/콘텐츠크리에이터
페이스북 https://www.facebook.com/1mincoding
Chương trình giảng dạy
Tất cả
60 bài giảng ∙ (11giờ 55phút)
Tài liệu khóa học:
Tài liệu bài giảng
Ngày đăng:
Cập nhật lần cuối:
Đánh giá
Tất cả
225 đánh giá
5.0
225 đánh giá
anminamĐánh giá 8
∙
Đánh giá trung bình 5.0
5
93% đã tham giaキョンガヌヌイの言葉をささげないでください、このAppleのウェブサイト川は韓国のイントレック川の中で簡潔ながらも素晴らしかったです。たとえアンツボンアニメーションとかケンバスとか早い難しいシューアップをこっそりと鎌湖邑、言い換えれば、律時間凌ぐ川沿いに揺れるというのが、これが簡単です。 私は舌のフログラマーであることはDOMを正しく知らず、シエシュエシュを脈動させるのにひどい困難があるが、1分コーディングは締め付けシナリョを通ってカンイクンチュロールをするのでシガニー銀製行ったのか分からない。 。ボッソはファンの方々もカン・イを通ってズ・ウンマルで一段階邑グレードをすることができる。イルケみことばをドリルシュがですよ。
- studiomealGiảng viên
ㅋㅋㅋㅋㅋㅋ minamさんはニックネームらしく膨らんでも真にふんだんに使っています…イルケみことばをドリルスイイですよ。 翻訳者でも絶対回すことはできませんが、どういう言葉なのかをすべて聞く魔法です。
- andamirocll9612
Đánh giá 1
∙
Đánh giá trung bình 5.0
- fortedev
Đánh giá 1
∙
Đánh giá trung bình 3.0
3
35% đã tham gia＃ウェブデザインとインタラクションでは断然最高！ ＃プログラマーの観点からは……？ パブリッシャー業務を兼ねたいウェブデザイナーの方やデザインの方に近いパブリッシャーなら問題視されないかもしれませんが、 私のようにデザイン分野ではなく、フロントエンドからバックエンドにもっと親しみやすい優れたプログラマーを夢見ている方なら、コードを見ながら疑問を抱くことが多いです。私は個人的にこんな気がしました。 'コード構成がより簡潔になることはできないでしょうか' ＆＃x27;これは関数として扱うともっときれいになるでしょう...？＆＃x27; 'エン？これを数式で処理すると自動的に値が出ますが、1日が0.22と同じ数を入力する理由は何ですか？ ##私のように変形しながらコーディングしないでください。 そのままコピーするのが精神健康に有利です。 1分コーディング様のコードをそのままコピーせずに少しずつ変形しながらコードを作成したところデバッグして死にそうです。 ㅠㅠ プログラミングに慣れていない学生を考慮しながらも十分に構造化されたコードを使っていたらどうだったかと思います。今のコードは読みやすさが落ちすぎてスパゲッティコードのようにちょっとひねっていて変形してコードチダがちょっと逃したら分析するのはかなり難しいコードだと思います。 しかし、誤解はしないでください。欠点はこれしかありません。残りはすべて良いです。傷つけることはありません。 概念を詳細にそして繊細に教えてくれます。絵で細かく教えてくれる点もいいですよ。理解も良くなり、講義の編集も思いやりにしてくれて退屈さも少なくなります。数多くの学生の中で、私と似たような学生もいるので、助けてくれと受講評を残します。コードを完全にコピーすると思い、私のように無駄なことを避けてください。
- bucheongosok9525
Đánh giá 1
∙
Đánh giá trung bình 5.0
5
93% đã tham gia関数の動作原理、値を求め、その値を活用する方法、中途中のスクリプトマソードや変数作成時などの初心者が分からない部分をコックコック集めて教えてくれました。正直理解しにくい部分も多かったですが、自分でこれらのコーディングを継続的に繰り返し作成してみると、いつか私のものにすることができるような自信ができました！ 非専攻者なのにこの講義をもとに私だけのポポールを作って就職準備をしてみます！ありがとう
- studiomealGiảng viên
うわー、詳しく役に立った部分を書いてくださると私にも助けがたくさんありますね^^ 本当に頑張って勉強しましたが受講坪まで素敵に書いてくださって本当にありがとうございます チャンギ様。素敵なポートフォリオを作って欲しいところに入社してほしい！
- zxho251786
Đánh giá 3
∙
Đánh giá trung bình 4.7
5
95% đã tham giaコーディングだけでなく、絵や材料を活用した不演説明まで！ 単純なコードではなく、そのプログラミングを進める概念と設計を教えてくれる非常に有益な講義です！
- studiomealGiảng viên
難易度が少しある講義なので、できるだけ理解しやすく努力してみましたが、その部分を知っていただき、良い受講評も残していただきありがとうございます^^
Ưu đãi có thời hạn, kết thúc sau 4 ngày ngày
7.095 ₫
24%
1.612.758 ₫
Khóa học khác của studiomeal
Hãy khám phá các khóa học khác của giảng viên!
Khóa học tương tự
Khám phá các khóa học khác trong cùng lĩnh vực!
.png?f=avif&w=420)
![[2025年出題基準] Webデザイン技能士実技試験完全ガイド강의 썸네일](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?f=avif&w=420)
![[幻想的な足足]デザインからコーディングまで강의 썸네일](https://cdn.inflearn.com/public/courses/332845/cover/5d0ef569-50e5-4300-96ed-3205d526795b/332845.png?f=avif&w=420)
![ウェブデザイン開発技能士 [2025年] 実技全体 (カカオトーク質問可能)강의 썸네일](https://cdn.inflearn.com/public/courses/332868/cover/3a2245ca-bb9f-414a-ba67-403cfcb2b7c9/332868.jpg?f=avif&w=420)
