Submitted about 2 months ago

Recipe Page Solution using Flex and HTML Table

Jeff Guleserian• 480

@jguleserian

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Recipe page

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Greetings, Everyone!

Thank you for taking the time to take a look at my work and give me some feedback. I know your time is valuable, so I am grateful for you critical eye and subsequent suggestions. While much of this project was straight forward, I did find some challenges with formatting the bullet points correctly. I feel happy that I was able to get a better sense on how to manipulate them more competently. In addition, this was the first project that I took advantage of HTML ``, and I think it worked out pretty well.

Finally, I feel like I am more comfortable with GitHub, although it still makes me want to pull out what's left of my hair, as I explain below.

What challenges did you encounter, and how did you overcome them?

My first challenge was the formatting of bullet points. I don't know why this has eluded me so much. The problem comes in trying to create an li::before in the CSS. Once the source is referenced, the problem has been getting the bullet point to sit correctly on the line to match the text to the right. I had to resort to negative margins to help put it in the right place.

My second challenge, as has been consistent with several projects I've done, is my struggle with GitHub. While it is a wonderful tool, I notice that when everything looks good launching my site from VS Code, the same code launched from GitHub may have things missing. This usually occurs when a resource is found in another folder, such as the elipse (used for the bullet point), as referenced in the stylesheet as a "content" resource. It also seems to occur elsewhere, but this is where I noticed it this time. Sometimes taking off the forward slash, /, solves the issue, but sometimes it does not. Got this reason, if you look at the solution on GitHub, two sections are missing the bullet points, but you will of course see them in the screenshot I provided.

Anyway, if anyone has any help with respect to either of these, I would greatly appreciate it, especially navigating the labyrinth of GitHub pages.

What specific areas of your project would you like help with?

As mentioned above, I would be so grateful if someone could take a look at my code and let me know how I can improve, in any area, but specifically with respect to the bullet points and GitHub.

Thank you so much for taking a look at my submission. I appreciate any encouragement or insight.

Happy coding!

Community feedback

Sergei Borja• 680

@wonderlust101

Posted about 2 months ago

Regarding your second challenge, the path for the SVG is not correct. From what I see in github, you structure your files like this:

:root
|assets/
|--images/
|---- ellipse.svg
|styles/
|--styles.css
|index.html
|ellipse.svg     (another copy assume)

Right now in your CSS you got:

content: url("/assets/images/ellipse.svg");

Which assume that there is a folder is styles like below (which is not):

:root
|assets/
|--images/
|---- ellipse.svg
|styles/
|--assets/
|----images/
|------ ellipse.svg
|--styles.css
|index.html
|ellipse.svg

What you need to do is to direct it backwards by using ../ which will result your code looking like this:

content: url("../assets/images/ellipse.svg");

This applies to many coding languages if your dealing with files management. You can also stack them to access nested folders like this:

("../../../path/to/file/file.js");

Hopefully that helped and wasn't confusing.

Regarding your first challenge, I don't know much about it so hopefully someone corrects me if what I say is true or not. The SVG anchor points are usually in the top-left so I assume that's the reason why it shifted down. There has been a few times where I coded some 2D games and I had to shift it to be centered properly so maybe that's the reason. Again, I don't entirely know why but that's my assumption.

EDIT: I'm also not entirely sure why your able to see your markers on VS Code since I don't use it. It might be a setting or something.

Marked as helpful

Jeff Guleserian• 480

@jguleserian

Posted about 2 months ago

@wonderlust101

Wow! Thank you so much for the help. And no, it wasn't confusing at all. I guess when I was writing, I was referencing everything from the perspective of the root folder forgetting all the time that I was in the styles folder. I really appreciate you catching that for me. That really solves some frustration I've been having.

In fact, I just corrected the reference to the .svg (and deleted the extra copy in the root folder - yes, it was there as an attempt to overcome the problem) and it works perfectly. I am so grateful!

Thank you again! And thank you for taking the time to help me.

Jeff

James.• 150

@Jimztech

Posted about 2 months ago

Good job mate.

SemptechVzla• 130

@SemptechVzla

Posted about 2 months ago

great! , i would like to learn how you did this.!

Jeff Guleserian• 480

@jguleserian

Posted about 2 months ago

@SemptechVzla

Sure, @SemptechVzla, what part? If you are talking about the solution to my problem with the bullet point showing up in GitHub, take a look at Sergei's, @wonderlust101, comment above. If it's something, just let me know and I'll see how I can help.

Jeff

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord