Oh my goodness, I forgot that I am a blogger who posts on TUESDAYS! 😅 Good thing I write this as I go! So here we are late Weds morning. {: I'm starting JAVASCRIPT TODAY so expect exciting updates next week!
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!
7/13/22: 2.5 hrs
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
7/14/22: 2.5 hrs
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.
7/15/22: 3 hrs
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
7/18/22: 3 hours
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
7/19/22 2.5 hrs
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
Top comments (7)
Hi Tauri! Wow, it looks like you got a lot done this week! I must admit, I think I flew past css grid right on to flexbox. It's great that you are leaning into it :) *Also, side note, it has been over a year since I have played Hollow Knight, but I started a new game a couple nights ago 🪲 👾!!
Thanks McKennna : D So in the Skillcrush classes we were introduced to how to make a grid with FlexBox, but CSS Grid is an entirely different set of CSS properties starting with "display: grid"! Skillcrush doesn't get into CSS Grid at all in the Responsive Coding class, but introduces it in Advanced CSS. Maybe I misunderstood what you meant but wanted to be clear bc you wouldn't have gone "past" it in the general lessons {:
And awesome!! OMG, we just beat the Soul Master last night and it was crazay!
Ohhhh that explains so much. I often see CSS grid mentioned in articles, and I am just like, eh I like flexbox just fine. But I bet I am probably missing out on some cool properties. Thank you for the explanation!
I have not gotten that far in Hollow Knight - I take FOREVER to play games lol
You can accomplish a lot with Flexbox that you can do with CSS Grid! CSS Grid does make it A LOT easier and neater to create layouts that have both columns and rows tho, and to place items very specifically in your layout. Flexbox can be used with Grid to fine tune specific regions of the grid, and CSS grid can be used to create 'auto-layouts' which automatically arrange items as a screen resizes and it's p rad! I would def recommend getting around to it whenever you have a chance and Skillcrush's class introducing it was a breezy two weeks compared to the core classes with some great review in Flexbox. (I just split up how I took the classes myself). :)
We usually take FOREVER thru games too but have been pretty addicted to Hollowknight! We take turns playing so that makes it more fun! Hollowknight (and Dark Souls) are like learning programming for me bc they're very challenging games and we have to be patient and grow a little bit at a time. And I'm pretty good cracking the rhythm with bosses, but my girlfriend is always the one that seals the deal and nails 'em! 💥
Thank you for the info about CSS grid; it is actually really helpful! And I agree about Hollow Knight and programming - the map kills me.
Hi!
I see a lot of progress from the first week :)
We -humans- learn from experimentation, so making some mistakes is part of the way to learn: in the future, you won't be made the same mistake... but you will make some new "mistakes".
As a "general" suggestion: try to read this course from Google about Responsive Design, this could help a bit in some edge cases, and peek a few lines from here about critical resources and how to improve the page loading... yeah, I know, "I'm just learning, and this boy show me a not useful guide", but you will understand some ideas about optimization.
See you next week :)
@dennistobar You've been nothing but so helpful every since I started posting! Thank you so much for putting in effort to share resources with me!
That Google Doc is awesome and really helpful! I always value solid sources to get the most solid foundations! And I really appreciate you sharing with me some info about preconnecting for loading optimization, heck yes that is valuable info! I'll update my code this week. {: