Questions while decimating Profile card component from Fronted Mentor — Lesson learned edition

The result of the project

Profile card component GitHub repo

The live version can be found here, and the repo is on GitHub.

If you are like me and need a refresher of your CSS, here are some useful questions and resources that you can use to update yourself.

BEM methodology

BEM stands for:

• Block

BEM block element example

The block name describes its purpose (“What is it?” — menu or button), not its state ("What does it look like?" — red or big).

• Element

BEM element example

The element name is separated from the block name with a double underscore (__).

• Modifier

BEM modifier examples

The modifier name is separated from the block or element name by a single underscore (_).

The modifier name describes its appearance (“What size?” or “Which theme?” and so on — size_s or theme_islands), its state ("How is it different from the others?" — disabled, focused, etc.) and its behavior ("How does it behave?" or "How does it respond to the user?" — such as directions_left-top).

Difference between images has content vs. images that have a style?

• Images have a style use CSS background properties.
• Images that have content are HTML image tags.

How to handle HTML images?

• The w3 school has a great list of things that you can do with an image.

CSS

What is the syntax for Sass variables?

• $variable: value 1;

What is the syntax for border property?

• border: <sides length> <style> <color>;

Flexbox refresh, please

explanation of Flexbox container and items

• A Complete Guide to Flexbox

How to break to a new line with CSS?

example of breaking to a new line with CSS

• Set display block to target span text

How to make text less cramp?

Line spacing visual example

Can be implemented with this property:

letter-spacing: 3px;

How do I handle CSS background?

CSS Backgrounds

How to position static background images?

useful properties

• z-index
• position: fix
• background-color
• background-img: url(<path>)
• background-position: <right left top bottom …>

How to do multiple background images?

CSS Multiple Backgrounds

CSS Multiple Backgrounds

Key properties:

• background-color
• background-image
• background-position
• background-repeat

If you are like me and need to level up your background-image skills the follow along:

Things to practice:

Box-shadow

box-shadow start basics tutorial video

Check out my notes for this basics project exercise.

box-shadow little tricks and gotchas

Background-position

Thank you for reading. Leaving a comment with your feedback.