DEV Community

Cover image for Session #2 on Scrimba - the art of troubleshooting is still not mastered
Fredrik Berg
Fredrik Berg

Posted on

Session #2 on Scrimba - the art of troubleshooting is still not mastered

Time used: 2 hours
Total time: appr. 4 hours

(I will need to use a time tracker to be more accurate with the time used from now on, it will be interesting too see when the fullstack path is finished how much time I have used).

CSS
I went through (almost the whole section) of the business card section. The task was to create a business card that give a short presentation of who you are, and you are encouraged to be creative here.

During this session we went through; flex box, websafe fonts, inheritance and justify-content.

I have alot of thoughts on how the business card could look like, and there is a ton online, where I can see the source code (HTML, CSS and JS) but that is cheating. It is the easiest thing in the world to copy code from another and paste it, but I wouldn't understand it so I am taking my time here..

Right now I want to create a hover-function which changes my profile picture when hovering over the picture, but I can't figure it out and it is getting late. 2 hours on this session is very long but I have been troubleshooting this for at least half the time, and I haven't managed to find out why.

Perhaps since the src of the image is written in the HTML code and the background-image I want to change it with is written in the CSS-code? Stupid thought maybe!? I am still trouble shooting and refuse to use ChatGPT.

Here is a snippet of the business card (pretty boring):

I used linear gradient for the background color. I have forgotten my previous knowledge, my previous business card was much cooler then this.

I will continue troubleshooting tomorrow.

Below is the CSS code (I couldn't paste the HTML code, it didn't show up as code, why..?)

body {
margin: 20px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.avatar {
width: 150px;
border-radius: 80px;
background-image: url(images/profilepicture.jpg);
}

.avatar:hover {
background-image: url(images/Festningen.jpg);
width: 150px;
height: 50px;
border-radius: 80px;
}

.card {
width: 400px;
margin: 0 auto;
padding: 20px;
display: flex;
justify-content: space-around;
text-align: center;
background: linear-gradient(grey, darkgrey);
color: white;
}

.locationparagraph {
font-size: 10px;
color: grey;
}

Top comments (0)