This is a solution to the Profile card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
- Build out the project to the designs provided
- Solution URL: View Solution on FEM
- Live Site URL: View Live on Github Pages
- Semantic HTML5 markup
- Flexbox
- CSS Grid
- Mobile-first workflow
- Sass
-
For this project I used Sass for the first time. I learned to install node-sass and how to write my styles in sass syntax.
-
I learned about Sass variables, Sass functions, Mixins, and partials.
-
When I was building this project, I found that there was an inconsistency with the way the images were being accessed on Github vs. how they would be accessed locally. Basically, because I had created a new folder for all my styles, I would need to write the path as /images/something.svg and this would allow the image to be displayed locally as a background image. However, when launched through Git Pages, the images would not appear in the viewport. The way to resolve this was by writing the path this way: ../images/something.svg. Notice that there are two dots prior to accessing the image folder.
-
minmax() is to be used with Grid.
-
I want to get more comfortable with SASS functions and best nesting practices. Even though SASS makes it easy to organize CSS, I still felt like it was a mess.
-
I want to dedicate more time to get current with the new SASS features.
-
I want to get familiar with the command line. I feel like I'm missing out on a lot of features by not using the command line, especially with managing my Github.
-
Learn Sass in 20 Minutes | Sass Crash Course - This video was very helpful in getting me started quick while still having a basic understanding of what I can do with Sass.
-
When Sass and New CSS Features Collide - This article was very helpful in helping me work through some of the errors I was receiving while compiling my code. I couldn't understand why min() and max() were not working with different units when I was certain it should.
- Frontend Mentor - @perezjprz19
- Twitter - @t0xicm0nkey93