Skip to content
OverviewSolutions
7
Comments
7

Marvin

@elMarMar80 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Testimonial Grid Solution

    Marvin•80
    Submitted 4 months ago
    1 comment

  • Beginner Flexbox Four Cards Component

    Marvin•80
    Submitted 5 months ago

    I would like to know if I used flexbox efficiently. Sometimes it feels like I'm abusing flexbox, but I'm struggling to my head around other methods that could better position my elements.

    2 comments

  • Desktop and Mobile Product Preview Page

    Marvin•80
    Submitted 5 months ago

    I could not figure out how to swap the image loaded based on media queries. I wanted to load the mobile version of the image for smaller screens, but I could not find a solution online.

    1 comment

  • Simple Recipe Page Solution

    Marvin•80
    Submitted 5 months ago

    My code is messy. I'm hoping that someone could point me to resources that teach you how to organize your code. I'd also like to see the thought process of someone building a website so I could compare it to my own.

    1 comment

  • Beginner Social Links Profile

    Marvin•80
    Submitted 5 months ago

    I am curious about whether or not my code is properly structured. I'm trying to avoid redundancies while maintaining readability. I'm not certain if I achieved that goal.

    2 comments

  • Blog Preview using a lot of flexbox

    Marvin•80
    Submitted 5 months ago

    I'm curious to know if it's better to build the entire website in HTML before touching CSS or if I should build some of the content with HTML, style it with CSS and then continue the process until the website is built.

    1 comment
View more solutions

Latest comments

  • Marvin•80
    @elMarMar

    Your solution is great, however, I think you added extra padding on Kira Whittle's <p> element. It doesn't look bad, but it does seem a little out of place. Apart from that, great job!

  • Marvin•80
    @elMarMar

    Amazing job! I think it would be nicer if the main content was centered in the middle of the screen, but overall, you recreated the goal design well.

  • Marvin•80
    @elMarMar

    Your solution is almost perfect and your code is very readable. Great job!

  • PresidentTree94•230
    @PresidentTree94
    What are you most proud of, and what would you do differently next time?

    I simply followed the original project and coded the solution with HTML and CSS, but I also added a Dark Mode function in Javascript. Next time, I would like to try it in other frontend languages like ReactJS.

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

    I did not have the Figma to reference so it was a lot of guessing and checking to get it to match the challenge as close as possible.

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

    I am still learning the other frontend languages, such as ReactJS, so any advice involving them would be helpful. A React extension may also be included on GitHub.

    Recipe Page (with Javascript Dark Mode)

    2
    Marvin•80
    @elMarMar

    Your code seems well organized and you almost perfectly recreated the goal image. Amazing job!

  • coyoteshkw•150
    @coyoteshkw
    What are you most proud of, and what would you do differently next time?
    • a is a inline element

    when I use a for button in <li>, I found setting style for a just useless. Only can write css for <li>.

    In the end I found that because <a> is a inline element, it's width fit the content size, not the same as the parent element width like <li>. In fact, I have never encountered such a problem before. My solution is to turn a element into a block.

    .card__button {
  display: block;
  text-align: center;
  padding-block: 1rem;
  background-color: var(--clr-grey-700);
  border-radius: 10px;
  font-size: .875rem;
  line-height: .875rem;
}
.card__button:hover {
  background-color: var(--clr-green);
  color: var(--clr-grey-900);
}
    • flex or not

    When I saw preview picture, the first thing I thought is using flex layout, but finally decided to use normal layout, because I'm not sure using flex layout like crazy is the right thing to do.

    for avatar, I simply used margin-inline: auto to center. All .card__introduction module just use margin-top. But on links module I use flex.

    I do not know if it's best decision, but I did it.

    • use min-width on card

    this time I didn't use fixed width and height, but found that made the card too narrow. If I increase the padding, it won't fit the picture, so I use min-width and larger padding to solve this problem, maybe this isn't necessary, I'll try not to use it next time.

    .card {
  min-width: 326px;
  padding: 1.5rem;
}

/* responsive */
@media screen and (min-width: 768px) {
  .card {
    min-width: 382px;
    padding: 2.375rem;
  }
}
    • :focus can catch tab selection.
    What challenges did you encounter, and how did you overcome them?

    When the card size is less than 300px, the top of the card disappears, and canceling min-width cannot prevent this problem.I would like it to automatically shrink, but this doesn't seem to do that automatically.

    Responsive social links profile

    1
    Marvin•80
    @elMarMar

    Your solution is amazing! I'm just starting out and I've learned so much by reading through your code.

  • Marvin•80
    @elMarMar

    Apart from some spacing and sizing issues, you recreated the goal well! Your CSS and HTMl code are easy to understand and decently organized. I also noticed that one of your img elements didn't have an alt tag. Overall though, nice work!

View more comments