Skip to content
OverviewSolutions
17
Comments
29
Aykın Sancaklı
@aykinsancakli

All comments

  • Kurt3z•80
    @Kurt3zSubmitted 7 months ago
    What specific areas of your project would you like help with?

    Hello everyone, I'm having a small problem in my solution.

    By hovering over the "Continue" button, when the cursor leaves the element, it flashes white. On the .btn selector, I'm using the transition property to create a smooth effect, and that may be what is causing the issue. I wasn't able to find any fix that wasn't completely removing the transition property and the effect.

    If anyone could be able to expend some of their time trying to help me understand why this issue occurs, I would be extremely grateful.

    Thanks in advance.

    Results Summary Component using HTML and CSS

    4
    Aykın Sancaklı•680
    @aykinsancakliPosted 7 months ago

    Hello @Kurt3z,

    The background property itself is not animatable in CSS and gradients in CSS use background images, you cannot use a transition to a new one like you would text color. Also when you applied a linear gradient directly within the hover and active states, the transition property didn't have a defined starting point to transition from (e.g. initial color is red, wanted color is blue) because the default background was a solid color.

    Hope this helps.

    Aykın

    Marked as helpful
    1
  • Anton•30
    @Antonx95Submitted 9 months ago

    Hello everyone, this is my first challenge completed, I would like to know if the width of this page is correct as the challenge requested or i understood wrongly. Thank You in advance

    QR Code Challenge

    2
    Aykın Sancaklı•680
    @aykinsancakliPosted 9 months ago

    Hello @Antonx95,

    Your solution looks great!

    📌 A Couple of suggestions:

    • After <body> tag you can wrap your content inside the <main> tag. The <main> HTML element represents the dominant content of the <body> of a document. This way you are denoting that the part inside the <main> element is the core content of your website.
    • Instead of using generic <div class="container"> you can use <article> element that specifies independent, self-contained content (e.g. product card, a forum post).
    • Those are Semantic HTML elements and they add meaning to content for better understanding by browsers, developers, and accessibility tools, improving overall web page structure and SEO.
    • You can add the attribution <div> after the card so that it will not take part in the card element but end of the body.

    Hope this helps, great work overall!

    Cheers,

    Aykın

    Marked as helpful
    0
  • Aykın Sancaklı•680
    @aykinsancakliPosted 9 months ago

    Hello @turtlejinjin,

    Your solution looks great!

    📌 A Couple of suggestions:

    • After <body> tag you can wrap your content inside the <main> tag. The <main> HTML element represents the dominant content of the <body> of a document. This way you are denoting that the part inside the <main> element is the core content of your website.
    • Instead of using generic <div class="container"> you can use <article> element that specifies independent, self-contained content (e.g. product card, a forum post).
    • Those are Semantic HTML elements and they add meaning to content for better understanding by browsers, developers, and accessibility tools, improving overall web page structure and SEO.

    Hope this helps, great work overall!

    Cheers,

    Aykın

    0
  • Aliho•50
    @A-l-i-h-oSubmitted 9 months ago

    Hi everyone!! ^^

    I propose this solution, do not hesitate to give me your opinion, that will allow me to improve because I begin.

    Thanks a lot!

    Social links profile in HTML and CSS

    2
    Aykın Sancaklı•680
    @aykinsancakliPosted 9 months ago

    Hello @A-l-i-h-o,

    Your solution looks great!

    📌 A Couple of suggestions:

    • After <body> tag you can wrap your content inside the <main> tag. The <main> HTML element represents the dominant content of the <body> of a document. This way you are denoting that the part inside the <main> element is the core content of your website.
    • Instead of using generic <div class="container"> you can use <article> element that specifies independent, self-contained content (e.g. product card, a forum post).
    • Those are Semantic HTML elements and they add meaning to content for better understanding by browsers, developers, and accessibility tools, improving overall web page structure and SEO.

    Hope this helps, great work overall!

    Cheers,

    Aykın

    Marked as helpful
    1
  • Aykın Sancaklı•680
    @aykinsancakliPosted 9 months ago

    Hello @karan819381,

    Here is the reason for that ⬇️

    • Transitions on linear gradients can be a bit tricky because gradients are not actually animatable in the same way solid colors are. So the transition of the background property of the <button> would not work as you expected.

    Hope this helps.

    Cheers,

    Aykın

    Marked as helpful
    1
  • Aykın Sancaklı•680
    @aykinsancakliPosted 9 months ago

    Hello @Mussa-Chitemo

    📌 You can try this one ⬇️

    • To center components in a div without flexbox, you can use transform: translate(-50%, -50%) for both horizontal and vertical centering.
    .container {
      width: 100%;
      height: 300px;
      position: relative; /* Establish positioning context */
    }

    .centered-content {
      position: absolute; /* Position relative to the container */
      top: 50%; /* Move 50% down from the top */
      left: 50%; /* Move 50% from the left */
      transform: translate(-50%, -50%); /* Center the element */
    }

    Hope this helps.

    Cheers,

    Aykın

    0
  • Aykın Sancaklı•680
    @aykinsancakliPosted 9 months ago

    Hello @romeopapa1992,

    I think you did a great job on this one!

    📌 Some Suggestions:

    When using box shadows, we usually aim for a shadow that mimics the real world, so we prefer to use very subtle values. As the size of the component increases, the intensity and density of the shadow should also increase. For components like this, you can start with a shadow like this:

    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.015);

    This gives a more realistic and subtle shadow effect.

    Hope this helps and I wish you all the best!

    Aykın

    1
  • Aykın Sancaklı•680
    @aykinsancakliPosted 9 months ago

    Hello @usasag,

    I think your solution looks great! You even manipulated the design and reflected your own style.

    📌 A Couple of suggestions:

    • After <body> tag you can wrap your content inside the <main> tag. The <main> HTML element represents the dominant content of the <body> of a document. This way you are denoting that the part inside the <main> element is the core content of your website.
    • Instead of using generic <div class="container"> you can use <article> element that specifies independent, self-contained content (e.g. product card, a forum post).
    • Those are Semantic HTML elements and they add meaning to content for better understanding by browsers, developers, and accessibility tools, improving overall web page structure and SEO.

    Hope this helps, great work overall!

    Cheers,

    Aykın

    Marked as helpful
    1
  • Aykın Sancaklı•680
    @aykinsancakliPosted 9 months ago

    Hello @asishPatnaik2000,

    Your solution looks great!

    📌 A Couple of suggestions:

    • After <body> tag you can wrap your content inside the <main> tag. The <main> HTML element represents the dominant content of the <body> of a document. This way you are denoting that the part inside the <main> element is the core content of your website.
    • Instead of using generic <div class="container"> you can use <article> element that specifies independent, self-contained content (e.g. product card, a forum post).
    • Those are Semantic HTML elements and they add meaning to content for better understanding by browsers, developers, and accessibility tools, improving overall web page structure and SEO.

    Hope this helps, great work overall!

    Cheers,

    Aykın

    Marked as helpful
    0
  • John•410
    @MiyaoCatSubmitted 9 months ago

    I updated the links and removed the ul/li element and wrapped the links in a div. When is it appropriate to use a button?

    Social Links

    2
    Aykın Sancaklı•680
    @aykinsancakliPosted 9 months ago

    Hi @MiyaoCat,

    Great work!

    • If it is doing something (like open a pop-up window, submit a form etc.) it should be a button
    • If it leads you somewhere (links, page navigation etc) it should be a link.

    In this case, they are all social links so it is appropriate to use a link.

    I hope this helps

    Cheers,

    Aykın

    Marked as helpful
    0
  • Davide•330
    @deedeedevSubmitted 9 months ago

    I wanted to try tailwind and the experience was very good, I almost feel guilty because it's like I'm not writing "real css".

    The only doubt I have is if there's a way to style the separator (like the one between the ingredients section and the instructions section) with only borders, without using an hr element. Or maybe using an hr is better because it's more semantic?

    Recipe Page using Next.js and Tailwind

    1
    Aykın Sancaklı•680
    @aykinsancakliPosted 9 months ago

    Hello @deedeedev

    You can use the border-bottom property on sections ⬇️

    .section {
border-bottom: 0.05rem solid #eee;
}

    Hope this helps

    Cheers,

    Aykın

    Marked as helpful
    0
  • Aashish•50
    @AashishVivekBhatSubmitted 9 months ago

    Would really appreciate some feedback on the solution in context of :

    • Accessibility
    • Code structure

    Social Links Profile

    1
    Aykın Sancaklı•680
    @aykinsancakliPosted 9 months ago

    Hello @AashishVivekBhat,

    You did a great job on this one!

    Here is some feedback: You can use section element instead of generic div element to state this part is a section of my webpage.

    <!-- Social Links section -->
  <section>
    <button type="button">GitHub</button>
    <button type="button">Frontend Mentor</button>
    <button type="button">LinkedIn</button>
    <button type="button">Twitter</button>
    <button type="button">Instagram</button>
  </section>

    This would make more sense semantically.

    All the best

    Aykın

    0