Lee's DevBlog

Scrimba Business Card Project

When I wrote my first article on this site last week I explained that I had decided to work back through the Scrimba curriculum from the beginning to try to really master the basics before moving forwards to more complicated projects.I also explained that I was trying to complete the project with alternatives to big tech - Codeberg and Statichost.

This first exercise builds a simple html and css business card, customised on the back of a walk through project. The project uses flexbox to split the images and content onto separate columns. I always struggle to remember flexbox, though it seems straightforward, splitting the direct children of the flexbox container into columns.

Screenshot showing a business card with a styled avatar image and information about my interests on blue and claret.

The main changes that I made to the project where the introductions of a slight border-radius to the card, another to the avatar, and a light text shadow. Obviously I also introduced a slight claret and blue Burnley color palette too.

This was the first project that I had deployed to Statichost via Codeberg replacing the Github via Netlify workflow in Scrimba. It worked fine other than needing to enter my Codeberg credentials - I think I cloned via HTTPS rater than SSH, so hopefully this will just work in the next project.

Codeberg Repo | Deployment

The fixed width avatar seems to be being vertically stretched as the card lengthens on my deployment - I'll need to look into how to control that.

Until the next time...

#Scrimba #css #html