Skip to content
OverviewSolutions
9
Comments
13

Eugen

@psdesignroRomania200 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

View more solutions

Latest comments

  • Fatima Abid•110
    @fatemzh
    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

    #sass/scss
    1
    Eugen•200
    @psdesignro

    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
  • Eugen•200
    @psdesignro

    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
  • Eugen•200
    @psdesignro

    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!

  • Eugen•200
    @psdesignro

    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
  • jrgenweb•450
    @jrgenweb
    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

    #sass/scss#gulp
    1
    Eugen•200
    @psdesignro

    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
  • P
    DalaScript•600
    @DalaScript
    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

    #sass/scss#bem
    1
    Eugen•200
    @psdesignro

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

View more comments