Skip to content
OverviewSolutions
5
Comments
7
P
Artiom
@Artiom-Deyev

All comments

  • webdevbynight•410
    @webdevbynightSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I used microdata to enhance semantics.

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

    Concerning the background image on the first card, I wanted to use the background-position-x property to change the side-related value within the media query where the position of the background image changes, but Google Chrome 128 (and Blink-based browsers) does not support side-related values such as right 80px in such a property. So, I decided to use the background-position property, where Google Chrome supports it.

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

    No particular help requested.

    Testimonials grid section - HTML, SCSS, RWD, grid layout

    1
    Artiom•120
    @Artiom-DeyevPosted about 2 months ago

    The solution include very well constructed semantic html. Very good folder structure for the usage of scss, especially the 'base' folder. The code is easily readable, maybe adding more comments and spaces between the sections would help a little bit, but it's a minor thing.

    The site is well responive, I can see that it has different designs for desktop, tablet and mobile, which is very considerate and well done.

    To be honest, I don't see what improvements can be made. I've noticed the testimonials do differ a little bit in size (so do mine in my solution) but it's a minor thing and I don't think its that important. Well done.

    0
  • L'Alchimisrte•60
    @stephanievanoverbergheSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    RAS

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

    Place the cards as on the desktop design.

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

    I would like someone to help me with flexbox on the desktop device.

    four card feature with Sass

    1
    Artiom•120
    @Artiom-DeyevPosted 6 months ago

    Congratulations on the completed project!

    I took a look at your files in the repo - very good use of variables in css. Also, very good use of "ttf" files for fonts - it's always a prefereable way to implement a font.

    I assume you went with the "mobile-first" approach for the repsonivity, which is a very good approach especcially for this project. However, at a desktop breakpoint, I can't see any way you can position the elements accroding to the design using flexbox. I'd suggest you use Grid for this.

    The index.html file is well structured and easy to unders, I'd only suggest you use more gaps and comments for the lements to help readability (especially if other developers will be working with the code).

    Also, please take a look at the paddings and the font size, because it looks that it differs slightly from the design.

    Overall, once you position the elements on the desktop (I suggest you implement the grid for it) and few corrections of the font sizes and paddings, this will look very good.

    0
  • kingergem•150
    @kingergemSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud that i finished this project even i struggle in making it responsive. I will try to learn different techniques such as flexbox or grid for layouting responsive design.

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

    I struggle a lot on how i will balance the picture and text within the container.

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

    Responsive layouting

    Product preview responsive challenge

    1
    Artiom•120
    @Artiom-DeyevPosted 6 months ago

    Hello.

    I wanted to mention about the picture size (which you mentioned in your challenges) - it looks like the image and the description (or article) both take 50% of the main component.

    One solution could be to make a div for the image, make the image it's background-image, set to 100% height and witdh, the image block to 50% of the main parent component. And do the same to description block.

    Very good use of srcset for the picture, really helps the responsiveness.

    Also, a very good use of comments in styles file. It's always helpful to use comments in html files as well, as it helps its readibility for other coders who might be involved.

    I'd also suugest using classes alongside semantic tags - the semantic approach is done very well, however, using classes can help scalability for a project. I suggest using BEM approach, but there are others methodologies as well (some coders use bootstrap way of naming the classes even when they don't use bootstrap).

    I think once you correct the width of the image and the description blocks, it should be good.

    Also, I'd suggest styling the height (as provided in the design) for the main component (<main>).

    0
  • Riyad Dine•80
    @riyadDineSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    Nothing to say

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

    None

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

    None, but i'm not against any suggestions

    Recipe page

    1
    Artiom•120
    @Artiom-DeyevPosted 7 months ago

    Hello.

    The solution includes semantic HTML, but, if I can suggest, it could've been used a bit more. Not that it's rong, but, for example, instead of "div" in the main tag one could use "article" semantig tag or something like this.

    The html is well structured, readable, however, maybe it's a good idea to add gaps between blocks and also add some comments, it helps other developers to understand the code easier.

    The solution differs a little from the design.

    • The background color for the "main" section is different.
    • The width of the "main" section is narrower then the design.
    • Also, inside the "main" section other elements on a desktop breakpoint have different left and right paddings (it's 32px, it should be 40px, If I'm correct). I guess the approach was mobile-first, which is a very good approach, but it's better to review the desktop breakpoint after.

    CSS is good, good usage of tags and structure.

    Marked as helpful
    0
  • Endy1381•150
    @Endy1381Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    i was proud of me making this kind of near to the original.

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

    My challenge was the redirection to the links.

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

    Any feedback and help will be welcomed.

    Link redirection page

    1
    Artiom•120
    @Artiom-DeyevPosted 7 months ago

    The HTML is very good. Maybe it's a good practice to add some comments for a better readability, but the project is small so there's no big need for this.

    The layout look good.

    The solution doesn't differ much from the desing. The font is slightly lighter in the links, and in the caption in general a little smaller then in the design (but this is me nitpicking).

    Other then that it looks very god.

    Marked as helpful
    0
  • Artiom•120
    @Artiom-DeyevPosted 8 months ago
    • The solution includes semantic HTML.
    • Accessibility seems fine to me.
    • I would suggest that position the main block absolutely in the center by applying:

    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

    is maybe not the best idea, as at narrower screen width (starting at around 440px) could be still wider. However, this is also a valid solution.

    Also, no media queries in the project, however, the design changes (especially the fonts) at a mobile breakpoint.

    • The code is well structured, I appreciate the use of variables in css. In main html file maybe gaps between the blocks and comments would help the readability of the code, but overall it's good.

    • I noticed that the block is slightly wider then in the design - which is understandable, since a different width in the design is provided. I did this too. The icon portrait of the author is smaller in the design.

    0
  • 0rayev•40
    @0rayevSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Next time I would try to do it without flex.

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

    I had some problems with vertically centering my QR code box. I could solve this problem with flex.

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

    I would like to know other methods of centering my QR code box.

    Responsive page using CSS flex

    2
    Artiom•120
    @Artiom-DeyevPosted 8 months ago

    Very good use of variables for css. Just as in my soultion, I see the box-shadow is not applied (I understand this is because the specifics for it are not probided in the design). Very good.

    0