Skip to content
OverviewSolutions
19
Comments
62
P
Alper
@adonmez04

All comments

  • John Davidson•210
    @John-Davidson-8Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?
    • I am pleased with this project because I learnt the basics of CSS Grid and in particular Grid with media queries to create the collage for desktop.
    • Also, in the CSS I attempted to group classes and elements together in an attempt to write less code. I have a bad habit of repeating code in the CSS file unnecessarily. Not having I don't think any redundant code. Although, I may be wrong, when someone looks at it! lol.
    • What would I do differently? Maybe not use section element for each testimonial card.
    What challenges did you encounter, and how did you overcome them?
    • CSS Grid takes time to get my head around. I think this is the third or fourth project in which I have attempted to use it. It does take time, but I think I am slowly getting to grips with it.
    • Organising HTML has always been a problem for me. I tend to overdo it with the divs and containers, however in this project I have calmed down a bit!!
    What specific areas of your project would you like help with?
    • Organising my HTML and when to use semantic elements and which semantic element to use and when to use divs for styling purposes.
    • Naming classes appropriately is another issue I could do with help on. I attempt to make the class names as descriptive as possible.

    Responsive Page built with CSS Grid

    2
    Alper•1,010
    @adonmez04Posted 3 months ago

    This challenge is really hard... Make sure you solve it over and over again when play with some grid features. It'll be a milestone in your coding journey... Just a few quick tips:

    • You can use align-items: start; for your flex-avatar class to avoid stretching images. And you can set a min-height to keep your images viewable like img { min-height: 2rem } etc.
    • Have fun...
    • My comment here is done...
    • But you didn't give anything for the Grid features...
    • Flies away :)
    Marked as helpful
    0
  • Byron•2,290
    @byronbyronSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Hello ladies and gentlemen! Here's my nice little Results summary component. I hope you like it! ❤️ 🎉 🎉 🎉

    Results summary component

    1
    Alper•1,010
    @adonmez04Posted 4 months ago

    Hi, @byronbyron. That's a good solution, keep coding. Here are a few tips:

    • You don't need to use the min-width: 375px; for your body element . You can easily remove it...
    • You can add flex-wrap: wrap; to your .summary-list li selector. Using wrap on your items avoids overflow...
    • You don't need to use normalize.css. Browsers have good support and browser compatibility works very well nowadays...

    Keep coding and have a nice day...

    0
  • Jaime Dargallo•60
    @jaimedargalloSubmitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud to have taken the first step on this journey.

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

    Using semantic HTML5 markup would have taught the importance of creating structured and meaningful content that search engines and screen readers can easily interpret.

    How to create flexible layouts that can adapt to different screen sizes and devices. I would have also learned how to control the alignment and distribution of content within the layout.

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

    Centering... 😢

    QR code component using Flex css #vite

    1
    Alper•1,010
    @adonmez04Posted 9 months ago

    Hi, just a quick tip, unfortunately there's no easy way to learn how to make our code responsive. I highly recommend this free course to understand how to work responsive code: https://courses.kevinpowell.co/conquering-responsive-layouts

    I learnt many things from this course thanks to Kevin...

    0
  • André dos Santos Nascimento.•10
    @andreDosSantosNascimentoSubmitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    I felt proud to remember the pure CSS concepts I hadn't used in a while.

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

    Without any difficulty

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

    I would like to receive a review on the quality of the code.

    Recipe page using mobile first!

    2
    Alper•1,010
    @adonmez04Posted 9 months ago

    Hi @andreDosSantosNascimento. That's a good solution. Keep coding. Here are some quick tips for you:

    • You can set the max-width: 736px; for your header and main elements. That's the correct value for their max-width length from the design file.
    • You don't need too many reset declarations. They affect your code in ways that you won't notice. Look at this modern reset: https://piccalil.li/blog/a-more-modern-css-reset/ Check out some other resources and create your own reset file. Don't add too much code to it.
    • You can use the display: block; and max-width: 100% declarations on your img element (as a reset declarations). The display: block; declaration will remove the extra line at the bottom of the image, because the img element has the display: inline; declaration and it creates some an extra line at the bottom of the images.
    • You can also add the box-sizing: border-box; declaration as a reset css. You don't have to give it to every element.
    Marked as helpful
    0
  • Rebecca Padgett•1,840
    @bccpadgeSubmitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    Hey everyone,

    This is my solution to the Project tracking intro component. All feedback is welcome and greatly appreciated.

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

    I would like feedback on the mobile version of my website. I have an iPhone SE and can't scroll past the image to see the section content. I have the transform CSS property on my image.

    section < img{
  transform: translate(10%) scale(1.1);
}

    I am unsure if that is causing the issue and if you have any suggestions, please let me know.

    Thanks, Rebecca

    Responsive Project tracking intro component using HTML, CSS & JS

    2
    Alper•1,010
    @adonmez04Posted 9 months ago

    Hi, I couldn't scroll your page using Brave and Firefox on the desktop. I think there's a global problem with your code.

    0
  • Aizirek•140
    @nurlanova2012Submitted 9 months ago

    I just completed an exciting challenge from "Frontend Mentor". Please leave your comments and suggestions. Thank you for your time! ⭐️⭐️⭐️⭐️ ⭐️

    Social-link-profile using HTML&CSS

    3
    Alper•1,010
    @adonmez04Posted 9 months ago

    Hi @nurlanova2012. It's a clear solution. Keep coding. Here is a little tip for you:

    • You can add these declarations to your img tag to make it responsive.
    img {
display: block;
width: 100%;
max-inline-size: 100px;
min-inline-size: 50px;
margin-inline: auto;
block-size: auto;
object-fit: cover;
aspect-ratio: 1 / 1;
}
    • You can play around with these properties and their values to see how they affect your image element.
    • You don't have to use all of them at once, but it's good to know how to use them in your project.
    Marked as helpful
    0
  • Alper•1,010
    @adonmez04Posted 9 months ago

    Hi @RevadiSundaram. That's a good solution, keep coding. Here are some tips for you:

    • You don't need to use the width property for your container element. Use max-width or max-inline-size instead. You can use the declaration max-width: 800px; instead of the width: 800px; in your main element. This will make your container element responsive. You also will need to change the width: 300px; declaration for the media at-rule to max-width: 300px;

    • You can give your img element max-width: 100%; and display: block; which will make your img elements responsive.

    Note: Try to solve the same challenge at least twice, it will teach you something different each time.

    I hope these will help you. Keep coding and have a nice day...

    Marked as helpful
    0
  • Rebecca Padgett•1,840
    @bccpadgeSubmitted 10 months ago

    Hello everyone,

    This is my solution to the Intro component with Signup form challenge. I changed the the background color and button text color to fix the contrast issue so it not going to look like the design files. All feedback is welcome and greatly appreciated.

    Thanks,

    Rebecca

    Responsive Signup form using HTML, CSS & JavaScript

    2
    Alper•1,010
    @adonmez04Posted 10 months ago

    Hi @bccpadge, that's a good solution. Keep coding. I haven't solved this challenge yet, but I can give you some quick tips:

    • You don't need to use the width property for your form class. This breaks the responsive behavior of HTML, use the max-width or max-inline-size property instead. In fact, it's better not to use the width and height properties in CSS with explicit values (the width property can be used with the percentage size unit, it behaves the same as block-level elements).
    • You can add the max-width property to your form__headline class to avoid making your button the full width of the page.
    • You can use the flexbox for the components and you can use the grid for an entire layout, but it's a good project to get some practice with the grid property.

    I hope these will help you. Keep coding and have a nice day...

    Marked as helpful
    0
  • Alper•1,010
    @adonmez04Posted 10 months ago

    Hi @seanbuckle. It's a good solution, keep coding. Here are some tips for you:

    • I don't think you need this declaration: flex: 1 1 11.2rem;. If you assign an explicit size to flex-basis, it'll break the natural behavior of the HTML. You can use flex: 1 instead. This means, flex-grow: 1;, flex-shrink: 1; and flex-basis: 0%;. So your elements will share the area as the 50%, (if there are 2 elements in one row like this project) that's exactly what you want.
    • To keep your HTML clean, you don't need to give your list items a class to . You can use the .card__list > li selector to style them. It works the same way.

    I hope these will help you. Keep coding and have a nice day...

    Marked as helpful
    0
  • Alper•1,010
    @adonmez04Posted 10 months ago

    Hi @varisDogukan. That's a good solution. Keep coding. Here are some tips for you:

    • You don't need to use h4 tag here <h4>London, Unit Kingdom</h4>, you can just use p tag easily and to give a highlight class to style it, like <p class="highlight">London, Unit Kingdom</p>
    • I don't think it's a blockquote. So you don't need to use the blockquote element here, <blockquote>Front-end developer and avid reader.</blockquote>. You can just use the p element for the text easily and give it a class to style them.
    • You can use the list element to organize your menu items. It will be more manageable. So you can use like this,
    <ul class="link>
<li><a class="link">GitHub</a></li>

    Be sure to add the href attribute to your a elements. This tells to the browser that it has a link, and you can use some pseudo-classes with this way. Otherwise, some pseudo-class selectors don't match this element like :link, :active etc. So, you can follow everything this way for the a element, if you want to use it as the link <a href="#" class="link">GitHub</a>

    • Never give your elements the height property. It's not a good practice and will break everything. If you want to add some space inside the elements, use the padding property, especially for the top and bottom. Be careful, the element takes its width value from its parent, but the parent takes its height value from its child. Everything is nested in HTML and CSS. Don't break this default behavior by giving the explicit values.
    • You don't need to use the grid property for your .list class. The grid property doesn't work like flex, it won't do anything if you don't assign any declaration to it.
    • I think this declaration is complicated to give your container class a width value, min-width: min(95%, 384px);. You can use max-width: 384px and change the styles of the main element to flexbox, such as
    display: flex;
justify-content: center;
align-items: center;

    I hope these will help you. Keep coding and have a nice day

    Marked as helpful
    1
  • dpiskov•50
    @dpiskovSubmitted 10 months ago

    I'd appreciate any suggestions on how to improve this if any :)

    I'm new to html and css so I'll appreciate any advice on how to improve my skills.

    Social Links Profile

    1
    Alper•1,010
    @adonmez04Posted 10 months ago

    Hi, @dpiskov. That's a good solution. Keep coding. Here are some tips for you:

    • You don't need to use the span element for the text, you can use the p element instead of the span like this:
      • <span>London, United Kingdom</span>
      • <p>London, United Kingdom</p>
    • You can use the a element instead of the button. The anchor element is more semantic than the button, especially when used within the list items.
      • <li><button>GitHub</button></li>
      • <li><a href="#">GitHub</a></li>
    • You don't need to use the display: grid; rule for list items. Grid has no effect on the grid-container and grid-items when you don't use any grid features, it doesn't work like the flex. You should assign some declaration if you want to use grid features. So, in this scenario, it doesn't have any impact on your items. Use a { display: block; } declaration to give the a elements some padding and margin.

    I hope these will help you. Keep coding and have a nice day

    Marked as helpful
    0
  • Alper•1,010
    @adonmez04Posted 10 months ago

    Hi @seanbuckle. It's a good solution. Your modifications to the design look very cool. Here are some tips:

    • You can use the article semantic element instead of the <div class="card">.
    • Be careful when using the hr HTML element. It also separates the content semantically. You can use border-block-end instead of the hr element.

    I hope these will help you. Keep coding and have a nice day

    Marked as helpful
    0