Dasmoto's Arts & Crafts

Hello,

This is my first ever post in the forum so hopefully I’m doing it right and in the right place. Absolute beginner here and just completed the Dasmoto’s Arts & Crafts project in the web development course. Looking for constructive feedback from anyone who has the time! :slight_smile: . I feel like I’ve got a result but I’ve probably missed a whole host of stuff!

This is the spec provided:

Spec: dasmotos-arts_redline.jpg (1600×1800) (codecademy.com)

I’ve added my code here: Wally189/Dasmoto-s-Arts-Crafts: First codeacademy project - for feedback purposes (github.com) . It’s the first time I’ve used GitHub so I suspect I mayn’'t have done it fully right. Again, feedback appreciated!

Be gentle!

Thanks

1 Like

Edit: I wrote a lot. I hope it’s not overwhelming.

You can deploy your page as a webpage on github itself so we can see and inspect the page without having to download the project, and it’s both free and easy to do once you know how. Just go to your project’s repo, then click Settings, scroll down to the GitHub Pages section, choose a branch and specify the folder with your index.html (the default /(root) is correct for your page). This is optional, but also really cool since it allows your github to function as both a code repo and a portfolio site.

How does your site look when you open it in the browser locally? This is what it looks like when I download and open it in the browser:

Here’s why:

You need to point to the current relative path of your images and css (.\ represents the same directory the html file is in). (Remember the background image in the CSS too).

After fixing the paths, one of the images still doesn’t show. Line 34 says <img src=".\finnish.we" alt="paint brushes and picture frames">. This is a typo, change finnish.we to finnish.webp.

None of your <br> tags are necessary. Block level elements (header, divs, h1-h6, p, main, etc.) will automatically occupy a new line unless modified with css. Removing all of the <br>s will fix your white space issues so you match the spec, though you’ll need to adjust your header’s margin. Still, better to use margin and padding to control white space than <br>.

Use paragraph tags <p> for the item descriptions. You could instead simply change the font-weight for the <h4> tags, but really <p> is the more appropriate tag.

Header, h2, h3, and the blue text spans all look good, and good job with the alt text for people who are visually impaired.

5 Likes

Thank you kindly for the feedback.

I think I’ve ‘solved’ the Github issue habving watched a tutorial so I’ve cleaned it up - I hope you can see all of the files here: [https://github.com/Wally189/Dasmoto-s-Ars---Crafts]

When I view the page locally I see something like this:

I’m not sure why I used h4 elements; p make so much more sense - that’s a good lesson for me to review any code going forward to check the elements are the most accurate! I’ve updated the code to reflect this.

Thanks again - really appreciate the feedback. I’m literally just starting so it’s definitely welcome :slight_smile:

It doesn’t look like you’ve pushed the new changes to your github yet, but your local version is looking mostly correct now. The h1 just needs larger top and bottom margins, and then it should look perfect. Good work.