Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Ciprian Danila• 110

    @cipdanila

    Submitted

    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

    Alexandra• 550

    @Alexandra2888

    Posted

    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

    0
  • Daniel 🛸• 44,250

    @danielmrz-dev

    Submitted

    Hello! I'm Daniel and this is my solution for this challenge! 😊

    Very good project to polish HTML and CSS skills. It's quite hard to match the original design of these bigger landing pages without the design file. I enjoyed very much trying though.

    If you have any suggestions on how I can improve this project, feel free to leave me a comment!

    Feedback welcome 😊

    Huddle landing page built with SASS

    2

    Alexandra• 550

    @Alexandra2888

    Posted

    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

    2
  • Daniel Okundaye• 20

    @danokundaye

    Submitted

    I faced two major headaches when attempting this challenge:

    1. While styling the radio buttons, I realized that I could only modify the width; everything else I attempted to apply failed to appear on multiple browsers where I tested the site.

    2. The radio button styles do not appear on iOS devices but do show up on Android. I am wondering if anyone else encountered similar problems while working on this challenge and if there are possible solutions.

    Responsive BMI Calculator using CSS (Bootstrap), HTML and Javascript

    2

    Alexandra• 550

    @Alexandra2888

    Posted

    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

    0
  • Alexandra• 550

    @Alexandra2888

    Posted

    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!

    1
  • Christian Palacios• 340

    @codepalacios

    Submitted

    Hi everyone, media queries are a bit difficult for me and I would really appreciate advice on best practices on this or alternatives to better ways to use them in this project for a better user experience.

    Regards :D

    Suite landing page

    2

    Alexandra• 550

    @Alexandra2888

    Posted

    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

    1
  • Alexandre-Simoes361• 80

    @Alexandre-Simoes361

    Submitted

    If there is anything about my code you feel could have been handled better, feel free to let me know. I myself would have preferred to have kept the CSS shorter, especially because a lot of classes had to be used for just one or two lines of code. In any case, I tried to use as many blanket rules as I could to keep the document size down.

    Order Summary Component Card using flexbox and custom properties

    1

    Alexandra• 550

    @Alexandra2888

    Posted

    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

    1
  • Guerinik Abderrahmane• 480

    @AbderrahmaneGuerinik

    Submitted

    QR code component with a small animation ! Any feedback or suggestion to improve the code is welcome ! thank you :)

    QR code component

    1

    Alexandra• 550

    @Alexandra2888

    Posted

    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

    0
  • Alexandra• 550

    @Alexandra2888

    Posted

    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

    0
  • Alexandra• 550

    @Alexandra2888

    Posted

    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!
    0
  • Solo Incrementing• 40

    @Solo-Incrementing

    Submitted

    • Are there any parts to my code which are not best practice that I should avoid doing?
    • Is there anything I should do to improve my workflow?

    Simple QR code page

    2

    Alexandra• 550

    @Alexandra2888

    Posted

    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!
    0
  • Alexandra• 550

    @Alexandra2888

    Posted

    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!
    1
  • Toluwalase• 160

    @Tolux001

    Submitted

    ♈Hello, Coding Community

    This is my solution for the Stats Preview Card

    Had a lots of fun building this challenge under record time!

    I also got to know about Google page speed Insight, which helped me in page speed optimization. I Scored 97% on Google Page speed Insights! 🤯🤭😬

    Layout was built responsive via MOBILE FIRST WORKFLOW

    Feel free to leave any feedback and help me to improve my solution (or) make the code clean!

    I made some custom tweaks to my code` CUSTOM TWEAKS..🌐 : I used Global declaration for variables :root{} Added smooth box shadow that roll out the shadow every 4s.

    Also some hovering on the card while in desktop mode. 👨‍💻 Follow me in my journey to finish all newbie challenges to explore solutions with custom features and tweaks Ill be happy to hear any feedback and advice!

    Reponsive Page Built Using CSS Flexbox

    3

    Alexandra• 550

    @Alexandra2888

    Posted

    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

    2