GRC 275 Announcements for the Week of 9/21/20

[Instructor]

Welcome to the class announcements for the week of September 21st 2020. We'll be covering any class announcements as well as summarizing what we will be covering this week in class.

Class Recordings

Here are the recordings of my lectures during the previous week.

9/14/20 Lecture
https://tmcc-edu.zoom.us/rec/share/drWw ... ZLP4Fa-gBL

9/16/20 Lecture
https://tmcc-edu.zoom.us/rec/share/sqZf ... tyelGkcfd0

Subjects

Notice the differences between some of these tutorials and my lectures. There are a million ways to do things in web design.

This week we're going to cover making shapes with CSS, BEM CSS naming conventions, Viewport Units, EMs and REMs, block vs inline-block, ::before and ::after, and a unique way to tame the CSS Box Model.

- CSS * Selector

Articles
https://www.w3schools.com/cssref/sel_all.asp
https://developer.mozilla.org/en-US/doc ... _selectors
https://www.w3resource.com/css/selector ... lector.php

Videos
https://www.youtube.com/watch?v=SCEyyNcdtL4
https://www.youtube.com/watch?v=Bcr70LIJcOk (this one includes even more CSS selectors)
https://www.youtube.com/watch?v=EO4ToIX-ZQk

- CSS box-sizing: border-box; (it's a miracle!)

Articles
https://css-tricks.com/box-sizing/
https://css-tricks.com/inheriting-box-s ... -practice/
https://developer.mozilla.org/en-US/doc ... box-sizing
https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Videos
https://www.youtube.com/watch?v=WlGQdgy-M6w
https://www.youtube.com/watch?v=bExVtvdaMG4
https://www.youtube.com/watch?v=Nk8CZuH7C8k

- CSS properties display: block vs display: inline-block

Articles
https://medium.com/@DaphneWatson/css-di ... 3a1e6e3051
https://www.w3schools.com/css/css_inline-block.asp
https://www.digitalocean.com/community/ ... line-block
https://css-tricks.com/when-do-you-use-inline-block/

Videos
https://www.youtube.com/watch?v=x_i2gga-sYg
https://www.youtube.com/watch?v=I3zAKyLRciU
https://www.youtube.com/watch?v=hgoFi0fCv3w
https://www.youtube.com/watch?v=kYQomYe9ejU

- CSS ::before and ::after

Articles
https://css-tricks.com/almanac/selector ... nd-before/
https://www.w3schools.com/cssref/sel_before.asp
https://www.w3schools.com/cssref/sel_after.asp
https://www.freecodecamp.org/news/css-b ... -property/
https://bryanlrobinson.com/blog/top-3-u ... -elements/

Videos
https://www.youtube.com/watch?v=kYQomYe9ejU
https://www.youtube.com/watch?v=xoRbkm8XgfQ
https://www.youtube.com/watch?v=djbtPnNmc0I

- Viewport Units

Articles
https://ishadeed.com/article/viewport-units/
https://www.sitepoint.com/css-viewport- ... ick-start/
https://css-tricks.com/fun-viewport-units/
https://alligator.io/css/viewport-units/

Videos
https://www.youtube.com/watch?v=_sgF8I-Q1Gs
https://www.youtube.com/watch?v=du6gnsImsLU
https://www.youtube.com/watch?v=IWFqGsXxJ1E

- EMs vs REMs

Articles
https://j.eremy.net/confused-about-rem-and-em/
https://webdesign.tutsplus.com/tutorial ... -cms-23984
https://zellwk.com/blog/rem-vs-em/
https://www.digitalocean.com/community/ ... s-em-units

Videos
https://www.youtube.com/watch?v=_-aDOAMmDHI
https://www.youtube.com/watch?v=pautqDqa54I
https://www.youtube.com/watch?v=H4UtKu11yXg 
https://www.youtube.com/watch?v=UHf3aQz50jQ
https://www.youtube.com/watch?v=qrduUUdxBSY (this one covers all the other CSS units. a good summary of all of them)
https://www.youtube.com/watch?v=-GR52czEd-0 (this one has most of the other CSS units of measure too)

- Making shapes with CSS

Articles
https://css-tricks.com/the-shapes-of-css/
https://css-tricks.com/working-with-sha ... eb-design/
https://www.w3schools.com/howto/howto_css_shapes.asp
https://tympanus.net/codrops/2018/11/29 ... ss-shapes/

Videos
https://www.youtube.com/watch?v=d_7orjIxsjU
https://www.youtube.com/watch?v=AejW-k5iKWk
https://www.youtube.com/watch?v=QY7Rj8aZcZk
https://www.youtube.com/watch?v=pOB75oTNhw0
https://www.youtube.com/watch?v=Phj-D8qrkA0

- BEM CSS naming conventions

Articles
http://getbem.com/
https://css-tricks.com/bem-101/
https://www.smashingmagazine.com/2018/0 ... beginners/
https://www.toptal.com/css/introduction ... ethodology

Videos
https://www.youtube.com/watch?v=SLjHSVwXYq4
https://www.youtube.com/watch?v=iyR6RXUZFQ8
https://www.youtube.com/watch?v=u-XKw585KqY
https://www.youtube.com/watch?v=er1JEDuPbZQ

- A bonus article on modern CSS layouts. Pretty fun and funny.
https://medium.com/actualize-network/mo ... 26febe3525

- A bonus video summing up all you know about CSS layout.
https://www.youtube.com/watch?v=R7gqJkdc5dM

- Another bonus video on DRY (Don't Repeat Yourself) methodology. Use the Cascade, Luke!
https://www.youtube.com/watch?v=u-XKw585KqY

- Yet Another bonus video on cleaning up your CSS as well as a great way to style your website for those that navigate with keyboards. Good stuff!
https://www.youtube.com/watch?v=iHEkRIF7zxI

If I wind up going over anything else in my lectures, I will update this message with the new info. Class files will also be available for download from the website, as well.

As always, if you have any questions, comments, or concerns, please feel free to ask me. I'm available via email, Canvas, and the class forum.