Skip to content
OverviewSolutions
28
Comments
14
P
DalaScript
@DalaScript

All comments

  • P
    DalaScript•600
    @DalaScript

    Hey there! 👋

    Here are a few suggestions to help improve your solution and make it even stronger:

    ✅ What’s working well

    • Semantic HTML structure — correct use of <section>, <header>, and <main>.
    • Responsive layout — usage of Tailwind utility classes like md:grid-cols-3 and md:flex works well for desktop scaling.
    • Accessibility — includes aria-label attributes in the mobile menu setup.

    🛠 Suggestions for improvement

    • Mobile menu toggle
      The modal opens, but it doesn’t remove the hidden class when aria-hidden is set to false. Sync class visibility with the state change:

      menuModal.classList.remove("hidden"); // add this inside `openModal()`
menuModal.classList.add("hidden"); // inside `closeModal()`

    • Container padding inconsistency
      Using p-6 on the container and md:py-8 on body can cause uneven padding. Consider keeping spacing consistent across breakpoints.

    • Reusability tip
      Repeating elements like the navigation <ul> could be made reusable if this were being built in a framework — avoids duplication and potential bugs.

    • Image accessibility
      Current alt texts like "Hero image" or "gaming image" are too generic. More descriptive alt text, like "Hero illustration showcasing Web 3.0 theme", improves screen reader experience.

    • Desktop grid balance
      The .md:col-span-2 class works, but the visual balance between image and text in that hero section could be better. Try using h-full, more defined gap, or adjusting flex alignment for better symmetry.

    Hope this helps you refine your project a bit more! 👍
    If you found this feedback useful, don’t forget to mark it as helpful so others can benefit from it too.

    Marked as helpful
  • P
    DalaScript•600
    @DalaScript

    Good Job Buddy!

  • Soy•30
    @soylltari
    What are you most proud of, and what would you do differently next time?

    I'm proud of using a new tool in my project - SCSS.

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

    I straggled with radio inputs and labels. I couldn't make it right till I changed HTML file

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

    I couldn't figure out how to apply @media rule to this project. For some reason, everything looks so small on small screens and I tried to play with @media, but it wasn't successful. I think there is a solution and if I spent some time I could figure it out, but I'm so tired of this project (because of radio inputs) that I decided to leave it like this.

    Interactive rating component using SCSS

    #sass/scss
    1
    P
    DalaScript•600
    @DalaScript

    Heey g, Good Job!

  • P
    DalaScript•600
    @DalaScript

    Olá! 👋

    O design parece muito bom, bom trabalho!👍

    A primeira coisa que quero dizer é que fiz um vídeo sobre esse projeto e você pode ver como eu o codifiquei:

    QR code component coded by DalaScript

    Eu construí este projeto usando:

    • HTML
    • SCSS
    • BEM
    • Mobile-first workflow

    Aqui estão algumas dicas para melhorar este projeto:

    • Primeiro, o que você precisa é usar elementos semânticos. Muitas vezes, você usa o elemento <div></div>, que não é semântico.
    • Primeiro, devemos começar com o design para dispositivos móveis primeiro📱, para que tenhamos benefícios como Melhor experiência para dispositivos móveis🌟, Código mais simples🔧, Sites mais rápidos⚡, É mais fácil adicionar mais depois➕. Em vez de @media screen and (max-width:) você usa media screen and (min-width).

    Boa sorte!🍀 DalaScript

    Marked as helpful
  • P
    DalaScript•600
    @DalaScript

    Heey 👋

    Here are some tips, I hope it helps:

    HTML:

    • In order for your website to be semantically justified, it is necessary to use semantic elements. Every web page needs a <main> tag that separates the content. This is vital for accessibility as it helps screen readers identify the "main" section of the page. so change your <div class="mainContainer"></div> with <main></main tags. NOTE:
    • we don't use camelCase to identify html classes, instead we use hyphen mode, So the class would be correctly identified: main-container
    • You also need to change the card tag with <article class="card"></article>, instead of div. (A div is not a semantic element)

    CSS:

    • in this Challenge, you actually don't need to make it responsive, because sizes are the same for Mobile and Desktop.
    • We first start writing the code for the mobile device, This is called - Mobile-first workflow.
    • The rest depends on the dimensions, you just need to correctly specify the padding, margin, font size, font family and that's it.

    Good Luck! DalaScript

    Marked as helpful
  • Jim Barnett•260
    @jamesbarnett
    What are you most proud of, and what would you do differently next time?

    I was more methodical with regards to top and bottom margins and padding for vertical alignment when compared to my last challenge. Also, this was my first time self-hosting fonts and converting them to woff2.

    Differently - I would take more of a mobile first approach. My media query strikes me as clunky. Perhaps a mobile first approach would have resulted in something different.

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

    I was tripped up briefly on the "social links list" by default margins/padding on `` elements. It first presented by making everything look "too indented". Using the search term "ul no indent" gave me plenty of explanations. I later encountered an issue with the spacing on the bottom of the social links list, but I immediately suspected default padding/margin values and confirmed it with the dev tools.

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

    I am interested to hear opinions on the media query.

    • Should it have been decomposed into multiple media queries?
    • Is there a standard practice for media query placement within a css file?
    • I am always looking for feedback on markup structure. Opinionated and nitpicky things are welcome.

    I have two uses of text-align: center. Are there better solutions?

    vite nojs fontsquirrel woff2_compress

    #vite#accessibility
    1
    P
    DalaScript•600
    @DalaScript

    Hey, Good Job!👏✨

    Your design looks very good, also you don't need a lot of media queries, only if you consider it necessary.

    Here are some tips to improve this project:

    • First of all, we should start with mobile design first📱, that we have benefits like 1. Better mobile experience🌟, 2. Simpler code🔧, 3. Faster websites⚡, 4. It's easier to add more later➕.
    • To center an article element, you must give its main element:
    height: 100vh;
display: flex;
align-items: center;
justify-content: center;

    Good luck!🍀👍

    nika.dala

    Marked as helpful
  • P
    Nate Valline•420
    @nvalline
    What are you most proud of, and what would you do differently next time?

    In this challenge I implemented a tabbed interface using vanilla JavaScript and laid out the design using SASS.

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

    The tabbed interface was the first time I have implemented such a feature and luckily through the community I found a great article about implementing such a feature.

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

    I am always appreciative to hearing suggestions or tips on how to improve my code especially with JavaScript.

    Tabbed Interface, Vanilla JS, & SASS

    #sass/scss#accessibility
    1
    P
    DalaScript•600
    @DalaScript

    Hey👋, Good Job!

    Your Project looks very good and most importantly it is functional and works

    I'm kind a perfectionist Person, And I'll give you some tips to improve your design.

    • your image in <figcaption class="profile"> container needs outline property instead of border, and image's sizes will match.
    • <h1>Jeremy Robson</h1> needs line-height: 47px
    • you need hover for your <div class="content"></div> container.
    • you need also hover for your ellipses image, it should be actually button, And on hover it should change color :
    <button class="card-btn">
   <svg width="21" height="5" xmlns="http://www.w3.org/2000/svg">
      <path d="M2.5 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm8 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm8 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Z" fill="#BBC0FF" fill-rule="evenodd"/>
   </svg
</button>

    and then to change color of those ellipses (I saw your using scss, so I will write for scss):

    button {
   &:hover {
      path {
         fill: **here comes what color you want**;
      }
   }
}

    Good Luck! 🍀

    Nika.Dala

    Marked as helpful
  • Jim Barnett•260
    @jamesbarnett
    What are you most proud of, and what would you do differently next time?

    I am pleased it works on both desktop and mobile with respectable accuracy. I was also happy about noticing the dropshadow effect on hover and having to google to find a solution (that being the has pseudo class).

    As far as differences, if I had to do it again, I would probably experiment with different markup and/or layout strategies--specifically adding an addition wrapper type div and experimenting with a 3 column grid layout or possibly sub-grid. I'd also like to do more mobile first development.

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

    The font scaling, understanding the CSS math functions. Kept breaking the layout. Got a little more comfortable with Figma, Firefox Dev Tools, and VisBug. Watched several videos on responsive fonts without media queries. Persistence, research, and experimentation paid off.

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

    Would it have been better to implement the instructor avatar as a ::before element? Why or why not, or just a matter of taste?

    My use of the hgroup tag... appropriate? Unnecessary? Or maybe you would have used it, but differently. (removed: no longer relevant)

    Any other semantic elements that were used inappropriately or some that I missed an opportunity to leverage?

    Blog Preview Card - Responsive font without media queries

    #vite
    1
    P
    DalaScript•600
    @DalaScript

    Hey🖐, Good Job!

    Your project looks good, not much to say, but I can give you some tips :

    1. Your HTML file is semantically correct, but could put your card to article element, cause main is a more general container, it cannot be a single card.

    2. Your div container with class name course-published should be actually p Tag, semantically is more correct. and for date, you can use time tag so it would be like that :

    <p class="course-published">Published <time datetime="2023-12-21"> 21 Dec 2023</time></p>

    Good Luck! DalaScript

    Marked as helpful
  • jrgenweb•450
    @jrgenweb
    What are you most proud of, and what would you do differently next time?

    I made it, next time I will try validator.js or another validator js library, in this task I googled a regex pattern. Alternatively, I could even make the component by generating the whole thing with js...

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

    the validation, I googled this

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

    actually, how good or bad was this challenge

    newsletter sign-up form

    #sass/scss
    1
    P
    DalaScript•600
    @DalaScript

    Hey!🖐 Good Job!

    Your Design looks actually good, but here is some tips to improve this Project :

    1. background-color doesn't match, so I would change it.

    2. padding size for <div class="newsletter_form" id="newsletter-form"> that element.

    3. spacing between elements inside your div <div class="newsletter_content flex"> element.

    4. after clicking on that button <button type="submit" class="btn_close">Dismiss message</button>, Instead of disappearing the entire container, you could have the newsletter form back again.

    Good Luck!🎉

    Nika.Dala

    Marked as helpful
  • SIDA•190
    @GSida015
    What are you most proud of, and what would you do differently next time?

    It was really easy for me,its not first time I do this.

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

    It was really easy idk.

    Qr code card featuring Responsivnes and flexbox

    #accessibility#fresh
    3
    P
    DalaScript•600
    @DalaScript

    Hey, Good job!

    კარგი ნამუშევარია მომეწონა, ასევე ძალიან მომეწონა Github-ზე გაფორმება. გაუმჯობესებისთვის მოგცემ რამდენიმე რჩევას :

    1. HTML ფაილში, head თეგში style-ის ელემენტი აღარ გჭირდება, ის თვისებები რა არის style-ის თეგში არის attribution კონტეინერისთვის, რომელიც თემლეითს მოყვება იდეაში, მაგრამ ეს წაშლილი გაქვს და შესაბამისად style თეგი აღარ არის საჭირო.

    2. Font-ის დალინკვა დაგავიწყდა, 'outfit'-ის ფონტია და შეგიძლია ამ ლინკზე ნახო.

    3. გამოიყენე ისეთი ელემნტები, რომელიც არის სემანტიკურად გამართლებული, როგორიც არის main თეგი მაგალითად, div კონტეინერი რომელსაც აქვს wrapper-ის კლასი, მის მაგივრად შეგიძლია გამოიყენო main თეგი, და div კონტეინერი რომელსაც აქვს qr-code-container კლასი, მის მაგივრად შეგიძლია გამოიყენო article თეგი.

    4. ასევე მეტი ყურადღება მიაქციე დეტალებს, qr-code-ის ფოტოს border-radius-ზე მეტი გაქვს მითითებული ვიდრე უნდა იყოს.

    5. text-cont კლასის p ელემენტს არ აქვს text-shadow თვისება.

    6. qr-card-ს წაუშალე height-ის თვისება, რომ ზომი დაემთხვეს.

    7. თუ არ გაქვს პრემიუმი ნაყიდი Fronendmentor-ზე, მაშინ გირჩევ რომ, როცა ცვლილებებს შეიტან შენ პროექტში, ახალად ატვირთო, და არ გაუკეთო სქრინშოთის ახალი გენერირება, იმიტომ რომ შეზღუდული ხარ ახალი სქრინშოთების გენერირებაში.

    წარმატებები!

    Marked as helpful
  • P
    DalaScript•600
    @DalaScript

    Hey, Welll done!!

    May I ask you, How do you write Solution retrospective, without this 3 questions and with your own title?

    Thanks in Advance.

  • P
    Helix34•110
    @RVidal34
    What are you most proud of, and what would you do differently next time?

    A truly excellent exercise that pushes us to our limits and forces us to find innovative solutions to succeed.

    I loved !!!!!!!

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

    I had a lot of difficulty finding a way to modify the background of the header to match the template.

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

    R.A.S

    Meet-landing-page by Helix34

    1
    P
    DalaScript•600
    @DalaScript

    Hey, Well Done,

    As I read you had a problem with the header background. -In this project we had a total of 3 image-heroes, one image-hero for mobile and tablet sizes and the other two for desktop screens. I personally did it like this: -HTML : <picture> <source media="(min-width: 768px)" srcset="/image-hero.png" width="820" height="303"> <img class="bg-hero-img" src="" width="414" height="153" alt="image hero"> </picture> <img class="bg-hero left" src="/image-hero-left.png" alt="image hero left"> <img class="bg-hero right" src="/image-hero-right.png" alt="image hero right">

    -CSS : .bg-hero { display: none; } @media only screen and (min-width: 1440px) { .bg-hero-img { display: none; } .bg-hero { display: block; position: absolute; } }

    -Let's try this. Don't forget to give .bg-hero.left and .bg-hero.right top and left properties.

    • Your HTML is semantically justified, but you can refactor the code, for example, add a main element for sections and insert it. • Sizes of images and texts, spaces between containers and texts, button hovers. After fixing all this, your website will be perfect. • Layout looks good, good responsiveness.

    Good Luck

    Marked as helpful
  • Timelessgreed•70
    @Timelessgreed
    What are you most proud of, and what would you do differently next time?

    I finish the project

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

    Nothing, because I follow sir. Kevin Powell while doing the same project.

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

    None

    product-preview-card

    2
    P
    DalaScript•600
    @DalaScript

    Hi, Good Job.

    So I saw that solution includes semantic HTML, thats already good, What I would change is that I would set the margin to 0 for the large screen. Good luck!

    Marked as helpful
  • Kevin Anderson•160
    @kevincanderson
    What are you most proud of, and what would you do differently next time?

    Getting it done. Putting the time in.

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

    Making sure the image had a border radius and was contained.

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

    Time management.

    QR Code Component - Another attempt, hopefully better.

    2
    P
    DalaScript•600
    @DalaScript

    I think it would be better if the attribution container was seperate, and the QR Code Card lacks the box-shadow property.

    Marked as helpful