Look! I finally got the cover image cropped properly and looking spiffy! 😎 Forem's ideal ratio is 100:42 (so divide width by 2.3809) and maximum size for the image is 4096 x 4096 so cropped this larger image to 4096 x 1720, if you're wondering!
Oh the pitfalls of coding, version control, etc.
I switched to my gh-pages branch as usual yesterday, but turns out I did not push the changes to my github and I exited as usual leaving myself on the gh-pages branch.
WELL this resulted in some inefficiencies today for certain: I started editing tablet styles after I removed the default styles, the realized the default body margin had returned and my normalize.css file had disappeared like a ghost! I could see my github was up to date however, and my brain broke there with misunderstanding. I switched to resolve mode and thought I'd pull the code from my remote repo, but thankfully asked for support from Skillcrush instructors (thank y'all! Lisa and Ann you are awesome!) and I am so happy I got some eyes on what I was doing before I dug myself any deeper.
So after that, I spent the rest of the day editing the tablet and desktop styles and I think it looks BEAUTIFUL. I think my FAQ page looks even closer to the design comp than the solution code! Anyways, I asked an instructor for some final feedback. :) ✨ ✨ ✨
🎧 House Scapes (no music)
🌺 Caught up on correspondence with friends and new acquaintances
The last lesson of my Responsive Coding class emphasized that Shipping was a valuable skill in and of itself. I was like yea yea, but THEN I spent a solid half hour nit-picking at my code and trying to make it perfect right here and now. There are obviously some valuable lessons to be had from doing some QC on this code, but I think I'll get a lot more out of it after I've built a few more websites with complex layouts.
However, I did print it out and do a solid once over to glean lessons learned from what I wish I could perfect in the code now. I know now I will approach my next project with
- My normalize.css in place and CHECKED that it's linking right away
- ALL fonts written out and PREGROUPED into mobile-tablet-desktop for general styles
- An eye on the design for big regular changes in layout from screen size to screen size- like do ALL/MOST boxes get more space when changing from mobile to tablet etc.-- for 2 and 3 I know I really need to take advantage of my applied general styles better
- Next time I want to label each "version" of a layout for a project once all primary elements and css properties are there and I but am making rounds of adjustments. ex. v1 at the end of every github push that has to do with that version before feedback or making any sort of big change to signify start of new version
Then I did some exercises in the Advanced CSS class to mess around with creating layouts in grid. I'm pretty excited about Grid!! Took a quiz to reinforce what I learned about apply grid-templates, columns/rows and grid-gaps.
Lessons for today:
- CodeSandBox TEMPLATES are NOT your most recent revision!
- (Related to 1) I need to trust my instincts if I'm not seeing changes. I "taste test" for a reason! In an interview with previous alumn who were working as developers, Adda the founder of Skillcrush likened using the Guided Projects to using a recipe while cooking and I loved that and ran with it. Well written recipes are at their best and most instructional if the cook is constantly TASTE-TESTING the food. So I don't just follow the steps as written, I REFRESH for (nearly) very change to SEE what happened and I like to call this taste-testing for fun. :) So anyways, I do this for many reasons first being it helps me learn but ALSO it cues me in early if there are any fundamental issues. Well none of my code seemed to be making any visible changes, and I had a weird theory in my head that maybe the grid lines created tiny boxes and the movements were small so I wasn't seeing them. I tried this on far too many elements before finally scrolling up and realizing my display: grid; property wasn't even in place! Look at my profile, lo and behold LESSON ONE LEARNED. This was a 30 min mistake
- I want to write what specific rules/elements I altered the layouts of in my Github commits to make them more specific and useful. I went back to the general commit I made today saying "adjusted layout" and added a comment to specify of the "intro section" and will be more specific moving forward (again, once past building the bulk of the page of course which will have more general notes).
I am often tempted to just exclude these long earned lessons by wishing to hide my mistakes, but I LOVE Joe Glombek's "Celibrate You're Mistakes" from right here at Codeland 2022 and am so going to continue to do so with a fluorish!
For my exercises today, I messed with CSS grid and the Tulip Town exercise from yesterday. I debugged my own layout by zeroing in on what I could see was my problem area, the intro-info for the desktop specifically as not laying flush with the left as I thought it should. Just as suspected, I had started its columns too early. Gratifying fix!
Autolayouts are amazing and very exciting!
I meant to just spend an extra half-hour working on my Front End Mentor project, but ended up working on it for an hour whoops! 😝
🎧 Flow Jams: Emancipator
🌺 Hung out with my partner
I edited the photo gallery of the Tulip Town Exercise with Grid so with an ✨Autolayout✨ and let the photos arranges themselves around a larger featured (selected) pic! I love it! Practiced messing with using both Flex and Grid in layouts with an exercise for this advertisement for an all day free popcorn and drinks Star Wars marathon! Biggest win of today was finalizing the mobile styles on my Frontend Mentor challenge so they are chef's kiss. I had to find how to make a rounded button shape on Codepen, then tweaked the radius ratios so I got the roundedness I wanted. Happy with how I pulled that together quickly!
Wrote back to a peer on the Skillcrush Slack who experiences anxiety when starting her lessons then is driven to distraction, and shared how I trick myself into studying by leading in first with music and smelling a rosemary essential oil every single time, start my Pomodoro timer, get opening everything I need and before I know it my face is filled with code and design comps and my timer is ticking and I'm going! 💪
🎧 Flow Jams: Alcest
🌺 Destress Activity: Home facial
I used CSS grid, including grid-auto-rows and grid-auto-flow for the first time for the last exercise of my Advanced CSS class, this Hometown News website. It's really satisfying setting a layout to display as a grid so that everything displays in a skinny pile then laying it all out to fit and span as you like.
🎧 Flow Jams: Porcupine Tree
🌺 Destress Acticity: Spent some time with my personal bookshelf and reading for my D&D campaign