I don’t know you could change the border color like that! I must’ve over read that… makes note of it
glad to know I helped 
Unit 4: More Fun With CSS
Calling all students!
@flyingCouch @xinmure @lst-my-shp-sil @greekmyth @merinnie @Theora @deathinreverie @Forever_D_A @ValKayRee @dumplingbabe @hazelnuttys @panaceia @JJJ000YYY @Nablai @keen @W.L.Ink
Hopefully, you all are a bit more familiar with inline css by now. It’s essential that you understand it inside and out when coding. Without inline css, threads would be so boring. This time, we’ll be exploring a few new properties, which can help you prettify your threads, so let’s dive right in with some code.<span style="font-size: 16px; color: white; display: block; background-image: url('https://66.media.tumblr.com/92d89695d6a82d1aba3a6d59ef480b3d/tumblr_inline_mk7b0eproS1qz4rgp.png'); background-size: 100px; background-position: left; border: 10px solid transparent; border-radius: 20px; width: 200px; height: 200px;">Pretend this says something important.</span>background-image may look scary but it’s just a way for us to express that we want an image to be displayed behind the words of our span. Take a closer look at the formatting. The url portion along with the parentheses after it to contain the url is essential. The code still works without the single quote marks but I include them for clarity. As best practice for coding, I recommend using repeating backgrounds.background-size resizes the background so that it can be displayed properly behind your words.background-position defines which part of your image should be used.border-radius makes your border rounder. The larger the number, the more round.
If you don’t understand any of the new properties I explained above, feel free to click on their name to be directed to a site to learn about them in much greater depth. I’m also here to answer questions.
Using the base code as a starting place, I want you to change the following properties:
● background-image (use a different url, basically)
● background-size
● background-position
● border-radius
As a bonus, if you find the above too easily, I’ve written up an OPTIONAL part two for this assignment:<span style="font-size:; display: block; background-color: skyblue; border: 10px solid transparent; border-image: url('https://cdn.wallpapersafari.com/26/79/syOu2P.jpg') 30 round; width: 200px; height: 200px;"> </span>
As far as I know, border-image can’t be used at the same time as border-radius (correct me if I’m wrong though but that’s what I remember from my previous bouts of testing). It’s still a fun piece of code regardless. Instead of being stuck with only flat colors as borders, this opens up the possibility of you using images for your borders instead. I recommend repeating backgrounds for this as well.border-image is written in the order of image url and then a number for the width. I’m not sure if any other words can be used in place of round but I’ll let you all figure that out if you choose to.
I threw in border: 10px solid transparent; because you can’t have a border-image without a border. Try removing it from the code and see what happens. The values aside from 10px don’t seem to change the code. If you decide to try part two, you can change any part of the base code as you see fit. Just don’t submit the exact same thing back to me. It’s an easy way to get an extra point on this.
Direct reply to this message with your submission by September 7th 6pm PDT. 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!
Background-position link isn’t working.
Can you clarify what you mean?
I see the border designs on my laptop but not on mobile. Good thing that part’s optional.
Here. Link for every other element is working, except for this one.
Oof. Try now?
Turns out, I wrote a hhref instead of a href in the link’s coding.
All good now. 
Also also I found out you can write stretch instead of round for the border image (and some other I forgot about), but, for most images, it doesn’t change much…
Sweet. Thanks for pointing it out. I’m not impermeable to coding typo’s. 
Woah, that’s neat. Shame it doesn’t really change much though for most images.
No problem~
Apparently, there’s repeat too. I haven’t bothered with it too much, but maybe it’s something we can all look into…
It’s worth exploring at least if you do that portion of the assignment anyways.
Assignment 3 Reflection
Calling all students!
@flyingCouch @xinmure @lst-my-shp-sil @greekmyth @merinnie @Theora @deathinreverie @Forever_D_A @ValKayRee @dumplingbabe @hazelnuttys @panaceia @JJJ000YYY @Nablai @keen @W.L.Ink
Everyone that submitted did well on this assignment! There was no major issues from what I could tell. A few people asked me about why their code was cut off on certain devices and while I did answer them personally, I think it’s important enough to say something to everyone. Code can be a tricky beast sometimes as you might be beginning to notice. Sometimes, you can make something look nice but… it doesn’t look the same on every single device. Don’t worry too much for now. We’ll learn more about this later in much greater detail. I have a whole assignment dedicated to mobile responsiveness.
Moving on, though, I was fairly lenient with grading this time since there wasn’t a lot of room for error. As long as your code worked (which is true for everyone), you earned at least an S for the assignment.
Let me step on my soapbox for a second before I let you all see your grades. This isn’t directed at any single person because I believe you all are genuinely here to learn how to code. However, code stealing is a very serious offense. It takes me ages to come up with a design and even longer to execute it. As we get into making more personalized things for our assignments, I want you to be aware of this. Taking a quick glance at another submission to see how they did something is discouraged. If you want to know how something is done, please ask the person or better yet, ask me. It’s why I’m here. Code discussion is encouraged in here and also encouraged over at The Coder’s Society. Just don’t try and get me or someone else to do your entire assignment for you. Haha.
If you have any questions or concerns, don’t be afraid to reach out to me. If you want to discuss your grade, please reach out privately. I’ll be more than happy to clarify something for you, especially if it helps you reach a deeper understanding with the code. Anywho, hope you all have a good week!
If you have an asterisk next to your grade, please message me as soon as you can!
| Student Name | Grade |
|---|---|
| flyx | E |
| xin | F (no submission received) |
| lux | S |
| greeky | E |
| mina | E |
| theora | E |
| xérès | S |
| ashen | L* |
| val | E |
| jade | S* |
| hazel | S |
| g-ane | E |
| joy | S |
| nab | S |
| keen | E |
| ink | E |
⊙.☉ my first E!!!
Congratulations Couch! 