Introduction_to_Web_Animations_using_CSS_Code_Deliverable#237
Introduction_to_Web_Animations_using_CSS_Code_Deliverable#237KathyLiu20 wants to merge 8 commits intobitprj:Driving-the-car-and-flowing-the-water-with-CSSfrom
Conversation
- starter code and solution code
- revised the blog according to feedback
atuljayaram
left a comment
There was a problem hiding this comment.
I don't see any obvious flaw in your code. Great job with it so far. Keep going!
| The car is a rectangle box and the boat is a rectangle box with a triangle in the front. Both of them has a shadow to help show the 3D effect. | ||
| So we need to have 2 divs for the car and the boat, and in each of them, we will have some children divs inside. | ||
| So we need to have 2 divs for the car and the boat, and in each of them, we will have some children divs inside. Children divs are divs inside a parent div. They are associated to their parent, and can be easily aligned with their parent div. The two children divs under the car are to hold the left and front side rectangles, and the three children divs under the boat are to hold the triangle in the front, and the left and front side rectangles. | ||
|
|
- starter and solution code including background and buildings.
| # Introduction to Web Animations using CSS | ||
|
|
||
| In this blog, we are going to keep building our mini city. We will have a car going along the road and the bridge, and a boat going under the bridge. | ||
| In this blog, we are going to keep building our mini city. We will have a car going along the road and the bridge as well as a boat going under the bridge. |
There was a problem hiding this comment.
It'd be helpful to add a few more sentences prepping the reader for this blog. You can add something about how this post is about web animations using CSS and add a link to the previous blog post where you built the mini city (if you can link it).
| So we need to have 2 divs for the car and the boat, and in each of them, we will have some children divs inside. | ||
| First, let's build our car and boat with HTML and CSS, just like we did for the ground and buildings before. | ||
| The car is a rectangle box, and the boat is a rectangle box with a triangle in the front. Both of them have a shadow to help show the 3D-effect. | ||
| So we need to have two divs for the car and the boat, and inside each of them, we will have some children divs. Children divs are divs inside a parent div. They are associated to their parent and can be easily aligned with their parent div. The two children divs under the car are to hold the left and front side rectangles while the three children divs under the boat are to hold the triangle in the front and the left and front side rectangles. |
There was a problem hiding this comment.
If you're assuming your audience is more new to CSS, you could go in-depth as to what "easily aligned" means to make sure they understand the connection between children and parent divs. What sort of relationship does that mean? How does the parent div affect the children div?
|
|
||
| First, let's build our car and boat with HTML and CSS like we did for the ground and buildings previously. | ||
| The car is a rectangle box and the boat is a rectangle box with a triangle in the front. Both of them has a shadow to help show the 3D effect. | ||
| So we need to have 2 divs for the car and the boat, and in each of them, we will have some children divs inside. |
There was a problem hiding this comment.
For numbers under 10 in the text part of your blog post, spell them out
| @@ -133,4 +134,4 @@ Similar for the car, but we want the car to go onto the bridge, so we break its | |||
| ``` | |||
|
|
|||
| ## Conclusion | |||
There was a problem hiding this comment.
Would add more to this conclusion, perhaps expanding on/ suggesting other ways animation can be used for the mini city or other projects. Also, would choose another word choice besides "strong" because it's a bit vague; do you mean something more like "exciting," "impressive," "lively"?
|
|
||
|
|
||
|
|
||
| Similar for the car, but we want the car to go onto the bridge, so we break its route into 5 parts. |
There was a problem hiding this comment.
Seemed like you meant boat here, so I changed it to boat
Reference to issue
Description of the changes proposed in the pull request
Link to Code SandBox
https://codesandbox.io/s/interesting-kepler-9dnb5?file=/src/styles.css:0-2271
Link to Loom video (if blog/workshop completed)
Reviewers requested: