Learn CSS Flex and Grid Properly
studiomeal
$38.50
Basic / HTML/CSS, Flex
4.9
(224)
2,700+
You'll learn about Flex and Grid, the current and future standards for writing CSS layouts.
Basic
HTML/CSS, Flex
Awesome web interactions like Apple product introduction pages ,
Want to try developing it with your own hands? 🍎
Apple product page
Implement the core principles yourself 🏰
These days, when Apple releases a new product, it's fun to just browse, but there's also the anticipation of how amazing the product introduction page will be. I'm sure everyone on the web is enjoying it, right?
From my own experience implementing it
Create something new 🧰
Since we don't just use what others have created, but analyze the core principles and implement them one by one , I think it will be of great help when implementing forms or ideas that are completely different from Apple's.
After working hard and persevering, you will feel more confident in developing challenging visual implementations.
Looking at it, I thought, 'How can I make something like this?'
'I want to try this in my project too.'
This class is for people who think like this.
One drop at a time
Getting it right from the beginning 💡
Learning Content
- Creating a web page skeleton
- Scroll Interaction Implementation Principles and Practice
- High-resolution video interaction and scrolling actions
- Practice implementing scroll interaction using position and size calculations.
- Control your high-quality video more smoothly
- Creating SVG Animations
Lecture Features
👌 We build it from the ground up using only standard web technologies, keeping the principles in mind.
👌 It is structured in detail so that you can practice for more than 10 hours without missing a beat, even with tight cut editing that doesn't stretch.
👌 Because we only use standard techniques, you can learn solid fundamentals that won't change over time.
I'll let you know in advance 📌
- You need to know the basics of CSS and JS to learn smoothly.
- If you need a basic overview of CSS and JS, I recommend you first study with the basic overview videos on my YouTube channel .
- We recommend taking this course after first taking the "Getting Started with Interactive Web Development" course, which provides a solid foundation in the fundamentals of interactive web development .
- Uses EMCA 2015 (ES6) version of the script.
- Completed source code is provided.
Additional bonus content information
Added code and tutorial videos for creating new interaction effects on the iPad Air introduction page released in September 2020.
Related Roadmap 🚎
Create dynamic, interactive websites that will elicit exclamations of "Oh!"
Creating an interactive website with 1 Minute Coding
This is a roadmap of lectures. This lecture is included .
The way functions work, how to get values and use them, and the parts that beginners like me might not know when writing script methods or variables in between were explained in detail. To be honest, there were many parts that I didn't understand, but if I continued to write these codes repeatedly, I gained the confidence that I would be able to make them mine someday!! I'm not a major, but based on this lecture, I'm going to create my own portfolio and prepare for employment! Thank you.
Not only coding, but also additional explanations using pictures and materials! This is a very useful lecture that teaches the concepts and designs of programming, not just simple code!
Oh. What is it.. This is interesting...
I've said this many times, but this Apple web show Kang-i is one of the most concise and cool Korean interactive shows. Even though it's an animation or canvas that I've never used, it's not easy to follow the Kang-i's example of how to do difficult things like drawing quickly. Although I'm a late bloomer, I don't know DOM well, so I had a hard time figuring out the CS:GO. However, since Kang-i's tutorial is done with a good scenario for 1 minute coding, I don't know if it's a good show or not. Even fans who watch it can easily upgrade their skills through Kang-i. That's all I can say.
#Best in web design and interaction! #From a programmer's perspective, well..? If you are a web designer who wants to do publisher work or a publisher who is close to design, it may not be a problem, but if you are someone like me who dreams of becoming a great programmer who is more familiar with the front-end or back-end than the design field, you often have questions when looking at the code. I personally thought this. 'Can't the code structure be more concise?' 'Hey, wouldn't it be cleaner if I processed it as a function...?' 'Huh? If I processed this as a formula, the value would come out automatically, so why do I have to input numbers like 0.22 one by one?' ## Don't code while modifying it like I did. It is good for your mental health to copy it as it is. I wrote the code by modifying it little by little instead of copying 1 Minute Coding's code as it is, and I feel like I'm going to die while debugging. ㅠㅠ I wonder if it would have been better if you had used a well-structured code while considering students who are not familiar with programming. The current code is too poorly readable and is messy like spaghetti code, so if you modify it and miss it for a moment, it's quite difficult to analyze... But don't misunderstand. This is the only drawback. Everything else is great. There's nothing to criticize. The concepts are explained in detail and delicately. It's also good that you explain them in detail with pictures. It's easy to understand, and the lectures are thoughtfully edited, so it's less boring. I'm leaving a review so that it will be helpful to students like me among the many students. Please think of it as completely copying the code and avoid doing useless things like I did.
![[CSS&JS Master] - Create a trendy emotional diaryCourse Thumbnail](https://cdn.inflearn.com/public/courses/335863/cover/836195ea-22e0-4a97-84a9-5c520b028729/335863.png?w=420)
![Web Design Development Technician [2025] Complete Practical Course (KakaoTalk Q&A Available)Course Thumbnail](https://cdn.inflearn.com/public/courses/332868/cover/3a2245ca-bb9f-414a-ba67-403cfcb2b7c9/332868.jpg?w=420)
![[Fantasy Pig's Feet] From design to codingCourse Thumbnail](https://cdn.inflearn.com/public/courses/332845/cover/5d0ef569-50e5-4300-96ed-3205d526795b/332845.png?w=420)
