Skip to content
OverviewSolutions
14
Comments
12
P
Jeronimo Palacios
@giropa832

All comments

  • P
    Jeronimo Palacios•280
    @giropa832Posted 3 months ago

    Great job. Here is some feedback:

    • Focus in adapting the design rather than just funcionality. Training your eye to get implementations to be pixel perfect will get you a long way on reeal work experience.
    • Keep in mind usability for the user. There is no need to do validation until the user has pressed the submit button. Doing validation as the user types will increase the javascript load. In simple designs as this one there is not much problem but once you have a high javascript load, you'll probably start getting performance issues.
    • Sice you've opted to use CSS grid, make sure that your design looks well across different browsers and devices. You can use responsively App to test your site.

    Keep up the good work!

    0
  • P
    Jeronimo Palacios•280
    @giropa832Posted 4 months ago

    Great work, the animation looks slick!

    Here is some feedback on the JS.

    Instead of assigning each button via the button selector, you can select all buttons like this

    const buttons = document.querySelectorAll('button');

    To show and hide the share box, you can just simply use a toggle, assigning the same eventListener to each button with a forEach loop, like this:

    shareButton.forEach(button => 
    button.addEventListener('click', () => {
        sharediv.classList.toggle('yourClasstoShowandHide');
    })
);

    Since in this case you only had two buttons to work with, it may not make sense, however it is a great opportunity to practice some Javascript looping.

    Keep up the good work!

    0
  • P
    nikolasladic•120
    @nikolasladicSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Next time I will spend a lot of time planning layout before starting to code. Now I understand how important it is and will take this to my next projects!

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

    I will revisit this one in the future and solve it from ground up

    Meet landing page

    1
    P
    Jeronimo Palacios•280
    @giropa832Posted 4 months ago

    Good work. Here is some feedback:

    • If you check the project files, you'll find different images for different viewpoints (mobile, tablet, desktop) and you can avoid playing with the footer.

    • To introduce the cyan overlay in the footer, you can create an pseudoelement with before that will place the transparent overlay in your image after adding a position:relative on your footer-display class. like this:

    .footer-display::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: var(--cyan-600);
  opacity: 0.9;
  z-index: 1;
}`
    Marked as helpful
    0
  • Crystalis89•380
    @Crystalis89Submitted 4 months ago
    What specific areas of your project would you like help with?

    Advice on semantic HTML, and Accessibility in general. Feel like I am over using , that maybe should use some other more specific tags instead and/or underusing ARIA.

    Reponsive using Grid

    1
    P
    Jeronimo Palacios•280
    @giropa832Posted 4 months ago

    Hi, good solution. Here is some feedback:

    • Focus on the details. There are many areas of improvement that will help you develop an eye for detail, which is fundamental on real work.
    • Structure your HTML using HTML tags. You have plenty of information on MDN. For example, don't repeat H1s. Use h2 and h3s for names and titles. Use blockquotes.
    • In general, try to structure the HTML first without styling and then go for the CSS.

    Keep up the good work!

    0
  • P
    Jeronimo Palacios•280
    @giropa832Posted 4 months ago

    Hi, your solution looks good. I'd like to give you some feedback:

    • To achieve a grid layout of three thirds is best to use display:grid and grid-template-columns: repeat(3, 1fr). That way your layout will be naturally divided in three and then you can configure which cards will go in which section. The way you did it requires a lot of refactoring in case you want to change your code later on.

    • Keep an eye on details. Focusing on details will help you train your eye for future jobs. It's true that 80% of the work can be done in 20% of the time, but that won't work when working profesionally.

    • Keep up the great work!

    0
  • P
    Jeronimo Palacios•280
    @giropa832Posted 4 months ago

    Hi, good solution. Almost matched perfectly the design. Here is some feedback:

    • When organizing your CSS file, bear in mind that order counts. Your media queries are scattered in the middle of different properties. I'd recommend having them properly placed at the end of the file.
    • Use the proper tags on the HTML. You placed all the content within divs. That is not bad per se, however it might lead to a ton of rework when you try to optimize for SEO or accesibility. Using h1, h2, p, etc.. tags helps structuring your HTML better.

    Godspeed!

    Marked as helpful
    0
  • Anyanwu Johnpaul Chinedu•20
    @anyanwujohnpaulSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I am so excited to have embarked on the journey of building the recipe page, It was a basic project and I was happy because I've always known I could do cool stuffs in Web Development, I am also looking forward to tackling the next challenge head-on. All thanks to my friend and the tech community (web dev accountability buddies)

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

    When i get stuck, I reach out to my friend or do some googling and reading of documentations also helped.

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

    NIL

    Recipe Page using HTML & CSS

    1
    P
    Jeronimo Palacios•280
    @giropa832Posted 4 months ago

    Welcome to Frontend mentor an congratulations on submitting your first solution.

    Here is some feedback:

    • Get accustomed to train your eye and try to match perfectly the designs. Often what differentiates a senior from a junior is the attention to details.
    • When developing your CSS, bear in mind that order counts. Things that go up in your file will be trumped by things that are down. Try to put your media queries at the end of the CSS
    • You used sections in your HTML but probably the use of Divs would be a better choice. Make sure that you HTML is well organised and don't be afraid to container the html in.

    You have a great opportunity to review again your solution ans try to get it to Pixel perfect.

    Marked as helpful
    1
  • P
    Jeronimo Palacios•280
    @giropa832Posted 4 months ago

    Hi, good work! Let me give you some feedback:

    • Very elegant way to show custom ordered list numbers.
    • The visuals in your solution and the design do not match properly. It seems just a matter of adjustment though.
    • Instead of using media queries, you can use clamp() to adjust finely for different browsers. It uses less code and lets you finely adjust how your design will be seen.
    Marked as helpful
    0
  • P
    Jeronimo Palacios•280
    @giropa832Posted 5 months ago

    Good Job!

    Remember to update the README if you are planning to use these challenges to showcase your expertise. Good luck with you professional training.

    0
  • P
    Jeronimo Palacios•280
    @giropa832Posted 5 months ago

    Great work!

    Here is some feedback:

    • When resizing the card with developers tools, it slips out on the view. You can resolve this with max-width: min (384px, 90vw) so it ensures that it will never reach 100% of the screen.
    • It must have been difficult to find the exact color in HEX. You can always use hsl(gradient, percentages) to express the colors ad described on the Figma file. You can also add them as variables in your css with :root.
    • Really nice transition when hovering!

    I hope the feedback helps.

    Marked as helpful
    1
  • P
    Jeronimo Palacios•280
    @giropa832Posted 5 months ago

    Nice solution. I'd like to give you some feedback.

    • Was using media queries necessary? the solution does not match the designs in desktop mode.
    • Was absolute positioning the best approach? While the screenshot seems to be correct, maybe implementing a solution with flexbox could be more appropiate.
    • I liked the fact that you rooted colors. It makes refactoring so much easier!
    0
  • Dhanasagar2•10
    @Dhanasagar2Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I am feeling proud to complete this solution and hoping that want to, solve the solution from the next time onwards with the minimal coding.

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

    Because of it was my first challenge in frontend mentor i completed this through by some references for the paths to solve.

    Qr-code component-main-challenge

    2
    P
    Jeronimo Palacios•280
    @giropa832Posted 5 months ago

    Hi,

    This is a great first approach. I am reviewing your solution and I'd like to point some details:

    • Look at the design system (fonts, colours)
    • Try to make the design as pixel perfect as possible. Sizes don't correspond to each other.

    Maybe try to do it with Vanilla CSS and HTML first?

    I wish you the best of luck

    Marked as helpful
    1