Skip to content
OverviewSolutions
20
Comments
24
P
Alexandra
@Alexandra2888

All 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
  • 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:

    • use semantic HTML instead of divs,
    • reset also pseudo-elements with *::after, *::before. 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:

    • implement semantic HTML,
    • make CSS reset: *, *::after, *::before {margin:0; padding:0: box-sizing: border-box;};
    • try to use either classes or ids,
    • choose better names for classes or implement BEM naming convention. It will be easier in bigger projects and when you will work with other developers,
    • convert px into relative units (em/rem). Px are usually used when coding for magazines/newspapers and you need fix units. Happy coding!
    Marked as helpful
  • P
    Alexandra•580
    @Alexandra2888

    Hi! Congrats for finishing challenge! Here are some things I think you can improve:

    • use semantic HTML,
    • choose better names for classes, especially BEM naming convention is very useful,
    • make CSS reset: *, *::after, *::before {margin:0; padding:0; box-sizing: border-box;};
    • convert px into relative units (em/rem). Px are used mainly when coding for magazines/newspapers and you need fix units,
    • use shorthand properties eg for margin, padding,
    • make variables in :root{} eg for colors,
    • add in body tipoghraphy properties eg font-family, line-height etc,
    • don't use inline styles, in a big project will cause you a lot of bugs because of specificity,
    • add alt attribute for images, also check again src because svgs are not displayed. Happy coding!
  • 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 default CSS with *, *::after, *::before {margin:0; padding:0; box-sizing:border-box};
    • convert px to relative units (em/rem). Coding in px is usually for magazines/newspapers when you need fix units,
    • make variables in :root{} ex for colors here,
    • implement BEM naming convention eg .card__qr-code {}. I t will help you in bigger projects and wh you will use SCSS. Happy coding!
  • P
    Alexandra•580
    @Alexandra2888

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

    • reset also pseudo-elements with *::after, *::before,
    • implement BEM naming convention in CSS so your code will be more maintainable & cleaner,
    • use relative units (em, rem) instead of px not only for font-size. Px are preferred when you code for newspapers/magazines,
    • add aria-label for buttons for screen-readers. Happy coding!
  • 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:

    • use semantic HTML,
    • use figure for img,
    • reset also psudo-elements' styles: *::after, *::before,
    • use relative units instead of px (px are recommended mainly if you code for a newspaper or magazine),
    • implement BEM naming convention, it will help you to keep your code cleaner, more organized, mainly when you will work with SCSS.

    Happy coding!

    Marked as helpful
  • P
    Alexandra•580
    @Alexandra2888

    Hi! Congrats for finishi9ng challenge! Your solution is very close to the design!

    For border-radius you can border-radius shorthand: top->right->bottom->left. So if you need only left & right would be: 0 10px 0 10px for eg.

    Other advices for improvement:

    • add aria-label for button,
    • add for reset also *::after, *::before to target pseudo-elements also,
    • implement BEM naming convention, it will help you in larger projects for cleaner & more maintainable code, mainly when you will use SCSS. Happy coding!
    Marked as helpful
  • P
    Alexandra•580
    @Alexandra2888

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

    • use more semantic tags eg section
    • split your code into components eg Title, Description...
    • don't hardcode text, make a data.js and retrieve data from there

    Happy coding!

  • P
    Alexandra•580
    @Alexandra2888

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

    • use more semantic HTML instead of divs,
    • use figure to wrap img tag for screen readers,
    • don't leave alt tag empty,
    • you can implement BEM naming convention, it will help you in larger projects and when you will use SCSS also.

    Tip in larger projects: when you have multiple html, css files use folders: index.html (main file, stays in root of the project) css/common.css (if you have common styles from all html, to avoid code repetition) /styles.css (styles from index.html) /news.css(styles from news page) news/news.html(page for news) js/main.js(js for index.html) /news.js(js for news.html) Happy coding!

    Marked as helpful
  • P
    Alexandra•580
    @Alexandra2888

    Hi! Congrats on finishing challenge! It looks so close to the design and having a backend too is awesome! The only thing I suggest is making subfolders like header/Header.js & Header.scss, I find it helpful in large projects. Happy coding!

    Marked as helpful
  • P
    Alexandra•580
    @Alexandra2888

    Hi! Congrats for finishing challenge. Things I think you can improve:

    • start CSS from mobile (0-768px) and after that increase width,

    • you need a wrapper for image and text for mobile .wrapper { display: flex; flex-direction:row;} for bigger .wrapper {display: flex; flex-direction: column;}

    • use more relative units, we should use px only for very small lengths or when coding for magazines/newspapers,

    _- implement BEM naming convention, it will help you in larger projects to keep readability and cleaner code and also when you will use SCSS at nesting classes. Happy coding!

  • P
    Alexandra•580
    @Alexandra2888

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

    • more semantic HTML instead of divs,
    • a figure tag to wrap img for screen readers,
    • when user goes nowhere when clicking you can use button instead of a tag,
    • implement BEM naming convention in CSS, it will help you in bigger projects for cleaner code & improving readability, especially when you will work with SCSS and nesting. Happy coding!