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

  • Rilay‱ 80

    @EKriley-ci

    Submitted

    What are you most proud of, and what would you do differently next time?

    je suis fier de rĂ©ussir a rendre mes projet responsives mĂȘme si ce n'est pas parfait au moinse sa s'affiche sur diffĂ©rents Ă©cran et c'Ă©tais le plus gros dĂ©fis , si jamais j'avais a reprendre le dĂ©fis une prochaine fois je vais amĂ©liorer sa flexibilitĂ© pour que la responsivitĂ© ne dĂ©pend pas que du media query

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

    Franchement grùce a l'effort que j'ai fourni sur le défis précédent celui ci ne ma pas s'embler trop difficile

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

    je cherche actuellement comment rendre la taille de mes textes dépendant du viewport donc si quelqu'un peut m'aider en sa je serai vraiment reconnaissant

    Four card challenge with HTML & CSS only

    1

    MarLieDev‱ 140

    @marliedev

    Posted

    Regarding your Question Rilay: try to use the clamp() function

    e. g. font-size: clamp (1rem, 1rem + 1vw, 3rem)

    Your solution looks fine! You could improve your styles by using custom properties and nesting sub-elements (like scss/sass).

    0
  • Manisha3196‱ 100

    @Manisha3196

    Submitted

    What are you most proud of, and what would you do differently next time?

    Maybe try to use less code.

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

    I didn't encounter any special challenges just the small one adjusting all in one container.I used grid for it and solved.

    product-preview-card using HTML and CSS

    1

    MarLieDev‱ 140

    @marliedev

    Posted

    First Look on Desktop looks fine. But when inspecting in Detail there are some inconstistencies.

    • The image extends slightly beyond the edge of the card and has rounded edges on the right side
    • The font-family for price is not correct.

    When changing to mobile view there are even more "problem".

    • The Image swaps to early.
    • The title (h1) is much to big for mobile devices
    • At some point (at around 470px) the button moves outside the box.

    Improvements:

    • check your result in detail and test it extensively! This is a crucial skill!
    • flexbox is best for this kind of layout. At least for the mobile design.
    • have a look at grid in detail. The use of grid-template-rows with percentage values is the reason why your mobile layout is "shot"
    • use lower case names in css and html and usekebab-case style

    Marked as helpful

    0
  • MarLieDev‱ 140

    @marliedev

    Posted

    The Code-Review doesnt-work but the live preview works and looks good. The solutions differs in some part from the challenge (e. g. colors). I like your solution of the table style!

    But you could improve it in some ways:

    • Color-Contrast (the first description in light grey doesnt fit the requirements of 4,5:1)
    • Readability -> Increase the line-height of copy texts and lists (150%)
    • Flexibility -> use custom properties for color, font, text and spacing values
    0
  • MarLieDev‱ 140

    @marliedev

    Posted

    Looks good, but could be improved to mobile devices.

    • The Image is distorted (change the height via media-queries or use an aspect-ration)
    • the padding-settings should be adjusted (use padding-inline!)
    • the list styles could be improved (use padding left and li::marker pseude class)

    Other improvements

    • use custom properties in CSS
    • keep the class-name in lower case
    0
  • balaji282004‱ 50

    @balaji282004

    Submitted

    What are you most proud of, and what would you do differently next time?

    i think i can finish this mini project over a short time than before

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

    not that much but while doing i have little issues in flex box

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

    i think someone can check it for over size of the container

    Recipe page using html and css

    1

    MarLieDev‱ 140

    @marliedev

    Posted

    Well the Screenshot looks good, but the solution is not responsive! Work with relative sizes! The only fixed size for this project you have to set is a max-width for the container (736px). Everything else inside the container should be adjusted in dependence of the container width.

    Improvements:

    • move the styles out into a external css-file
    • find similarities and create global styles (e. g. you dont need a content1/2/3/.. class for every section. The base styles (padding, margin, lineheight, font/text styles could be set up in a "recipe__section"-class)
    • Improve readability and structure (naming of classes, BEM-Methodology, semantic HTML -> figure, section, main, headline hierarchy)

    Marked as helpful

    0
  • AllisonFavour‱ 40

    @AllisonFavour

    Submitted

    What are you most proud of, and what would you do differently next time?

    Same as always, i am proud and happy of not stopping halfway, i got it completed within few hours.

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

    The only challenge i encountered was when i had to decide to either use a button tag and then nesting an anchor tag inside the button for the links or using an anchor tag directly and styling it to look like the button.

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

    The part where they said we should ensure users can navigate the links using a keyboard, i need some clarity on that and how to go about it, although when i am chanced proper google search and a conversation with claude or chatgpt will give some insight which i will intime.

    Responsive social links profile

    1

    MarLieDev‱ 140

    @marliedev

    Posted

    Nice Job Allison. Code structure (HTML and CSS) is readable and looks clear and good. Maybe i wouldn't use a h2 for the location info.

    Regarding your question to the keyboard optimisation: You used anchor tags which is the best options. They don't need a aria-role or tabindex attribute. Navigation and highlighting (:focus, :focus-visible) works fine with these. You should have added a target:"_blank" attribute to the anchor-links. This is just a usability optimization.

    What you could have added is a screenreader optimisation in form of a "screenreader-only"-info that tells blind people a bit more about what will happen when they use the links.

    0
  • Edgar Madrid‱ 50

    @EdgarMadrid

    Submitted

    What are you most proud of, and what would you do differently next time?

    I was able to complete this challenge much faster, and I was also able to use the box-shadow for the first time.

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

    the use of box-shadow, look for the official documentation, also the one of flexbox to align items and make columns and rows

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

    I would like to know if I am using semantic HTML correctly and also the use of styles.

    blog card using flexbox and grid

    2

    MarLieDev‱ 140

    @marliedev

    Posted

    Semantic HTML The overall structure and semantic HTML could be improved. You used too much tags and nested elements too deep in the HTML sructure. Simple is better, also for readability. You used the article-tag too often and not correctly.

    Naming A consistent naming ist crucial!

    • Don't use capitalized variables / custom properties
    // not good
--Gray-500 

//better
--gray-500 

//even better
--color--gray-500)
    • name elements logically to improve readability: img-fondo (why?); better: card__image (have a look at the BEM-methodology)

    ** Structure & Files you don't need a seperate css for mobile. Keep it all in one file and use (if needed) media-, container- or style-queries

    Marked as helpful

    0
  • DmitryIsTrying‱ 10

    @DmitryIsTrying

    Submitted

    What are you most proud of, and what would you do differently next time?

    To be honest, I’m not a complete beginner, but I recently started using Frontend Mentor.

    The work was easy; I mainly wanted to try deploying my first project. In the future, I will take on more challenging projects and try to implement them.

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

    I didn't encounter any difficulties, but I imported a Figma file for the first time; before that, I received links to templates.

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

    If you’d like, you can take a look at the CSS file. Maybe I hardcoded something not very well. But please, don’t nitpick about the fact that I didn’t write classes for the divs.

    Single-page website with a QR code using HTML and CSS

    1

    MarLieDev‱ 140

    @marliedev

    Posted

    Your solutions is good but not perfect!

    You should have used custom properties in css and added variables for colors and spacings.

    Another tip when working with figma design files: use the dev-mode in figma to get deeper insights for variables and spacings. Look at all elements and inspect them correctly. This way you would have set the correct box-shadow parameters: (0 25px 25px rgba(0,0,0 4.77%).

    Marked as helpful

    0