DalaScript

Latest comments

• 

  P

  Mikhail•460

  @mkostrikovSubmitted 7 months ago

  

  FAQs accordion

  #bem

  1

  00
  

  P

  DalaScript•550

  @DalaScriptPosted 6 months ago

  Good Job Buddy!

  0
• 

  Soy•30

  @soylltariSubmitted 8 months ago

  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

  20
  

  P

  DalaScript•550

  @DalaScriptPosted 6 months ago

  Heey g, Good Job!

  0
• 

  Tarcilla Rodrigues•10

  @TarcillaRodriguesSubmitted 6 months ago

  

  Solução usando HTML5 e CSS

  1

  10
  

  P

  DalaScript•550

  @DalaScriptPosted 6 months ago

  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

  0
• 

  radhaBharadwaj•130

  @radhaBharadwajSubmitted 7 months ago

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

  Feedbacks are welcome

  

  QR Code to visit Frontend Mentor and start coding

  #accessibility

  2

  20
  

  P

  DalaScript•550

  @DalaScriptPosted 7 months ago

  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

  0
• 

  P

  Jim Barnett•260

  @jamesbarnettSubmitted 10 months ago

  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

  20
  

  P

  DalaScript•550

  @DalaScriptPosted 10 months ago

  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

  1
• 

  P

  Nate Valline•420

  @nvallineSubmitted 10 months ago

  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

  20
  

  P

  DalaScript•550

  @DalaScriptPosted 10 months ago

  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

  0