CodeNewbie Community ๐ŸŒฑ

Cover image for From Front Desk to Front End p.1
Tauri StClaire
Tauri StClaire

Posted on • Updated on

From Front Desk to Front End p.1

Hi CodeNewbies! ๐ŸŒˆ โœจ

I have just started coding for the first (real) time in March, so I am very fresh! ๐Ÿฃ

I am working with Skillcrush, which is an amazing inclusive, supportive, and thorough school for people looking for a fast track to begin their careers in tech! I am following their track in front-end development, and I am coming from a degree in political science and a background as a front desk admin for alternative health clinics for the past 10 years! My hope is to get my foot in the door to the tech field, but I am intrinsically motivated to take front end and design deeper and further for my own website ideas, and I LOVE working with people and helping link in meaning for them so I want to see where that takes me in tech! ๐Ÿ˜

I began to update my LinkedIn regularly with my coding exploits in the projects section, but it was ungainly... After going to Codeland 2022, I fell in love with this community and decided this was a great way to post more!

I will post a recap weekly on Tuesdays ๐Ÿ“†, and this first post is the initial catch-up where I am obviously beginning to catch my stride so please bare with me!

For this exercise,
6/5: Practice utilizing CSS Flexbox to create a layout!
6/7: Updated 3 facts, practiced merging with the upsteam and resolving conflicts on Github between my laptop and desktop. Still static until I come back around.

Edited a static website I had previously coded from a design comp into Mobile First and responsive
6/6: Mobile styles foundation down, starting on tablet then back to desktop with media queries
6/7: Finalized mobile styles according to mobile design comp. So pretty!
6/8: Break from coding today to attend Lesbians Who Tech live in LA! ๐Ÿ’–
6/9: Added tablet styles and finalized, added desktop styles- needs some tweaking
6/14: Made final layout tweak to the grid to solidify desktop styles

(I'm missing some days I accidentally deleted while transferring from my LinkedIn. During this time I started on the final project in Skillcrush's Responsive Coding class, a responsive mobile-first website for a work retreat. Then I decided to take a break from that project to practice more flexbox~)


Happy Juneteenth! I took a break and I went to the beach with a friend after work today. :)
๐ŸŽง Flow Jams: My friendโ€™s May wedding playlist


I used the additional resources in my B.I.T. program to do some additional CSS practice and start with CodeSandBox for the first time. I used the CodeSandBox docs in order to figure out how to push my practice and projects to GitHub. The difference between justify and align-content and their relationship to the main access has FINALLY clicked for me, this being the third resource I have sought out on Flexbox (main lessons being the first, CSS-Tricks the second). So happy to have that brain click!! Introduced to the calc() function which is AWESOME!
๐ŸŽง Flow Jams: Porcupine Tree

Media-query practice
flex-direction query-shift
align and justify practice
row wrap and calc practice


Practiced using flex properties to create responsive containers. Took extra time trying to figure out why an element wasnโ€™t aligning properly using my media queries- finally observed that the ORDER the media queries are in may affect where elements go BEFORE they encounter the next set of rules for the next screen size. I posted to Skillcrushโ€™s Slack channel to ask about ideal min-width for screen sizes. Tinkered with CodeSandbox more until I figured out how to push Commits directly to Github for the repositories I made.
๐ŸŽง Flow Jams: Elbow


Delved into extra resources provided by Skillcrush regarding how to read a design comp for Flexbox properties. Started to attempt responsive images with the Unplugged Project by adding them to the CSS as a background for containers. They arenโ€™t showing properly, but I can tell my other flex properties are registering, so Iโ€™m going to post a QS and take a look again at these tomorrow. Help came swiftly! (shared with her permission- this was my first time doing a project with images in the CSS and my brain was too tired to handle the pathway change. Sometimes you just need a peer to lend you their eyes!)
๐ŸŽง Flow-jams: Medeski, Martin, & Wood
๐ŸŒบ Destress Activity: Bubble bath

a bad file pathway goes unfixed

Slack channel help from a friend


Finished adding responsive backgrounds, images, and icons to mobile styles. Now with all elements in place, itโ€™s easier for me to start tweaking for placement and widths, etc. and itโ€™s really coming along. I still think I need a more in-depth understanding of how all the flexboxes are functioning in my website, then I can ask some good directed questions in a Q&A or on the Slack.
๐ŸŽง Flow Jams: Talk Talk
๐ŸŒบ Destress activity: walk around the lake with my partner

website with added styles


Spent a lot of time trying to make sure I understand why each container is flex vs. not and tampered with margins and paddings a lot, which is one of my least favorite parts of designing a layout but is also one of the most rewarding once perfected. My footer needs a lot of help.
๐ŸŽง Flow-jams: Tortoise
๐ŸŒบ Destress Activity: ๐ŸŽฎ Little Witch in the Woods

wonky footer


Got the footer looking good today and learned how to make circles with CSS thru W3Schools then adapted for my responsive layout. This is what I spent the most time on, then it was fairly easy to tweak the About page styles and add the iFrame. I updated the header and footer of the About and Faq pages as well. Good groove with both my partner and I in the office today.
๐ŸŽง Flow-jams: Alcest
๐ŸŒบ Destress Activity: Walk around the neighborhood with my partner

fixed footer and bottom of iframe

Top comments (11)

dennistobar profile image
Dennis Tobar

๐Ÿ‘‹ Hello!

Nice to read your journal and I love how you are keeping all tasks, ideas, and songs organized day by day. I have more experience with the backend, but I love your designs (sorry, I don't love CSS, StackOverflow helps :))

taurist profile image
Tauri StClaire

Thank you! The designs are from Skillcrush :) Some are exercises (some I customized), some are projects from design comps- really helps to have nice designs to work with so I can focus on my front end code!

That's cool that you have experience with back end! Do you have a fave language? {:

dennistobar profile image
Dennis Tobar

I use PHP / Javascript to do some interactions for send emails and others. I enjoy writing Python too in Wikipedia projects =).

The designs could be part of other platforms, but the talent is yours :)

Thread Thread
taurist profile image
Tauri StClaire

Oh so you do some front end too with PHP!

Would you mind elaborating more on what you do with JS with your emails? And what you like to do with Python with Wikipedia? : D

Thread Thread
dennistobar profile image
Dennis Tobar

PHP, for someone, is "older technology", because it is not fancier than JS. It's easy to learn both languages, but JS has many people following it. In JS, I read my email using IMAP (in node) to classify some emails (sorry, restricted code).

In Wikipedia, I have a python bot that helps normalize articles (i.e., HTML tags misplaced) and do some counter-vandalism in Spanish Wikipedia (I'm a Spanish native speaker, learning English in this community!)

Thread Thread
taurist profile image
Tauri StClaire

I have only heard of PHP being used for Wordpress! Once again, I am bebe :hatching-chick: Your response prompted me to look more into PHP, and how cool! Now I am more intrigued! I may look into back end more throughout my career to go deeper with development, for now I am just learning about the usage and evolution of Ruby vs JS vs now PHP!

That is so cool that you contribute bots to Wiki and do cross-language programming work as well.

Thread Thread
dennistobar profile image
Dennis Tobar

mmm... I say to newcomers, starter programmers, and others: be excellent in 1 area and know the others: Being a full-stack developer is hard because you must see a lot of technologies to be a good coder. I encourage you to investigate but not try to write perfect code in these languages because sometimes you could feel a little afraid about your understanding of technology. I prefer someone who knows where to find the answer to someone who (thinks) knows everything.

Are you curious about Wikimedia API or tools? Visit developer portal to see some ideas and how to user content and data from Wikipedia

Thread Thread
taurist profile image
Tauri StClaire

Thank you! I love that advice from Kelsey Hightower as well! I would prefer to go deep rather than broad, but I'm still trying to figure out what that means in regards to starting as a front end developer. It seems natural to then investigate further the workings of the internet, network, and servers, but I'm sure diving deep with what JS and CSS can accomplish in front end development will keep me busy for a long time! PHP comes up as well with Wordpress, so I guess there's a lot!

Wow thank you for introducing me to Wikimedia! This is an arena I could really see myself contributing to!

Thread Thread
farareaa profile image

Games can help to spotle improve memory and concentration.

amywalker80 profile image

I love this Tauri! I am a SkillCrusher too, and I appreciate seeing your journey through the program too!

taurist profile image
Tauri StClaire

Rad! Thank you โ˜บ๏ธ Please keep in touch with me as you progress through your journey as well!