Coding 101

The chunk-style<span-style=“font-size:15px; font-family: Verdana; text-align: center; font-color: white; display: block; background-color: #465775; background-size: 500px; height: 450px; width: 475px; padding: 10px; border: 5px solid blue;”><span-style=“font-size:12px; font-family: Courier; font-color:; text-align: center; display: block; background-color: #56E39F; background-size: 350px; height: 400px; width: 425px; padding: 10px; border: 5px solid blue;”><span-style=“font-size:10px; font-family: Bookman; font-color:; text-align: center; display: block; background-color: #59C9A5; background-size: 320px; height: 360px; width: 370px; padding: 10px; border: 5px solid blue;”>

Pastebin

1 Like

I should be able to. Midterm exams this year does not exist for half of my classes and reading week would take one coding assignment week.
I also finish assignments within 1-2 days but play with them after XD
Hopefully, nothing happens and thanks for teaching this class.

3 Likes

Sounds good. No problem!

3 Likes

Ahhh!! I’m so sorry I didn’t get this earlier I didn’t get a notification for it :sob:

BUT I’m going to finish this! Through and through :gift_heart: I’m learning a lot and it’s refreshing my memory of coding in general.

You’re doing great and this class is awesome! Thank you for all the hard work you put into creating the curriculum and even grading us! You go line for line through everything and that’s great :relaxed:

5 Likes

No worries! At least you saw it now!

I’m so glad it’s helping a lot. It warms me up that my hard work is appreciated. It’s nice to know people are learning so much, too. :pleading_face:


Also, sorry that unit 8 isn’t up yet everyone! I’ve been running some errands and haven’t been able to get on my laptop to post it. It’ll be here soon, I promise! Today’s just been a long day.

4 Likes

Unit 8: Flexbox

Calling all students!

@flyingCouch @greekmyth @merinnie @Theora @ValKayRee @panaceia @JJJ000YYY @Nablai @W.L.Ink

I’ve noticed that some students have been growing increasingly absent – not submitting any assignments – without telling me they’re not able to stay in the course. I will be looking through recent activity to determine who should be removed. I may remove those who missed 3 in a row. If you feel as if this applies to you, please reach out to me as soon as possible and we can work something out.

Now that that’s out of the way, let’s start talking about flexbox. Flexbox, also known as the flexible box layout, allows the coder to create a design that can adapt to the size of the screen it’s being displayed in. Consider this as your first dip in the deep, deep waters that is known as mobile responsiveness.

This is a bit of an aside but I think it’s worth mentioning for two reasons: one) it will show you that unexpected resources can be useful and that two) it’s never too late to learn a new thing. Anywho, I learned coding initially in early 2018 and was so fascinated by it that I kept tinkering with it on the forums since it worked there. At some point in my journey, I found CSS3 Generator. Initially, I didn’t understand it but as I played around with it more, I realized how valuable it was. This is how I first learned about Flexbox. Feel free to mess around with the options. Let your mind wander a bit.

Now, back to the code. I initially wanted to cover this topic last week but then I realized that if I started talking about parent and children spans, you all would be lost. We all know that span works like containers and that you can modify those containers but with proper nesting, you can create a hierarchy where specifications in the parent span can affect the child(ren) span but not vice versa. Furthermore, by setting a few parameters in the parent span, it can change how the children are lined up (either vertically or horizontally), the spacing between each one, and much, much more.

If you’re feeling lost at this point, that’s okay. Hopefully, I can clear it up with this very simple example:

  

<span style="font-size:; display: flex; justify-content: space-around;"><span style="font-size:; display: block; width: 100px; height: 100px; background-color: red;">&nbsp;</span><span style="font-size:; display: block; width: 100px; height: 100px; background-color: blue;">&nbsp;</span></span>

First, notice how there is one parent span and two children span. Second, notice how the parent specified how the content should be spaced out and the children followed. Third, notice how the parent has display: flex; instead of display: block; in its CSS. As a spoiler, when you code with multiple spans, if you leave the width undefined in the outermost span, the design is typically mobile responsive. More details than you could ever want on mobile responsiveness coming next week!

That’s basically all there is to it. For further reading, I recommend clicking here and here. Don’t forget about the handy CSS3 Generator to better visualize what each property does and what changing the value would do to it. I find that the best way to learn is by doing, so experiment away with your code!

Once you feel ready, submit something to me that incorporates the following:

a minimum two spans with display: flex; and four child spans

your choice between two different fonts or two different background-images

at least 4 different colors (color palettes can be found here and here)

Direct reply to this message with your submission by October 12th 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!

7 Likes

@astrophile Question! In the CSS3 Generator, there’s a section about transition. Does transition work here on the forums, or no? I think I remember us talking about this and how some coding works but others don’t :sweat_smile:

Just curious to know if it’s something I could mess around with feasibly here :blush:

3 Likes

I haven’t tried transition much but my intuition tells me that it likely doesn’t work here. You’re welcome to experiment with it, however, and see if it works or not.

3 Likes

Hmmm, that’s what I was thinking. Okay! Thank you :blush: I’ll experiment

3 Likes

No problem and good luck!

3 Likes

Assignment 7 Reflection

Calling all students!

@flyingCouch @greekmyth @merinnie @Theora @ValKayRee @panaceia @JJJ000YYY @Nablai @W.L.Ink

There’s not much to say this time. You all seem to be learning the material well so far. Thank you all for your continued participation in this course. Here’s to hoping the rest of the assignments go well, too.

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!

Student Name Grade
flyx E
greeky E
mina F (removed from class for missing 3 assignments in a row)
theora E
val E
g-ane F (no submission received)
joy S
nab N
ink E
6 Likes

Four child spans to each of two flex spans or four child spans in total?

5 Likes

Four child spans total.

5 Likes


   @Raza Dear Balthazar,
I never knew how joyous life could be until I saw your face.
My heart leaps like a hummingbird in flight every time I see you.
This is something I have never felt before, and it is you that inspires it.
Falling in love with you is the greatest thing that has ever happened to me, and I’ve never been happier in my life.
I know this feeling will last forever.
Please accept this ring as a token of my never ending love.
- Yours truly, Theora
  




Pastebin.

13 Likes

I love rain. . .And, I love food. . .But I love writing the most.. . . inky code . . .

7 Likes




Bloom.



Grow.



Plant.




Explore.



Flower.

https://pastebin.com/pdLHQh2S

9 Likes

Stitch!
Stitch!

bloop

8 Likes
Flexbox Assignment. I had way too much fun procrastinating...boop ********** ****************** ************************* ******************************

Pastebin :cake:

4 Likes

a paradox
the statement in the red block is truethe statement in the yellow block is falsethe statement in the green block is false

pastebin

5 Likes

@astrophile Can I submit this assignment tomorrow, Lumi?

2 Likes