This is a solution to the Profile Card Preview Component Challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
I'm transitioning back into Full-Time Web Development after a long hiatus away from the tech industry. From experience I know the fastest way to learn/relearn any skill is through consistent building and that is why I've found Front End Mentor Challenges to be the perfect fit for me at this stage in my career journey.
This is the fourth challenge I'm attempting. My completion time is getting shorter so I'm definitely excited about that.
- Build out the Profile Card Preview Component challenge at [https://www.frontendmentor.io/challenges/profile-card-component-cfArpWshJ/hub/profile-card-component-28P6zyqsy] as close to the original design as possible.
- Solution: [https://www.frontendmentor.io/solutions/profile-card-component-challenge-CxOxAmgF-]
- Live Site URL: [https://emmanueloloke.github.io/frontendmentor-profile-card/]
- I started out with the HTML structuring of the profile card. Positioning the background image, profile image and texts.
- Followed it up with styling each element to mimic what was presented in the challenge design files with CSS.
- HTML5 markup.
- CSS3 custom properties.
- Flexbox.
- Improved ability working with CSS Flexbox.
- Explore CSS background positioning attribute to use two .svg images on the background.
- Using [ul] and [li] with CSS Flexbox to achieve horizontal text display.
- Reduce excessive use of [px] and [%].
- Feel like I'm ready to dive into JS and in the near future go fully into ReactJS. But in the mean time, I'll continue pacing myself and making sure I truely understand the basics of HTML and CSS before moving on.
- Emmanuel Oloke.
- Frontend Mentor - [https://www.frontendmentor.io/profile/EmmanuelOloke]
- Twitter - [https://twitter.com/I_am_Pope]