Unit 10: Additional Information
Calling all students!
@flyingCouch @greekmyth @Theora @ValKayRee @JJJ000YYY @Nablai @W.L.Ink
Welcome to our last assignment of the course! Can you believe that we’re almost done already? I hardly can. It feels like just yesterday that I posted the first assignment for you all to do. Anywho, this assignment will just be filled with small coding fun facts I couldn’t manage to fit into earlier assignments. Compared to mobile responsiveness, this should be a walk in the park for everyone.
Feel free to do as little or as much as you’d like. There are no set requirements this time. Click on the name of the property/concept to learn more about it, including syntax and proper usage!
1. text-shadow
Can you see the red shadow behind these words?
2. box-shadow
This box has a gray shadow.
3. overflow
words words words words words words words words words words words words words words words words words words words words
4. transform
These words are upside down. Can you still read them?
5. text-align
These words are perfectly centered, woo!
6. cursor
If you’re on a computer, hover your cursor over this box and watch as your cursor changes from an arrow to another shape! (The shape I’m using for this example is called “crosshair” but more exist, too!)
7. CSS Gradients
So, for this one, while you can learn how to code and make it yourself, there are some handy websites out there where you can look at pretty colors and then get part of the code already written with just a click of the mouse. You’ll get something that looks like this: background-image: linear-gradient( 110.6deg, rgba(179,157,219,1) 7%, rgba(150,159,222,1) 47.7%, rgba(24,255,255,1) 100.6% );, which you can easily add to your inline CSS. I recommend this site and this other site, for starters, but there are probably more websites out there that you can use.
Look at how pretty this background is! It’s a gradient! It’s super duper cool!
8. border-radius
We covered border-radius back in unit 4, but there’s still more that you can do with it that we didn’t go over before. Mainly… circles! To do a circle, you use percentages instead of pixels as your unit and you use 50% as the value. So, the property-value pair would look like this: border-radius: 50%
Circle
9. position
So… I’m not confident enough with how I use this property to be able to explain it but basically, it gives you a finer control over how content in the code is placed in relation to each other. It comes in handy when making complex threads and it’s something worth at least experimenting once or twice with.
10. HTML Entities
Ever wondered how some people can share raw code in their posts without it… actually turning into something? Something to the effect of seeing <b>text</b> instead of text as you’d expect. Well, there’s a way to “escape” your code so that it doesn’t register as code. There’s a handy dandy site which can escape your code for you automatically, which you can find here. When seeking the help of others with code, knowing how to share your code is very valuable. More entities can be found here.
If anyone has trouble figuring out how to use one or more of the properties above, please reach out to me privately and I’ll walk you through the base codes used to make the examples displayed, if applicable.
I know that was a lot of information but you’re not required to play with everything. Do as much or as little as you’d like. There are plenty of other cool coding things to discover, too, but these are ones that I find to be the most important when it comes to crafting interesting threads. Go forth and explore!
Direct reply to this message with your submission by November 2nd 6pm PST. Grades will be given shortly. If, at any point during this assignment you wish to ask a question, feel free to tag me and ask!