This week was a real doozy for me. It’s hard to stay focused with everything else going on in my personal life, but I really am trying my best.
We had a few assignments due that were time consuming and difficult. It was definitely a challenge, but I think it was more challenging because of what I’m going through in my life and it’s taking all of my determination to stay focused. The thing is, when I would sit down to do the work, I felt like I was right where I needed to be. That’s what keeps me motivated to keep pushing through hardships to get this degree.
Let’s get into it a bit. For the Sac Writers website, I found the majority of the CSS to be quite straightforward and easy. The heading and footer were the tricky parts. Initially, I tried to use positioning on the header image, but it fell on top of the content and you could see the white background laying on top of the heading. I still don’t think I figured out the header image entirely, but I ended up placing a div around the header image, set it to display flex and then aligned the .cta class to flex-end, which placed it near the bottom.
I honestly couldn’t believe my eyes when it worked. I would try about a dozen properties, and then look at the code again, target different elements, change divs, add and delete a class, etc., and then something would just end up working. I really enjoy the puzzle aspect to code, and as you get closer to finding the answer it’s exciting, like you’re on the precipice of discovery.
The Sac Writers footer took me a few tries, but in the end I was able to figure out most of the flexbox and styling. Those bottom social icons though, whew. I tried just about everything in the book. I was playing the Flexbox Froggy to see what I was missing, I added classes, divs, ids, then took them away, added this and that and everything in between. Whatever I did in the end, it worked. I think it’s less about remembering what properties to use and more about which elements to target. Because I’ll have the right idea and know at least what properties I should be using, but then nothing happens when I preview the work. Then suddenly I change a ‘ul’ to a ‘li’ and BAM it’s fixed. I’d love to understand a little more about which elements to target and why. I think that bit would help me solve these puzzles more quickly.
Another thing I had trouble with in the Sac Writers were the curly brackets around the CTA’s. I ended up using <span> to style the curly brackets on the cta’s, but that seemed superfluous. There had to be a better way. I looked up online how to add curly brackets as code and found that you could use { and }, but it still wanted to style the brackets the same color as the cta, like { Join Today } would be in all red. I was hoping the code for the brackets would stay black to keep with browser settings, but I couldn’t figure out how to fix that so I stuck with span to style. It looks busy, but it worked!
Lastly, for the Zen logo, I actually got the position: absolute on the first try. I mean it took me a few iterations, but I basically targeted the correct element and was on the right track from the get (thanks for Prof. Mead’s guidance that the logo image would be absolutely positioned). I would not have figured it out without that clue. I used my positioning notes from a past lecture to work through how to do it and get to the solution. I was REALLY excited about that one.