Dasmotos Arts and Craft: Feedback!

Wow! Thank you so much for your feedback. This really helps.

1 Like

Hello!

Hoping to find a code review partner (or just some feedback) for Dasmoto’s Arts and Crafts! Links are below:

:frog: Live Site
:tada: GitHub Repo
:sparkles: GitHub Gist

Thanks!

1 Like

Hello!
Is your CSS file in the same folder as your HTML file? If so, try saving your CSS file inside a separate “css” folder. Make sure this new “css” folder is in the same location as your HTML file and your “Images” folder (see attached screenshot). Then, in your CSS file, for the “background-image” URL, input the following:
…/images/pattern.jpeg. Be sure to include the two periods at the beginning of the URL (it should be only two periods, not three; I tried to put just two here, but the chat autocorrects it to three for some reason).

Please let me know if you need additional help! I was having the same issue, and this method worked for me. For reference, I got this method from the following article: How to fix CSS background-image not working | HTML/CSS - Coder Coder

2 Likes

Hi @mirthomasson,

I’m struggling with the same issue and I cannot get it right. I include a picture of my html-code.

In my css-file the h1-element looks like this:

h1 {
    font-size: 100px;
    font-weight: bold;
    color: khaki;
    text-align: center;
    background-image: url("./resources/images/pattern.jpeg");
}

My directory is set up like this:

(DASMOTO)
  |-- index.html
  |-- (resources)
        |-- (css)
              |-- style.css
        |-- (images)
              |-- finnish.jpg
              |-- frames.jpg
              |-- hacksaw.jpg
              |-- pattern.jpg

Am I missing something here? Should the background image go into another folder because it’s being called from my css-file and not from my html-file?

When I inspect the <h1>-element in DevTools I get an error saying the background-image file can’t be found, and in Safari it says: Not allowed to load local resource: file:///Users/jcsteltenpool/Codecademy/Dasmoto/resources/css/resources/images/pattern.jpeg
Weird thing is that Safari refers to another path than were the file is actually in: it should be ./Dasmoto/resources/images/pattern.jpeg

Any help is much appreciated!

hey @jooststeltenpool !
FOUND your problem!

Hi @mirthomasson,

Thanks for the quick reply! Unfortunately that’s not it; I’ve been inaccurate in depicting my directory because the files DO have the extension .jpeg (see screenshot).
So it has to be something else…
Schermafbeelding 2022-05-12 om 11.20.40

oh no! okay, create a repository on git and share it with me if you want, I bet i could figure it out then.

Hi @mirthomasson,

Just yesterday I signed in to Github so this is my first attempt to create a repository and share it with someone. The learning curve is steep at the moment but I managed to install Xcode, setting up my git user name and email in git config in the command line, create a repository in VCS and it shows up in GitHub after pushing it so I must say I’m pretty proud of myself! Now for the last step of sharing it with you: how do I do that? Should I make a pull request or is there something else I should do?
Thanks again for your help and time!


Congratulations! I know it’s a lot to take in, (i still have trouble uploading new repositories successfully)
just share that https with me and i can look for your issue!

Here it is: GitHub - jcsteltenpool/dasmoto: Dasmoto Codecadamy project

Sorry for the late response, I was gone all day.
So first thing I would suggest is rename your CSS file ‘styles.css’
pull your css and images out of the resources and just get rid of that folder,
You will then have to change the urls to all your photos but then the banner will work. :wink:



1 Like

Yes, it works like a charm now! Thanks for the suggestions, it really helped me a lot (also because of all the effort I had to put in the whole repository/sharing part which was also very instructive).

The bottomline of your solution I believe is to keep it as simple as possible. Thanks!

1 Like

YAY, happy I could help.
Simple is definitely the best, especially since as we advance there will be more files/folder/coding languages to keep organized per project!
Hope you have a great day, feel free to reach out in the future if you ever have more questions!

1 Like

Hey

well done.
I was thinking maybe you could use more semantic html to categorize and structure your html.
For example main => section => article => img within figure html tag and so on for developers to easier read.
I see you did it with nav tag and that is exactly what im talking about.
If you want i can send mine where i have been using semantic html

and i see you wrote class= price. i did not and i just wrote span html tag. Do you think its better to write with class within span html tag or its just fine with span html tag without class?

The top section with the company name can be done with or without a header element to it, it is up to the developer how to interpret a design. For instance I have used the header element and then placed the image background on it, but the same could have also been done with an h1 alone. it is a matter of preference in some cases where there are multiple ways to do the same thing.

For this specific project, span would be just fine because it is just one page so technically creating a class just for the price was unnecessary but a good habit to develop because as you create larger websites, creating a class instead of using just span I think would be better. Either way though, it works. Sorry haven’t been on the forums in a while.

Thank you. Answered all questions I had before posting.

1 Like

Hi,

I had a really hard time with this project because I’m not studying everyday and I’ve been going very slowly on this journey but I just wanted feedback on my code.

Thank you,
Felicia

Hi Felicia,

It looks exactly as intended so it’s great !
There is two (small) things that can be improved:

  • No need to add font-family: Helvetica; on every selector, since you only use one font just apply the font-family property either by selecting the <body> tag or the universal selector: *. Keeping your code DRY (Don’t Repeat Yourself) is not essential right now but will be later on for your journey
  • It is considered good practice to not skip heading levels - starting with <h1> , then use <h2> , and so on.

You are on the right track on this journey, keep going ! And I hope this feedback hepls :slight_smile:

1 Like

Thank you so much. I’ll use the DRY reminder I like that. I appreciate the help.