App Academy

Having numerous issues with the html assessment

this is the picture that I am getting:

I cannot use the relative path of the pictures when I put it in the img tag. For some reason it will not load it on there.
The picture of the desert and the avatar is not looking as it is should. I am lost. Thank you.

It’s tough to fully troubleshoot without having this open in the browser, but one issue I can see from here is that you have class="picture" on the profile picture and class="desert picture" on the other picture. I am guessing that you are trying to give the two pictures different class names, so that you can give them each a different height.

As you have it written now, you have actually assigned two class names to the desert picture: picture class and desert class. Multiple class names can be separated by a space. So what is actually happening in your code is that both pictures are assigned a height of 40px, because they both are assigned to the picture class.

To fix this, try just adding an underscore or a dash between the two words for the desert picture (desert_picture), and change the name in your css file as well.

In terms of the relative path issue, can you send a screenshot of your file structure in VSCode, and the relative path that you tried that wasn’t working? Then we can start troubleshooting that one too.

Let us know how this class name change goes, and if it starts to get you back on track.


if you put the link below in the browser you will see the page.
C:\Users\mofeo\Downloads\html-css-assessment-1.3 (1)\html-css-assessment\index.html

It just looks completely off. I cannot get everything inside of the card/container like I have seen others do. Also, I have tried a method of putting everything separately in div tags with its own class name and it all overlaps. So what I mean by that is I will have the desert picture, the person picture, the secondary-text, the title, and the body-text will all overlap each other. I have abandoned that method since I cannot get it all lined-up appropriately.

Also, the relative path is html-css-assessment\images\desert.jpg for the desert picture
the relative path for the profile picture is html-css-assessment\images\person-avatar.jpg

Thank you

now if I change the pictures and the texts and put them into div tags each with their own class names I will get this:

Notice how the person picture and the texts overlap the desert picture.

This is what it would look like in my last reply:

In terms of the relative path for your images, you have to consider where your current file is in relation to where the image lives in the directory structure. Your index.html is at the same level as the images directory, so you should be able to use a relative path of just "images/person-avatar.jpg".

As for the overlapping issue, one thing I notice is that you may have some extra closing tags - for example, I notice in the last screenshot that you have two </body> closing tags, and there should only be one. When you added the additional <div> tags with class names, you may have added opening tags without closing tags (or vice versa), and this detail can really throw off your styling.

I’d recommend going through the entire file and carefully lining up each opening tag with its associated closing tag. Make sure it is enclosing the right amount of content, and that there are no extras in there. After that, check to see if any of the formatting improves, and feel free to post again if that doesn’t improve the situation.


Hey Thanks Jesse for the help as I really do appreciate it.

I have made some adjustments.

I changed it to the relative path and it works now. I must have been doing something wrong before. Are we suppose to put the box-shadow with the rgba color and the vertical and horizontal offset over the entire card or just a certain picture? I made the desert picture the width of the card. It still looks a little funny as I feel that I am not doing something right there. When I move the pointer over the picture card I am not sure that it gets a shadow of rgba(0,0,0,.3). I have researched how to do this but I do not think that it is coming out right. I am just about done and getting ready to submit this project. I am just having a little trouble with the shadow part. Thank you.

Good morning! I’m glad to hear everything is coming together so nicely!

In terms of the box-shadow, you can apply that to the entire picture card.

I think you are super-close on this one. The key to getting the box-shadow to show up is that you need to have CSS code that tells the box-shadow to appear when you “hover” over it. So the effect should not be there most of the time, and only appear when you hover over it.

Take a look back at the lesson of CSS transitions and I think you will find your solution for programming the effect to happen ONLY when you hover.


.card:hover {

        box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);


Now when I hover over it the box appears. Thank you for the help I think it is time for me to submit it.

I have one last question before I submit it. When it states to have the picture in 40px in diameter is it referring to the height or another specific css property? I wasn’t sure if it was referring to the border-radius property or height or whatever else.

Height should be fine for that picture.