Skip to content
OverviewSolutions
20
Comments
24
P

Alexandra

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

  • Ciprian Danila•110
    @cipdanila
    What are you most proud of, and what would you do differently next time?

    Since is my second project, I like it!

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

    I found it quite difficult to make the main image (illustration-article.svg) fit the project requirement on the 'mobile-design' side. For some reason, the image is displayed in the browser at a height of 181px, whereas in reality, it should be 201px! Any help is welcome!

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

    As I mentioned, on the 'mobile-design' side, the main image does not fit the requirement. I must be missing something, I assume...

    Blog preview card (HTML & CSS only)

    2
    P
    Alexandra•580
    @Alexandra2888

    Hello! Congrats for finishing the challenge! Here are some suggestions:

    • implement BEM naming convention;
    • when reseting css, target also pseudo-elements: *, *::after, *::before { margin:0; padding:0; box-sizing:border-box;}
    • use relative units for font-size also (em or rem);
    • avoid margin in flexbox, you can read here more

    https://medium.com/code-writers/margin-auto-in-flexbox-1dd5ebd47bcd#:~:text=%C2%B7%20Takeaway-,Margins%20auto%20in%20flexbox,like%20a%20h1%20%26%20p%20element

    • as Melvin said already for centering a container use grid or flex. Since here you have a 2D layout I would use grid with .container{ display:grid; place-items:center center;}
    Marked as helpful
  • P
    Alexandra•580
    @Alexandra2888

    Hi! Congrats for your solution! Minor things I would improve:

    • reseting also pseudo-elements with *::after and *::before;
    • implementing BEM naming convention, for SCSS nesting is a lot easier;
    • you don't have to nest all classes in the body. You have body{}, .main-content{} etc. Also it's a good practice to keep all media queries at the bottom eg media (min-width:900px){ .header {} .header-bottom {} } Happy coding!
    Marked as helpful
  • P
    Alexandra•580
    @Alexandra2888

    Hi! Congrats for finishing challenge! Your solution is very close to the design! Here are some things I think you can improve:

    • reset also psudo-elements with *::after, *::before,
    • try to use autoprefixer for cross-browser compatibility. Happy coding!
    Marked as helpful
  • P
    Alexandra•580
    @Alexandra2888

    Hi! Congrats for finishing challenge! Your solution is very close to the design! Here are some things I think you can improve:

    • reset also pseudo-elements with *::after, *::before,
    • start coding mobile first (0-768px) and after that increase,
    • add classes for all elements, especially with BEM naming convention. It will help you in bigger projects, will be easier to debug problems and also easier to work with other developers.

    Happy coding!

  • P
    Alexandra•580
    @Alexandra2888

    Hi! Congrats for finishing challenge! Your solution is very close to the design! In general it's better to start coding for mobile first (that means 0-767px) after increase for tablet (min-width:768px) and after that for desktops (width for desktop in general is provided by the design, can be 1024px, 1200px etc). Don't try to keep everything "in place", you can't predict where every px will stay on a user's screen. As Kevin Powell says "px perfect website doesn't exist". A user can see your page from a Nokia 3310, another from a 50 inch screen and another will navigate your site using a screen reader so you can only predict how everything will look. Happy coding and don't stress :D

    Marked as helpful
  • P
    Alexandra•580
    @Alexandra2888

    Hi! Congrats for finishing challenge! Your solution looks very good and it's very close to the design! Only thing that I would do different is using relative units for a responsive design. Happy coding!

    Marked as helpful
View more comments