mofada

@mofada

All comments

Samuel Adu•1,040
@samuel-aduSubmitted 7 months ago
Responsive Room Homepage Built with HTML, CSS and JS
#bem#accessibility
1
mofada•340
@mofadaPosted 7 months ago
Your animation looks great, great job!
1
P
Dan Marius•1,225
@danmlarsenSubmitted 7 months ago
What specific areas of your project would you like help with?
I appreciate any helpful feedback.
Mobile first landing page using Tailwind CSS
#vite#tailwind-css
1
mofada•340
@mofadaPosted 7 months ago
Looks great!
1
P
Aneiqu•200
@aneiquSubmitted 9 months ago
NFT preview card
#tailwind-css
1
mofada•340
@mofadaPosted 7 months ago
It looks great, congratulations on completing the challenge!
0
Kaiser•340
@SeyrenZSubmitted about 1 year ago
E-Commerce Product Page
#next#react#tailwind-css#typescript#webpack
1
mofada•340
@mofadaPosted 8 months ago
It looks good!
0
Javier Duarte•210
@javiIT10Submitted 8 months ago
News Homepage using Tailwind CSS
#tailwind-css
1
mofada•340
@mofadaPosted 8 months ago
Congratulations on completing the challenge, all is well
0
Javier Duarte•210
@javiIT10Submitted 8 months ago
Contact Form using Tailwind CSS
#tailwind-css
1
mofada•340
@mofadaPosted 8 months ago
First of all, congratulations on completing the challenge.

Let me talk about my opinion on your code, of course, this is only my personal opinion.

First of all, from the page, compared with Solution and Design, your background color seems to be wrong, and some small details are not restored enough.

Secondly, in terms of HTML code, you directly use the H2 tag. Normally, you should start with H1 instead of using H2 directly. Input and Label are used correctly, but radio group recommends using fieldset and legend to implement it.

Then, in terms of input validation, you can use HTML's required to perform validation and reduce js code. <input type="text" id="firstName" name="firstName" class="input" required /> Using HTML's own validation can reduce your code
0

Javier Duarte•210

@javiIT10Submitted 9 months ago

FAQ accordion using Tailwind

#tailwind-css

mofada•340

@mofadaPosted 8 months ago

First of all, congratulations on completing the challenge, you are awesome.

Here are some areas I think can be optimized:

1.Details and Summary

I think maybe you use details and summary is better.

Here's an example:

list-none: hidden default marker
after: pseudo element, it's can add icon, such as plus and minus

<details class="group" open>
	<summary
			class="list-none after:w-[30px] after:h-[30px] after:bg-[url('assets/images/icon-plus.svg')] group-open:after:bg-[url('assets/images/icon-minus.svg')]">
		What is Frontend Mentor, and how will it help me?
	</summary>

	<p class="... text style here">
		Frontend Mentor offers realistic coding challenges to help developers improve their
		frontend coding skills with projects in HTML, CSS, and JavaScript. It's suitable for
		all levels and ideal for portfolio building.
	</p>

</details>

Here some article will help you:

20 Simple Ways to Style the HTML details Element - This helped me for learn details tag.
details.
summary.
Details and summary.

2. Responsive Images

And then, the responsive picture can refer to this Responsive_images

<!--background-->
<picture class="absolute top-0 w-full">
	<source media="(min-width: 768px)"
	        srcset="assets/images/background-pattern-desktop.svg">
	<source media="(max-width: 768px)"
	        srcset="assets/images/background-pattern-mobile.svg">
	<img src="assets/images/background-pattern-mobile.svg" alt="Decorative background pattern"
	     class="w-full object-cover">
</picture>

If you want to known more details, you can check my solutions faq-accordion-with-tailwind-css

Javier Duarte•210

@javiIT10Submitted 8 months ago

Interactive Rating Component using Tailwind CSS

#tailwind-css

mofada•340

@mofadaPosted 8 months ago

I think you can use radio group replace button to implement rating

<!--rating-->
<fieldset>
	<legend class="sr-only">Rate our service</legend>

	<label
			class="w-10 h-10 has-[:checked]:bg-white has-[:checked]:text-blue-900 hover:bg-orange hover:text-blue-900 md:w-[50px] md:h-[50px]">
		<input type="radio" name="rating" value="1" class="appearance-none" required/>
		<span>1</span>
	</label>

	<label class="w-10 h-10 has-[:checked]:bg-white has-[:checked]:text-blue-900 hover:bg-orange hover:text-blue-900 md:w-[50px] md:h-[50px]">
		<input type="radio" name="rating" value="2" class="appearance-none"/>
		<span>2</span>
	</label>

	......
</fieldset>

Javier Duarte•210

@javiIT10Submitted 8 months ago

Tip Calculator App using Tailwind CSS

#tailwind-css

mofada•340

@mofadaPosted 8 months ago

Your JavaScript code is well-organized and structured. However, there are some suggestions for improving readability, maintainability, and efficiency:

1. Optimization and Best Practices:

Debounce Input Events: Currently, the event listeners for input fields trigger calculations every time the user types something. To improve performance, especially with large inputs, consider debouncing the input event listeners.

function debounce(func, wait = 300) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}

inputBill.addEventListener("input", debounce(function () {
  values.bill = parseFloat(this.value);
  if (!isNaN(values.bill)) {
    calculate();
  }
}));

Consistent Variable Naming: The variable alert can be confusing since it's a global function in JavaScript. Consider renaming it to something more descriptive, like alertMessage or alertElement.
```
const alertMessage = document.querySelector("#alert");
```

2. Maintainability:

Separate Calculation Logic: The calculate function is doing a lot of work. You could separate the logic for calculating the tip amount and the total amount into individual functions. This will make the code easier to test and maintain.

function calculateTipAmount(bill, tip, people) {
  return (bill * tip) / 100 / people;
}

function calculateTotalAmount(bill, tip, people) {
  return ((bill * tip) / 100 + bill) / people;
}

function calculate() {
  const { bill, tip, people } = values;
  resultTipValue.innerText = `$${calculateTipAmount(bill, tip, people).toFixed(2)}`;
  resultTotalValue.innerText = `$${calculateTotalAmount(bill, tip, people).toFixed(2)}`;
}

Reuse of CSS Classes: In the showAlert and cleanAlert functions, you're adding and removing multiple classes for styling. Consider grouping these styles into a single CSS class, like .alert-active, to reduce redundancy.

.alert-active {
  border: 2px solid #CA8073;
}

Then, in your JavaScript:

function showAlert(reference) {
  alertMessage.textContent = "Can’t be zero";
  reference.classList.add("alert-active");
}

function cleanAlert(reference) {
  alertMessage.textContent = "";
  reference.classList.remove("alert-active");
}

3. Error Handling:

Handle NaN in calculate: Ensure that the calculate function can handle cases where the input values might not be valid numbers (NaN). This can prevent unintended results being displayed.

function calculate() {
  const { bill, tip, people } = values;
  if (isNaN(bill) || isNaN(tip) || isNaN(people) || people === 0) {
    resultTipValue.innerText = `$0.00`;
    resultTotalValue.innerText = `$0.00`;
    return;
  }
  resultTipValue.innerText = `$${calculateTipAmount(bill, tip, people).toFixed(2)}`;
  resultTotalValue.innerText = `$${calculateTotalAmount(bill, tip, people).toFixed(2)}`;
}

4. Reset Function:

Complete the reset Function: You have an empty reset function. Consider moving the reset logic from the btnReset event listener to this function for better code organization.

function reset() {
  values.bill = 0;
  values.tip = 5;
  values.people = 1;

  inputBill.value = 0;
  inputCustom.value = 0;
  inputPeople.value = 1;
  resultTipValue.textContent = "$0.00";
  resultTotalValue.textContent = "$0.00";
  removeActive();
}

btnReset.addEventListener("click", reset);

5. General Suggestions:

Avoid Global Scope Pollution: Consider encapsulating your code within an IIFE (Immediately Invoked Function Expression) to avoid polluting the global scope.
```
(function() {
  // All your code here...
})();
```

By applying these suggestions, your code will be more efficient, readable, and easier to maintain.

John Pugh•340
@JohnPugh688Submitted 12 months ago
What are you most proud of, and what would you do differently next time?
Im happy with my layout on this one, good challenge working with grid, flex and absolute positioning for background images also working with the different screen size adjustments. overall getting the json file to work with Javascript was hard work and once again i dont really understand how i finally got it to work.
What challenges did you encounter, and how did you overcome them?
My biggest struggle with this was fetching the json file. I spent far to long trying to figure out why it would work for me only to finally realise my mistake! BEFORE: const dailyBtn = document.getElementById(".daily"); const weeklyBtn = document.getElementById(".weekly"); const monthlyBtn = document.getElementById(".monthly"); AFTER: const dailyBtn = document.getElementById("daily"); const weeklyBtn = document.getElementById("weekly"); const monthlyBtn = document.getElementById("monthly");

something so simple can cause so much time and effort!!
What specific areas of your project would you like help with?
Im not sure how semantic this ones going to be as i think i might have used divs more than i maybe should have. interested to know if anyone has any better ways to do this to make it easier to understand.
Time Tracking Dashboard
#tailwind-css
1
mofada•340
@mofadaPosted 8 months ago
Congratulations on completing the challenge, the hover effect is great.

I can't help you with semantics because I think I have problems with semantics too.
0
SMHN•200
@smhnfreelancerSubmitted 12 months ago
What are you most proud of, and what would you do differently next time?
1. I used Tailwind CSS and advanced features like safelist in the Tailwind.
2. I implemented the Javascript part easily.
What challenges did you encounter, and how did you overcome them?
1. Some classes in the Tailwind features were not rendered, because they are not available on the HTML, but you can use advanced features like safelist.
2. I used Tailwind CSS component features too.
What specific areas of your project would you like help with?
I like to write clean code, fast easy and I made lots of ID selectors, may be there is a more efficient way than making a whole bunch of ID selectors.
Frontend Mentor - Newsletter sign-up form - TailwindCSS - Javascript
#tailwind-css
1
mofada•340
@mofadaPosted 8 months ago
The HTML code you provided already has a good structure and semantics, but there are still some areas that can be optimized:

Semantic tags: Consider replacing some div tags with more semantic tags, such as header, section, article, etc., to improve readability and accessibility.

Optimize the alt attribute of images: Currently, the alt attribute of the img tag is empty, which is not conducive to SEO and barrier-free access. It is recommended to provide descriptive text for each image.

Reduce duplicate code: The use of lg:hidden and lg:flex on image tags may cause unnecessary repeated rendering, so consider unified management.

Optimize style class names: For some style class names, such as UL and UL__item, you can consider more descriptive names to express the purpose more clearly.

Icon optimization: The favicon icon can consider adding different size versions to meet the needs of different devices.
0
Ionut Oltean•440
@replayzorSubmitted over 1 year ago
What are you most proud of, and what would you do differently next time?
I am proud that i did it
What challenges did you encounter, and how did you overcome them?
No challenge
What specific areas of your project would you like help with?
Anything
Responsive article preview component using tailwind css
#tailwind-css
1
mofada•340
@mofadaPosted 8 months ago
First of all, congratulations on completing the challenge. I found some small problems, of course, this is just my own opinion

I think the tailwind color naming should follow lowercase, like this text-color-blue-100, so you should define it like this

colors: { 'dark-grayish-blue': 'hsl(217, 19%, 35%)', // or like this dark:{ grayish:{ blue:'hsl(217, 19%, 35%)' } } }

Then in the desktop you seem to have missed the triangle part, you can use svg icon or use css to draw it, like this:

#tooltip:before { /*Triangle line*/ position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 12px solid hsl(217, 19%, 35%); }

Finally, your tooltip prompt box seems to have a problem with the position. It does not appear where it should appear. Perhaps you can use js to get the coordinates and display them.
Marked as helpful
0
P
Darrick Fauvel•490
@DarrickFauvelSubmitted 9 months ago
What are you most proud of, and what would you do differently next time?
I am proud that outside of Tailwind CSS, I used custom CSS to create responsive grid views for multiple screen widths. Specifically, I used grid template areas to make these responsive layouts.
What challenges did you encounter, and how did you overcome them?
The challenge I encountered was that nearly every testimonial looked different. For this, I targeted each testimonial card using the CSS :nth-child() selector and applied its specific style.
What specific areas of your project would you like help with?
Did I miss something? Is there anything I can do better? I am open to any constructive feedback.
Testimonials grid section - Tailwind CSS, Next.js
#next#tailwind-css#typescript
1
mofada•340
@mofadaPosted 8 months ago
First of all, congratulations on completing the challenge. It's done very well, awesome!

First of all, from the HTML semantics point of view, it's awesome, I can't fault it. Secondly, you also added hover animation, which is a good attempt. And responsive matching, it's perfect, awesome
1
Abraham Pech•90
@aapa1993Submitted 9 months ago
Four Card Feature
#tailwind-css
1
mofada•340
@mofadaPosted 9 months ago
Your code is generally well-structured and follows good practices. Here are some specific points of feedback:

Positives:

Semantic HTML: Use of semantic tags like <main>, <h1>, and <p> helps improve readability and accessibility.

Responsive Design: The layout adapts to different screen sizes using CSS classes and conditional rendering (custom:hidden, custom1:block).

External Resources: Properly linked external stylesheets and fonts, enhancing the visual appeal.

Consistent Styling: Utilizes consistent styling for different components, making the design cohesive.

Alt Attributes: Provides alt attributes for images, which is good for accessibility.

Improvements:

Class Naming: While Tailwind CSS class names are used effectively, custom class names like custom1, custom2, etc., are not descriptive. More meaningful names would improve maintainability.

Grid Layout: Inline styles for grid placement (style="grid-column: 1; grid-row: 2") could be moved to CSS classes for better separation of concerns.

Typography Scaling: The text sizes are hardcoded (text-15, text-20, etc.). Consider using responsive text sizing classes from Tailwind CSS (text-sm, text-lg, etc.) for better scalability across devices.

Repetitive Code: There is some repetition in the structure of the cards. Consider using a template system or a JavaScript framework to reduce redundancy.

Accessibility Enhancements: Adding ARIA roles and properties where necessary can further enhance accessibility.

Performance Optimization: Preconnecting to Google Fonts is good, but loading fonts asynchronously (<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" media="print" onload="this.onload=null;this.removeAttribute('media');">) can improve page load performance.
0
Vanessa•160
@petrihcourSubmitted 9 months ago
What are you most proud of, and what would you do differently next time?
I followed a mobile-first approach which made the desktop version much easier. I think it increased my efficiency and allowed me to focus more time on the details.
What challenges did you encounter, and how did you overcome them?
I encountered an issue with the desktop version of the layout and the image and content within the container. I learned how to utilize flex-grow and flex-1 for the content to grow and shrink.
What specific areas of your project would you like help with?
I would appreciate ideas on how to make the layout look better on a medium desktop screen like "Nest Hub" in dev tools. It looks a bit wacky currently.
Product Page Card w/ Tailwind CSS
#tailwind-css
1
mofada•340
@mofadaPosted 9 months ago
First of all, congratulations on completing this challenge. You did a great job

Perhaps consider opting for a fixed width, such as setting the width to 'w-[343px]' for mobile devices and 'md:w-[600px]' for screens wider than 768px.

<main class="m-auto flex flex-col w-[343px] h-[612px] bg-white rounded-xl md:flex-row md:w-[600px] md:h-[450px]"> ...

And then, the responsive picture can refer to this Responsive_images

 <picture class="md:grow md:basis-3/6"> <source media="(min-width: 768px)" srcset="images/image-product-desktop.jpg"/> <source media="(max-width: 768px)" srcset="images/image-product-mobile.jpg"/> <img src="images/image-product-mobile.jpg" alt="produce image" class="w-full rounded-t-xl md:rounded-l-xl md:rounded-r-none"/> </picture>

The 'uppercase' tag works just fine, and I had to search for it for a while
Marked as helpful
1
Vanessa•160
@petrihcourSubmitted 9 months ago
What are you most proud of, and what would you do differently next time?
I learned how to use custom CSS stylings to customize and override Tailwind CSS' default properties for lists. I did end up spending a lot of time on the Nutrition section trying to get the layout and spacing right. I didn't realize it wasn't centered in the middle on desktop and mobile. Next time, I will analyze the reference image better to not take up extra time.
What challenges did you encounter, and how did you overcome them?
I initially did not know how to customize the bullet points and numbers in Tailwind's default list. I did some googling and realized I can use li::before plus more to customize it myself.
What specific areas of your project would you like help with?
I'd appreciate any feedback!
Responsive Recipe Page w/ Tailwind CSS
#tailwind-css
1
mofada•340
@mofadaPosted 9 months ago
Actually, tailwind css support list-style, you can watch this page setting-the-list-style-type

and then, Instructions.Beat the eggs: here, You can use :before Pseudo-classes to reduce nesting levels and simplifies HTML。 like this: <li class="before:content-['Total:'] before:text-stone-600 before:font-bold pl-4"> Approximately 10 minutes </li>
0
RappyProg•30
@RappyProgSubmitted 9 months ago
What are you most proud of, and what would you do differently next time?
On this project, i was able to do it with much faster timing compared to the previous one. Despite it being quite similar with the previous project, i believe this is a good progress for myself
What challenges did you encounter, and how did you overcome them?
I'm still having challenges with determining width. I was suggested to use figma so i tried using one, however after looking at the resolution, it doesnt feel right to me, so i use my own resolutions
What specific areas of your project would you like help with?
I would love feedbacks especially some help on determining widths of something. Because it would help me to be more accurate
Social Links Profile with React JS
#react#vite#tailwind-css
1
mofada•340
@mofadaPosted 9 months ago
I think maybe your divs are nested too heavily, is it possible to reduce the nesting a bit?

like this:

div img h2 p button ......
0
Felippe Nogueira Vieira•60
@felippenvieiraSubmitted over 1 year ago
Blog Preview Card
#next#tailwind-css
1
mofada•340
@mofadaPosted 9 months ago
it's look great!
0

mofada

All comments

Responsive Room Homepage Built with HTML, CSS and JS

Mobile first landing page using Tailwind CSS

NFT preview card

E-Commerce Product Page

News Homepage using Tailwind CSS

Contact Form using Tailwind CSS

FAQ accordion using Tailwind

Interactive Rating Component using Tailwind CSS

Tip Calculator App using Tailwind CSS

1. Optimization and Best Practices:

2. Maintainability:

3. Error Handling:

4. Reset Function:

5. General Suggestions:

Time Tracking Dashboard

Frontend Mentor - Newsletter sign-up form - TailwindCSS - Javascript

Responsive article preview component using tailwind css

Testimonials grid section - Tailwind CSS, Next.js

Four Card Feature

Positives:

Improvements:

Product Page Card w/ Tailwind CSS

Responsive Recipe Page w/ Tailwind CSS

Social Links Profile with React JS

Blog Preview Card