This is my solution to the Profile card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Note: Delete this note and update the table of contents based on what sections you keep.
Build out the project to the designs provided - pretty simple right?!? 🤣 There's always a gotcha in there somewhere. 😄
As usual I designed this mobile-first, although there really weren't too many differences between screen sizes. 🤣
I did attempt a more professional workflow by adhering to good commits. So trying to label them correctly, and only doing one thing per commit. 😱
Usually I like to start by styling the typography, but found it made more sense to start with the layout here.
This gave me a much better idea of both the container and card space I was working with! 😃
- Semantic HTML5 markup
- CSS custom properties
- CSS Grid
- Flexbox
- Mobile-first workflow
- Positioning
Basically, my biggest win was not being so wary of using position: relative
and position: absolute
! I usually only use these as a last resort, but I had planned to use it for the background images right from the start.
I had to Google which value to use on the parent again, but reading the MDN docs helped:
Now on to my biggest headache...
Figuring out 'just how the H***' to position those really cool circles in the background!
I first tried my hardest to use the top
, right
, left
, and bottom
properties open once you use position
, but no dice! 🎲 😠 I played around with that and width
and height
for awhile, getting interesting cut off circles... Then there was that bit I had to check if I had mistakenly placed it in div class="card"
, because I couldn't get them out of the middle of the page. 🤯
But I found using the background
properties were what really helped me out. Through quite a lot of trial and error, background-position
came in for the win! 🏆
I will continue working on only doing one change per commit. I will; promise! 🤞 I changed from simply typing git add .
to adding the actual files and quite liked it, but still find myself jumping from file to file and forgetting to commit. 🤣 Oh well, baby steps!
- MDN:
position
- This helped me remember the differences between therelative
andabsolute
values. - MDN:
background-position
- This is helped me finally set the circle svgs correctly!
Hiya! 👋 My name is Jolene Kearse.
I was an English as a Foreign Language Teacher ️🌏🧑🏫 for over 15 years - so, yeah, for a little bit 🤌... I lived all over the world, including China, England & South Korea.
Now I'm an awesome Software Engineer! 💃 I'm a proud, self-taught individual.
I'm also proud of how far I came in 2022. I finally learned JavaScript! 🍻 _I had struggled for about a year before I finally could add that to my skillset. If you're interested in an awesome 🔥 course check out Class Central's Bootcamp YouTube Playlist going through freeCodeCamp's Algorithms and Data Structures Certification.
Then I met an awesome group of fellow-learning devs, The Explorers. This exposed me to the myriad and oft-confusing ways of using Git in a team - loving it now! But also projects using so many kinds of tech that would've just blown my mind a year before 🤯 including:
- React
- TypeScript
- Tailwind
I even participated in #Hacktoberfest and earned the coveted T-shirt! 🎉👕
In 2023 I've been boning up on React, and just taking so many courses to learn Backend Development and navigate the process of earning my first tech job!
One of those courses has seen me going back to Python - which I had treated as my crutch language to understand JavaScript. 🤣 But I've been loving navigating in multiple languages.
Another challenge I am undertaking this year is Exercism's #12in23. This is a cool 😎 opportunity to try out 12 different languages this year. Each month has a theme, like Functional February and Mechanical March to encourage you to check out different language paradims. I'm loving this chance to dip my toe in other types of programming. I find I'm gaining the ability to evaluate various languages' strengths and project needs.
Let's connect! 💬
- Frontend Mentor - Jolene Kearse
- LinkedIn - Jolene Kearse
- Twitter - JoleneFromCanada