Responsive Multi-Page Website with Grid and Flexbox

Hello, @vcarames! 👋

Thank you for the feedback! Also, thank you for checking my site with VoiceOver! I am glad to know that you found no issues. 😄

I use div instead of section because it's the same. Whether I use section or div, it has no impact on the accessibility of the site. It won't cause issues or make it more accessible.

For the phone number, I decided to not wrap it in an anchor tag. It's not part of the interactive element based on the design.

For the address, I didn't know about using Google Maps. Thank you for telling me this! 👍

For the social media links, I might do that if it is a real website. I think it's better to not have any links that open in a new tab unless the users will lose data. So, a good example is when the users are required to open another webpage while filling out a form.

You can read "G200: Opening new windows and tabs from a link only when necessary | Techniques for WCAG 2.0".

Users can choose to open the link in a new tab if they want to by right-clicking the mouse and then choosing "Open link in new tab" (in Chromium browsers). Or hover over the link, press the Ctrl key, and click the link. That will also do the same thing.

Happy coding too! 🙂

@vanzasetia

The article you provide was very beneficial! Did not know that. Thank you!

@vanzasetia thanks for providing us with an informative readme 😊 Kindly help me to checkout my solution here 😊 when you have time. Thanks in advance.

@EngineerHamziey

I have provided some feedback. Hope my feedback helps! 😊

@vanzasetia yes thanks alot 🙏 I'll follow up soon, I have been busy at work 😊

@krutagna10

Hi again, Krutagna! That's a good question! 👍

I don't do selector nesting because it makes it harder for my future self to understand the code. It is much easier to understand if the code has fewer symbols.

For example, let's take a look at this first code snippet.

.button {
  /* some styling */

  &--border-white {
    /* some styling */
      
       &:hover {
         /* some styling */
     }
  }
}

Now, the second code snippet.

.button {
  /* some styling */
}

.button--border-white {
  /* some styling */
}

.button--border-white:hover {
  /* some styling */
}

Both code snippets are doing the same thing. But, it is much easier to understand the second code snippet because it does what it says. There's no need to think something like "what is the parent selector for this selector?". Also, more developers can understand the second code snippet because it's the same as the CSS syntax.

I can apply the same logic (having fewer symbols) when writing JavaScript.

if (true) {
  return true;
}  else {
  return false;
}

// compare it with
true ? true : false;

The first one is much easier to understand than the second one. The second is much shorter but it is not human-readable.

@vanzasetia That is a great explanation. Thank You !

@vanzasetia Can you give me feedback to my solution here

Originally I used CSS for styling, but I changed it to SCSS and used BEM for naming items.

@krutagna10

Sorry, I can't give feedback on the solution for the Designo challenge. I am currently doing that challenge. So, if I am taking a look at your solution, that means I am cheating. 😅

I can only suggest you read "5 Handy Sass Code Snippets" article. In that article, you may find some useful @mixin to help you write Sass.

Anyway, I want to say congratulations on completing that Guru challenge! 🎉 It's amazing that you are able to complete such a large project. 👏

@vanzasetia No problem, I will go through the article.

As for completing the project, it took me so many days to complete it , and and I found errors each time I went through the code😁.

Anyways, I think it is a great project🔥, as I learned so many things while building it.

@krutagna10

I am also guessing that it will take me more than one month to finish the challenge. 😅

Yeah, I hope that I'll learn a lot of interesting things after I complete the challenge. 🙂

Anyway, thank you for your understanding! 👍