Skip to content
OverviewSolutions
9
Comments
13
Eugen
@psdesignro

All comments

  • Fatima Abid•110
    @fatemzhSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I wrote my first JavaScript lines and I understand how the DOM works. I'm proud of learning how to manipulate the DOM and seeing the immediate impact of my code on the webpage. Next time, I would spend more time planning the structure of my HTML and CSS to ensure a smoother transition between mobile and desktop views.

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

    I struggled with juggling between CSS and JavaScript for displaying or hiding different div elements. Ensuring the HTML structure was well-organized was tricky because the layout for mobile was different from the desktop version, requiring some modifications to the HTML structure. I overcame these challenges by adopting a mobile-first approach, meticulously adjusting the layout for desktop, and thoroughly testing each change.

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

    I have an issue where elements are displayed incorrectly when switching from desktop to phone and vice versa without refreshing the page. I need help understanding how to manage state and events in JavaScript to ensure the correct elements are displayed without requiring a page refresh.

    Article preview component

    1
    Eugen•200
    @psdesignroPosted 4 months ago

    Hi Fatima,

    Your solution looks good. Regarding the layout, I suggest you shoud add more padding for the thext some line-height for p and also a bit more width for the image.

    I can't give you an extended feedbak regarding JS because it's also new for me, but you can check my solution, because I see that you have wrote a lot of code, and I achieved the desired functionality with 4 lines of JS.

    const shareIcon = document.getElementById("share-icon"); const shareBox = document.getElementById("share-box"); shareIcon.addEventListener('click', function(){ shareBox.classList.toggle('show'); });

    I used classList toggle method to add/ remove the class for the share tooltip.

    Check here https://psdesignro.github.io/article-preview/ how it works!

    Marked as helpful
    1
  • Eugen•200
    @psdesignroPosted 4 months ago

    Hi!

    It looks good, nice job!

    I have noticed some aspects you can improve still:

    At first glance, the text weight for the bold heading is a bit different. Also the colored stripe at the top of the cards has a little trick. If you zoom in the design, you'll notice that it is curved only on top and straight at the bottom. You can achieve this by adding and empty div with 4px height, and set overflow:hidden on parent. You can check my code for details.

    Also, for the desktop version, I recommend using grid instead of flex with wrap, because on large screens (for example on my 24inch monitor) all the cards are aligned in a row, as the flex container has more room and they don't wrap.

    Keep up the good work!

    Marked as helpful
    0
  • Eugen•200
    @psdesignroPosted 4 months ago

    Good work!

    There are some aspects you can keep in account for you future updates.

    The background color or the entire body is beige/cream, and has a better contrast than the pink.

    Spacing is very important when it comes to readability, so increasing the line-height for body text and adding some margin-top to h1 would help here.

    Also use a visual hierachy for heading and body text. On light backgrounds, the body text should be a little lighter.

    Even some devs consider <table> deprecated, for tabular data it works just fine and you can consider it in future projects.

    Keep up te good work. All good!

    0
  • Eugen•200
    @psdesignroPosted 4 months ago

    Nice work! I remember this challenge was harder than expected at first sight.

    You should use a relative unit (rem or %) for line height also, or downsize a bit the product title. Check too the font weight, because it seems to be thinner for title and button label.

    Also it look like because you used height: auto, it doesn't fill the entire height, and you have a strange margin on top and bottom. You can set the height to 100%, and let the width on auto, also set the object-fit:cover.

    Keep up the good work!

    Marked as helpful
    0
  • jrgenweb•450
    @jrgenwebSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    managed to do it, better thought out css classes

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

    the margin paddings, but I almost managed to do it

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

    e.g. I gave fixed widths for the images, probably not the best solution. I actually just tried the gulp, postcss, autoprefixer packages and breaking them into sass files.

    Meet landing page

    1
    Eugen•200
    @psdesignroPosted 4 months ago

    Hi, looks pretty good!

    You can try to set some negative margins to the hero images + overflow:hidden, to have the "cut" effect from the original design.

    Also for the footer, the H2 should be left aligned for desktop.

    However, your code is written cleaner than mine :)

    Marked as helpful
    1
  • DalaScript•530
    @DalaScriptSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?
    • I am proud that I completed the project successfully, easily, and quickly. ✅🚀
    What challenges did you encounter, and how did you overcome them?
    • Nothing special. 👍
    What specific areas of your project would you like help with?
    • Any advice is appreciated. 💡💬

    Responsive Testimonials grid section using Flexbox, SCSS and BEM

    1
    Eugen•200
    @psdesignroPosted 4 months ago

    Nice work. The screen looks very close to the original and the css is very well organised!

    1
  • Simon•40
    @BlackCroUKSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Matching the border-radius of the card element to the border-top gave the desired effect for the coloured line. If the border radius was different, the colours curved slightly at each edge.

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

    Finding an elegant solution to positioning the outer cards in both desktop and mobile view.

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

    Targeting main, header, h1 etc and their nested elements directly within CSS.

    Flex column switches to grid for mobile stacking

    1
    Eugen•200
    @psdesignroPosted 6 months ago

    Looks great and your code is very well structured. I had a bit another approach for those top borders, as setting border-top + radius looks a bit different than the original. But you solution looks cleaner to me, nice job!

    1
  • Eugen•200
    @psdesignroPosted 7 months ago

    Great work! It looks pretty much like the original!

    I noticed that you've used a different icon than the one provided in the assets.It's not a big deal in this case, but sometimes it can be something custom and we need to add the svg provided by the client.

    Also as part of the challenge was to use a CSS pre-processor and a mobile first approach, but it looks like you've used plain CSS and a desktop first approach.

    Marked as helpful
    1
  • Sergiolunabellido•40
    @SergiolunabellidoSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    na

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

    na

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

    na

    Proyecto 4 frontend mentor

    1
    Eugen•200
    @psdesignroPosted 7 months ago

    It's a good start, but it looks like you've missed some styling. The heading font is different, the paddings, separator color etc.

    Also the table is out of the recipe container. And even if we see it as a tabl, I suggest to use dispay:grid, because it's easirt to write and maintain.

    Cheers!

    0
  • Eugen•200
    @psdesignroPosted 7 months ago

    Hi, the design looks good, however there are some differences in the text vertical spacing (between the lines of text). Also, the buttons don't have the required height and the font-weight should be bold.

    One more thing, that I think wasn't mandatory, but good to be done, is the anchor links for the buttons.

    Keep up the good work!

    0
  • bea-jpg•130
    @bea-jpgSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    Working speed.

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

    None

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

    None

    blog-preview-card-main

    2
    Eugen•200
    @psdesignroPosted 7 months ago

    Great job! The code is well structured and clean. It lookes like it's a bit narrower than the original, and the line-height for the description is smaller. Also according to the figma file, the author text font size should be smaller and the same on mobile and desktop.

    0
  • Eugen•200
    @psdesignroSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I learnt how to resize font depending on viewport width without using media queries

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

    I had some problems with positioning the annotation in the right bottom corner, because of the overflow and horizontal scroll, but found a solution.

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

    I couldn't find a proper solution for vertical overflow, but it may be due to the small laptop screen I was checking. So I added a top padding for the main container, and in this case, the card doesn't stick to the top.

    Blog card using CSS

    2
    Eugen•200
    @psdesignroPosted 7 months ago

    Hi, Thanks for the feedback. The overflow:hidden also disables scroll on a smaller window too. I think I'll explore more later, for now I'll leave it like this

    0