#introduction to css #239

ManasiAbh · 2020-06-23T23:41:07Z

Reference to issue

[Content Dev Proposal] {{Introduction to CSS}} {{IMC WebDev}} #128

Description of the changes proposed in the pull request

Added the final blog.

Link to Code SandBox

https://codesandbox.io/s/interesting-wave-gi3x6?file=/src/styles.css

Link to Loom video (if blog/workshop completed)

link

Reviewers requested:

atuljayaram · 2020-06-24T17:40:02Z

Hi @ManasiAbh, you uploaded your blog as a PDF. We can't comment/review those on GitHub. Would you mind removing that and uploading your MD file?

atuljayaram

Your blog is very similar to @eden-bouskila 's. Are you collaborating on the same blog? If so, then everything looks good so far! The only critique I have is this:

The screenshots of the code look kinda ugly and out of place. I think it's better if you just take the code and include it in your blog using the MD code block tags. See @emily-gui 's blog as she did this. Not only does it make everything look more professional, but it also allows readers of your blog to copy and paste your code snippets and test them out immediately rather than type everything out themselves.

atuljayaram

Everything looks good now! Great job with your blog!

allenaavila · 2020-07-14T00:05:44Z

IMC_WebDev/FinalBlog.md

+
+This looks like a huge chunk of code right now, but let’s break it down!
+
+HTML works as the canvas for all of our objects, so for every object in our city, we create a div class for it. Once we do that, we can edit those divs using our CSS, which is like our paint! It allows us to control how the objects appear on the site, like color, layout, etc.


I added a sentence here to further explain the analogy between HTML/CSS and canvas/paint; feel free to change or edit to make it more technically accurate!

allenaavila · 2020-07-14T00:13:37Z

IMC_WebDev/FinalBlog.md

@@ -0,0 +1,224 @@
+## Building a Mini City: HTML and CSS Portion
+## Purpose
+HTML and CSS are extremely important parts of learning about how websites work. Every website uses HTML to display content such as text or images. Being able to grasp a few concepts of  HTML and CSS can help a lot when it comes to learning more intricate subjects in computer science, so it's important to get some experience with it!


I like how you explain HTML in the intro for beginners. It would be helpful to also include a sentence about what CSS here, especially because the blog post is about both HTML and CSS

Also, for the last sentence could use a different word choice instead of "important" to avoid redundancy. Maybe "crucial"/"critical"/"valuable"

allenaavila · 2020-07-14T00:16:35Z

IMC_WebDev/FinalBlog.md

+
+Got it? Great!
+
+Next, we have to actually create our HTML tag. Tags are essentially commands that tell our editor what type of HTML we are writing. This just means that we are beginning to write our HTML code, but first we must actually tell our computer that we will be writing in HTML. To do this, simply type &lt;html&gt; on your second line. Your code should look like this so far: 


Great job with introducing key coding terms and explaining them simply/clearly!

allenaavila · 2020-07-14T00:17:26Z

IMC_WebDev/FinalBlog.md

+
+Now that we have established the fact that we will be writing in HTML, it’s time to get into the fun stuff. We start by writing &lt;head&gt; in our third line of code. This tells our editor that the information for our header will be stored here.
+
+After we write our &lt;head&gt; tag, we know that we should give our project a title. Let’s title our project “My Mini City.” This is how your code should look now: 


For future reference, usually punctuation goes inside quotation marks. Such as "My Mini City." or "My Mini City," and...

allenaavila · 2020-07-14T00:31:10Z

IMC_WebDev/FinalBlog.md

+We will be writing all of our CSS in the head portion of our code.
+
+To style our webpage, we will need to learn the CSS syntax. A CSS rule-set consists of a selector and a declaration block.
+<img src=https://lh3.googleusercontent.com/3UcaVdjNU8MuMn4Feims4asq1epCgIOEwJX2goOH8SZE2eP2IKz5vRvCuSL9howvCc_Co_G2TE8Tqe5pIPgTAITV9KB28hqPEWXLzvZZ7xTnF1GNBohcY75WK00KBHIfbJ4nufVR>


If you could add a sentence or two (or maybe even revise the sentences you already have) to reference/explain this useful image a bit more to the audience, I think that would help them better understand the CSS rule-set

allenaavila · 2020-07-14T00:37:35Z

IMC_WebDev/FinalBlog.md

+* rotate(): This transformation rotates an element clockwise or counter-clockwise according to a given degree. For example, 
+transform: rotate(20deg).
+* skew(): Unlike rotate, this transformation skews an element along the X and Y-axis by the given angles. For example, this example skews the element 30 degrees along the X-axis and 50 degrees along the Y-axis.
+transform: skew(30deg, 50deg);


Is this segment "transform: skew (30deg, 50 deg);" meant to be an example and part of the skew bullet point? If so, I would follow how the rotate bullet point is written to make it clearer for the audience.

allenaavila · 2020-07-14T00:38:19Z

IMC_WebDev/FinalBlog.md

+2. Display: This property affects whether or not an element is shown. If you choose display: none, then the element will not be visible.
+3. Background-color: It determines the background color of the element. A color can be specified by a valid color name (“black”), a hexadecimal value (like “ffffff”), or an rgb value (“rgb(255,0,0)”).
+4. Height and Width: These properties are used to set the height and width of the element.
+5. Transform: This property is used to make 2D transformations. The most commonly used transformations are rotate() and skew.


Does rotate need to have () after it? If not, I would eliminate them. (Also, this goes for the two bullet points below, with rotate and skew too).

allenaavila · 2020-07-14T00:41:27Z

IMC_WebDev/FinalBlog.md

+```
+
+
+Now that you’ve laid down the foundation and built a road, you can start building more roads, bridges, buildings, or anything else you might want in your mini city! This is what our city looked like after creating all the code described in this tutorial: <img src=https://lh4.googleusercontent.com/yu268ztRROLzh3AjLVUeNroSMUlbOsHpZzsWNIokeRtjF7iz-1mqWCqJPdtL1-JyUX6shb3kq28_CYm1xihsf70nPM8EBfHVERg13x7ef5nf5TibItYGI7ixBu_CHcgyIUfRML_c>


Would add a sentence or two more here, wrapping up about the importance of HTML/CSS to better mirror your introduction.

ManasiAbh added 2 commits June 20, 2020 20:22

Added the code for the mini city

253d4cc

Final CSS Blog

4413d1d

ManasiAbh requested review from shreythecray and minhtumn June 23, 2020 23:41

ManasiAbh assigned atuljayaram and minhtumn Jun 23, 2020

atuljayaram self-requested a review June 24, 2020 17:37

ManasiAbh added 2 commits June 26, 2020 01:38

Final blog in a doc form

7dda0ae

Changed the format to an md file

ea42b25

atuljayaram requested changes Jun 27, 2020

View reviewed changes

ManasiAbh added 2 commits June 28, 2020 08:49

Made the required changes.

f78589f

Made another change

814900b

atuljayaram approved these changes Jun 28, 2020

View reviewed changes

ManasiAbh requested a review from allenaavila July 13, 2020 19:09

Update FinalBlog.md

28671cf

allenaavila reviewed Jul 14, 2020

View reviewed changes

Update FinalBlog.md

c60bb1c

allenaavila reviewed Jul 14, 2020

View reviewed changes

Update FinalBlog.md

8facfad

allenaavila reviewed Jul 14, 2020

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

#introduction to css #239

#introduction to css #239

ManasiAbh commented Jun 23, 2020 •

edited by atuljayaram

Loading

atuljayaram commented Jun 24, 2020

atuljayaram left a comment

atuljayaram left a comment

allenaavila Jul 14, 2020

allenaavila Jul 14, 2020

allenaavila Jul 14, 2020

allenaavila Jul 14, 2020

allenaavila Jul 14, 2020

allenaavila Jul 14, 2020

allenaavila Jul 14, 2020

allenaavila Jul 14, 2020

allenaavila Jul 14, 2020


		This looks like a huge chunk of code right now, but let’s break it down!

		HTML works as the canvas for all of our objects, so for every object in our city, we create a div class for it. Once we do that, we can edit those divs using our CSS, which is like our paint! It allows us to control how the objects appear on the site, like color, layout, etc.


		Got it? Great!

		Next, we have to actually create our HTML tag. Tags are essentially commands that tell our editor what type of HTML we are writing. This just means that we are beginning to write our HTML code, but first we must actually tell our computer that we will be writing in HTML. To do this, simply type <html> on your second line. Your code should look like this so far:


		Now that we have established the fact that we will be writing in HTML, it’s time to get into the fun stuff. We start by writing <head> in our third line of code. This tells our editor that the information for our header will be stored here.

		After we write our <head> tag, we know that we should give our project a title. Let’s title our project “My Mini City.” This is how your code should look now:

		```


		Now that you’ve laid down the foundation and built a road, you can start building more roads, bridges, buildings, or anything else you might want in your mini city! This is what our city looked like after creating all the code described in this tutorial: <img src=https://lh4.googleusercontent.com/yu268ztRROLzh3AjLVUeNroSMUlbOsHpZzsWNIokeRtjF7iz-1mqWCqJPdtL1-JyUX6shb3kq28_CYm1xihsf70nPM8EBfHVERg13x7ef5nf5TibItYGI7ixBu_CHcgyIUfRML_c>

#introduction to css #239

Are you sure you want to change the base?

#introduction to css #239

Conversation

ManasiAbh commented Jun 23, 2020 • edited by atuljayaram 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 commented Jun 24, 2020

atuljayaram left a comment

Choose a reason for hiding this comment

atuljayaram left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ManasiAbh commented Jun 23, 2020 •

edited by atuljayaram

Loading