Skip to content
Submitted 12 months ago

Recipe Page Solution using Flex and HTML Table

P
Jeff Guleserian•500
@jguleserian
A solution to the Recipe page challenge
Preview (opens in new tab)Code (opens in new tab)

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!

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Sergei Borja•1,130
    @wonderlust101

    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
  • James.•460
    @Jimztech

    Good job mate.

  • SemptechVzla•150
    @SemptechVzla

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

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