Business Card

Overview 📝

This project is part of the Web Dev Basics module of Scrimba's Frontend Career Path course.

We developed a "Business Card" based on the mockup provided by the instructor.

Stretch goals 💪

✅ Change the border(s)

✅ Add border radius

❌ Shuffle the layout

✅ Shadows 🤯

✅ Hover effects 🤯🤯

❌ Animations 🤯🤯🤯

Screenshot 📷

Mockup 🖼️

Links 🔗

Scrim code 👀

Live site 👀

What I learned 🤓

📌 Shorthands

📌 Web-safe fonts

📌 Color palettes

📌 Flex child containers

📌 Image alt texts

• Make your site accessible.
• Fallback if the image doesn't render properly.
• Helps your site rank higher on Google.
• Don't include "image of".
• Be concise (< 125 characters).
• Describe it "over the phone".

📌 Inheritance

• Write DRYer code.
• Fewer bugs.
• Be more efficient.

📌 Utility class

• It's iqual a class for a single CSS property,

📌 Relative path syntax

• ./ ➡️ Start from the same directory the current file is in.
• ../ ➡️ Start from the parent directory of (the directory "above") the current file.
• / ➡️ Start from the project's root directory.

📌 Git

• Version control system.
• Runs locally on your own machine.
• Helps keep a history of changes you've made to your project.

📌 GitHub

• Online platform that stores Git repositories.
• Runs online in the cloud.
• Helps share your code (and the history of changes) with others.
• Assumes the usage of the Git version control system.
• Has many Git-based capabilities built into it (committing, merging, branching, etc.).

📌 Version Control

• Creates "save points" (called Commits) in your code that you can revert back to if needed.
• Manages changes made by others by "merging" multiple different versions of the same codebase.
• Generally allows you to be less worried about making mistakes or having your code conflict with other people working on the same project.

Resources 🗃️

📺 Learn how to correctly use :hover in CSS by Dorian Desings (Spanish)

Author 🔰

✨ Frontend Mentor - @mendezpvi

✨ X (formerly Twitter) - @mendezpvi