Introduction_to_Web_Animations_using_CSS_Code_Deliverable #237

KathyLiu20 · 2020-06-21T17:06:15Z

Reference to issue

[Content Dev Proposal] {{Introduction to Web Animations using CSS}} {{IMC WebDev}} #130

Description of the changes proposed in the pull request

starter code and solution code
written deliverable update

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)

link

Reviewers requested:

- starter code and solution code

- revised the blog according to feedback

atuljayaram

I don't see any obvious flaw in your code. Great job with it so far. Keep going!

atuljayaram · 2020-06-21T19:30:29Z

IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/blog.md

@@ -10,7 +10,8 @@ In this blog, we are going to keep building our mini city. We will have a car go

 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.
+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.

allenaavila · 2020-07-08T01:23:44Z

IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/blog.md

@@ -1,16 +1,17 @@
 # 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.


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).

allenaavila · 2020-07-08T01:31:23Z

IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/blog.md

-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.


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?

allenaavila · 2020-07-08T01:35:37Z

IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/blog.md


 ![](https://i.imgur.com/9FFPgkl.gif)



 ## Build the car and the boat

-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.


For numbers under 10 in the text part of your blog post, spell them out

allenaavila · 2020-07-08T01:41:52Z

IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/blog.md

@@ -133,4 +134,4 @@ Similar for the car, but we want the car to go onto the bridge, so we break its
    ```

 ## Conclusion


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"?

allenaavila · 2020-07-08T01:42:47Z

IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/blog.md




-Similar for the car, but we want the car to go onto the bridge, so we break its route into 5 parts.


Seemed like you meant boat here, so I changed it to boat

code deliverables

2668e1d

- starter code and solution code

KathyLiu20 requested a review from shreythecray as a code owner June 21, 2020 17:06

KathyLiu20 changed the title ~~Driving_the_car_and_flowing_the_water_with_CSS_Code_Deliverable~~ Introduction_to_Web_Animations_using_CSS_Code_Deliverable Jun 21, 2020

blog revision based on feedbacks

beacc64

- revised the blog according to feedback

atuljayaram requested review from atuljayaram and minhtumn June 21, 2020 19:30

atuljayaram approved these changes Jun 21, 2020

View reviewed changes

KathyLiu20 and others added 2 commits June 21, 2020 13:57

update starter and solution code

e7f4515

- starter and solution code including background and buildings.

Update blog.md

42e8d0e

allenaavila reviewed Jul 8, 2020

View reviewed changes

Update blog.md

c1e6b3f

allenaavila reviewed Jul 8, 2020

View reviewed changes

Update blog.md

f0357b1

allenaavila reviewed Jul 8, 2020

View reviewed changes

allenaavila and others added 2 commits July 7, 2020 18:44

Update blog.md

d55e965

update blog based on editor's feedback

20467e1

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Introduction_to_Web_Animations_using_CSS_Code_Deliverable #237

Introduction_to_Web_Animations_using_CSS_Code_Deliverable #237

KathyLiu20 commented Jun 21, 2020 •

edited

Loading

atuljayaram left a comment

atuljayaram Jun 21, 2020

allenaavila Jul 8, 2020 •

edited

Loading

allenaavila Jul 8, 2020 •

edited

Loading

allenaavila Jul 8, 2020

allenaavila Jul 8, 2020

allenaavila Jul 8, 2020

		@@ -133,4 +134,4 @@ Similar for the car, but we want the car to go onto the bridge, so we break its
		```

		## Conclusion




		Similar for the car, but we want the car to go onto the bridge, so we break its route into 5 parts.

Introduction_to_Web_Animations_using_CSS_Code_Deliverable #237

Are you sure you want to change the base?

Introduction_to_Web_Animations_using_CSS_Code_Deliverable #237

Conversation

KathyLiu20 commented Jun 21, 2020 • edited Loading

Reference to issue

Description of the changes proposed in the pull request

Link to Code SandBox

Link to Loom video (if blog/workshop completed)

Reviewers requested:

atuljayaram left a comment

Choose a reason for hiding this comment

atuljayaram Jun 21, 2020

Choose a reason for hiding this comment

allenaavila Jul 8, 2020 • edited Loading

Choose a reason for hiding this comment

allenaavila Jul 8, 2020 • edited Loading

Choose a reason for hiding this comment

allenaavila Jul 8, 2020

Choose a reason for hiding this comment

allenaavila Jul 8, 2020

Choose a reason for hiding this comment

allenaavila Jul 8, 2020

Choose a reason for hiding this comment

KathyLiu20 commented Jun 21, 2020 •

edited

Loading

allenaavila Jul 8, 2020 •

edited

Loading

allenaavila Jul 8, 2020 •

edited

Loading