Skip to content
OverviewSolutions
36
Comments
821

Aakash Verma

@skyv26India9,500 points

A seasonal full-stack developer with expertise in React, TypeScript, RoR and building high-performance UIs. With over 1000+ project reviews, I excel in providing insightful code reviews that enhance quality and scalability. Let’s unlock your potential and create something extraordinary together!

I’m currently learning...

I’m diving deep into full-stack development, mastering Ruby on Rails, React, and GraphQL. Exploring advanced topics like associations, cron jobs, and testing, I’m passionate about creating clean, scalable code and building high-quality solutions that make an impact!

Latest solutions

View more solutions

Latest comments

  • Ty Maraist•10
    @tcmaraist
    What are you most proud of, and what would you do differently next time?

    I am most proud of figuring out how to connect Google Fonts and getting the margins and border-radius right despite being confused by Figma.

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

    I don't understand Figma well, and some of the values seem off. For example the border-radius for the card said 25%, but that was way too much and i landed on 2%.

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

    I think I managed to get the font looking decent, but it doesn't feel perfect to me. I could use some guidance there.

    QR Card Component HTML CSS

    #vite
    1
    Aakash Verma•9,500
    @skyv26

    Hi @tcmaraist, 👋

    Great job on the project so far! Below are a few suggestions to enhance the semantics, responsiveness, and readability of your code. Let’s walk through them one by one with simple examples for clarity:

    1. Centering the Card to the Screen 🌟

    Currently, the card class is centered using margin-top, which doesn’t adapt well to different screen sizes. A better approach is to refactor the body CSS as follows:

    Refactored Code:

    .body {
    background-color: #d5e1ef;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: "Outfit", serif;
    min-height: 100vh; /* Ensures the content fills the entire screen height */
}

.card {
    height: auto; /* Let the content define the height */
    width: 100%; /* Make the card fluid */
    max-width: 320px; /* Maintain a maximum width for readability */
    border-radius: 2%;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center; /* Fixed typo: tex-align -> text-align */
}

    This change ensures the card is vertically and horizontally centered, even on smaller screens. Imagine reading a business card: you want it perfectly centered for easy focus.

    2. Avoid Using Fixed Heights for the Card 🏗️

    Setting a fixed height property limits flexibility. For instance, if you add more content or increase padding, the card might overflow. Instead, let the inner elements decide the height by using padding and margins.

    Refactored Code:

    .card {
    padding: 20px; /* Add padding to manage spacing */
    height: auto; /* Dynamic height adjustment */
    width: 100%;
    max-width: 320px; /* Ensures responsiveness */
    border-radius: 2%;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

    Think of this like resizing a box based on what you’re putting inside it — the box adjusts dynamically, rather than spilling over or leaving empty space.

    3. Make the Card Responsive 🖥️

    Using a fixed width (e.g., width: 320px) can break the layout on smaller or larger screens. Switching to max-width makes the card fluid and adaptive.

    Example:

    On mobile devices, the card will shrink proportionally instead of staying fixed at 320px.

    Refactored Code:

    .card {
    width: 100%; /* Fluid width */
    max-width: 320px; /* Restricts to a reasonable maximum */
}

    4. Use Semantic Tags for Better Accessibility 🎯

    The p tag is currently being used for the card’s main heading. Since it conveys the primary purpose of the card, an h1, h2, or h3 tag would be more appropriate. Semantic tags improve accessibility for screen readers and provide better document structure.

    Current Code:

    <p class="card-title">
    Improve your front-end skills by building projects
</p>

    Suggested Code:

    <h2 class="card-title">
    Improve your front-end skills by building projects
</h2>

    Imagine a search engine or screen reader trying to understand the card. Using an h2 signals, "This is important content!" — just like a bold heading in a newspaper article.

    Summary ✅

    1. Centering: Use min-height: 100vh for the body and remove margin-top from the card.
    2. Dynamic Height: Avoid fixed heights; let inner elements control the size.
    3. Responsiveness: Replace width with max-width.
    4. Semantic Tags: Replace the p tag with a heading tag (h2) for better accessibility and structure.

    Keep up the great work, and feel free to reach out if you have any questions! 🚀

  • Konrad•200
    @ExtendoGH
    What are you most proud of, and what would you do differently next time?

    I am proud of the following aspects of my project:

    — Utilizing CSS variables for color management, ensuring consistency and scalability.

    — Exclusively using REM units for responsive typography and layout.

    — Effectively positioning elements to achieve a clean and organized structure. — Faithfully replicating the original design with close attention to detail.

    — Using only class selectors in CSS, resulting in a clean, consistent, and maintainable codebase.

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

    I encountered a challenge with centering the box but resolved it by setting the height to 100vh.

    Aside from that, all other elements were implemented smoothly.

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

    I would appreciate feedback on the following areas of my project:

    — Is my approach to centering elements using height: 100vh the most efficient, or are there better alternatives?

    — Are there any improvements I could make to my use of CSS variables and class selectors to enhance maintainability or scalability?

    — Does the code follow best practices for responsive design, especially with the exclusive use of REM units?

    — Are there any areas where my positioning or layout could be optimized for better readability or accessibility?

    Specific insights or suggestions on these aspects would be highly valuable.

    QR Code Component

    2
    Aakash Verma•9,500
    @skyv26

    Hi @ExtendoGH, 😊

    I reviewed your project, and I must say you've done a commendable job! Here's a detailed breakdown of your code, along with some suggestions to improve it even further.

    1. Simplifying CSS Spacing with Flexbox

    Your current approach to using margin-bottom repeatedly for spacing works but can become hard to maintain as the project scales. Instead, leveraging display: flex on the container with gap is a more scalable and efficient solution.

    An Example:
    Imagine you’re organizing books on a shelf. Instead of leaving varying gaps manually between each book, you could use dividers that maintain consistent spacing.

    Refactor Suggestion:

    /* Current Code */
.qr-img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 2.4rem;
}

.qr-heading {
    color: var(--slate-900);
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 120%;
    margin-bottom: 1.6rem;
}

/* Refactored Code */
.qr-container {
    display: flex;
    flex-direction: column;
    gap: 1.6rem; /* Controls spacing between child elements */
    background-color: var(--white);
    border-radius: 20px;
    max-width: 32rem;
    padding: 1.6rem;
    filter: drop-shadow(0px 25px 25px rgba(0, 0, 0, 0.0477));
}

    Benefits:

    • Reduced CSS redundancy.
    • Dynamically adjusts spacing if new content is added.
    • Cleaner and more maintainable code.

    2. Meaningful Comments in CSS

    While your current comments are organized, they could be more descriptive to help other developers understand the intent behind specific styles. Avoid shorthand like "OUTFIT BOLD: FZ: 22px" and opt for explanations.

    Why this matters:
    Think of a recipe. Instead of writing "use 1 tsp," specifying "use 1 tsp of salt to enhance flavor" makes it easier for someone following the instructions.

    Refactor Suggestion:

    /* Current Comment */
--02--TYPOGRAPHY
- OUTFIT BOLD: FZ: 22px, LH: 120%, LS: 0px

/* Refactored Comment */
-- Typography
- Use Outfit Bold font for headings, ensuring readability with a font size of 22px, line height of 120%, and letter spacing of 0px.

    3. Optional but Handy: Avoiding Repetition in Styles

    Your solution to center cards with height: 100vh is excellent! While position-based centering (position: absolute; transform) works too, your method is simpler and easier to maintain. Great job! 👏

    Example of Position-Based Centering (not necessary here):

    .qr-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

    But your approach is better for this use case—cleaner and beginner-friendly.

    Final Note

    You're off to a great start! Keep experimenting with semantic HTML, flexible layouts, and concise commenting to make your code even more robust and future-proof. 🚀

    Feel free to reach out for further discussions or feedback. Happy coding! 😊

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

    Not really proud of anything. I didn't leverage layout tools like flexbox or grid as much as I would've liked. Everything was laid out using paddings and margins.

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

    I didn't come across a challenge.

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

    Writing CSS with responsiveness best practice. I want to be so good at naturally making my layouts responsive with the built-in tools CSS offers without deferring to media queries, and only using media queries when absolutely necessary.

    Social Media Card

    1
    Aakash Verma•9,500
    @skyv26

    Hi @larsenwald, 👋

    Thanks for sharing your project! You've made a good start, but there are a few areas where improvements will help you build a more polished and semantically correct structure. Here's my feedback and suggestions, with practical explanations and code snippets to make things clearer:

    1️⃣ Move CSS to an External File

    Currently, your CSS code is inline in the HTML file. Instead, it’s best practice to use a dedicated style.css file.

    Why?
    Think of your CSS as the outfit for your HTML content. Just like you store clothes in a closet for better organization, separating CSS improves readability, maintainability, and scalability of your project. It also enables reusability across multiple pages if your project grows.

    Refactored Code Example: Move the CSS code from your HTML file and create a style.css file:

    HTML File (index.html):

    <head>
  <link rel="stylesheet" href="style.css" />
</head>

    style.css:

    /* Move all CSS rules here */

    2️⃣ Use Semantic Tags for Accessibility

    In your HTML, you’re using a <div> with buttons for your social media links. While this works visually, it’s not semantically correct. Use a <ul> and <li> to organize these links properly and wrap each link with an <a> tag.

    Why?
    Imagine a screen reader is like a human guide explaining a webpage to a visually impaired user. It relies on proper semantics to provide accurate information. By using <ul> for a list and <a> for links, you're telling the guide, “Hey, this is a list of links!” This makes navigation easier for users relying on assistive technologies.

    Refactored Code Example:

    <ul class="social-links">
  <li><a href="#">GitHub</a></li>
  <li><a href="#">Frontend Mentor</a></li>
  <li><a href="#">LinkedIn</a></li>
  <li><a href="#">Twitter</a></li>
  <li><a href="#">Instagram</a></li>
</ul>

    CSS:

    .social-links {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 10px;
}

.social-links li a {
  display: inline-block;
  padding: 10px 15px;
  background: var(--grey-700);
  color: var(--white);
  text-decoration: none;
  border-radius: 5px;
  transition: background 0.3s;
}

.social-links li a:hover {
  background: var(--grey-500);
}

    3️⃣ Avoid Setting Fixed Heights for Links

    In your button styles, you’ve set a height: 40px. Instead, use padding to let the content dictate the height.

    Why?
    Think of a container holding water. If the container’s height is fixed, you risk overflow or unused space. By using padding, the container adjusts to the content, making it more flexible and easier to maintain.

    Refactored Code Example:

    .social-links li a {
  padding: 10px 20px; /* Adjust height using padding */
  border-radius: 5px;
  border: none;
  background: var(--grey-700);
  color: var(--white);
  font-weight: 600;
  font-size: 1.4rem;
  cursor: pointer;
  transition: background 0.1s, color 0.1s, transform 50ms;
}

    4️⃣ Let Content Decide the Card Height

    In your <main> styles, you’ve used a fixed height of 560px. Instead, let the content determine the height by using padding and flexible layout techniques.

    Why?
    A fixed height can lead to unnecessary blank space or cut-off content, especially if the text or layout changes. It’s like wearing a pair of shoes that don’t fit—uncomfortable and limiting!

    Refactored Code Example:

    main {
  background: var(--grey-800);
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  padding: 35px; /* Adjust spacing */
  align-items: center;
}

    Additional Tip: Use Prettier for Code Formatting

    To improve readability and structure, use the Prettier extension for your code editor. It automatically formats your HTML, CSS, and JS, saving you time and effort. Think of it as a cleaning robot for your code—it keeps everything tidy without manual work.

    Great job so far! With these changes, your project will be more semantic, maintainable, and accessible. Let me know if you have questions or need further assistance! 🚀

    Best,
    Aakash

  • Nebil-Abdulfetah•50
    @Nebil-Abdulfetah
    What are you most proud of, and what would you do differently next time?

    I am proud of the way the project turned out, I would do the structuring of containers properly next time.

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

    I didn't know how to self host fonts, I googled and learned how to do that.

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

    I would like to get comments on all aspects of the project since I am a beginner.

    Blog-post Card using flex-box

    1
    Aakash Verma•9,500
    @skyv26

    Hi @Nebil-Abdulfetah, 👋

    Your implementation looks solid overall, but there are some key areas where you could improve accessibility, semantics, and maintainability. Let’s dive into each point with detailed explanations and examples. 😊

    1️⃣ Use <img> Tag for Content Images

    Observation:

    In the code, important content-related images (e.g., profile image and card image) are added as background images using CSS.

    Why This Matters:

    Using semantic HTML is like giving clear directions to someone unfamiliar with a place. For instance, imagine handing someone a well-labeled map versus a scribbled napkin drawing. Screen readers, search engines, and other assistive tools rely on proper semantic tags to understand the content's intent. By placing content images inside <img> tags:

    • You improve accessibility for visually impaired users.
    • You make your content SEO-friendly.
    • You clearly communicate the purpose of the image.

    Refactored Code:

    Profile Section:

    <div class="profile">
  <img
    src="../assets/images/image-avatar.webp"
    alt="Profile picture of Greg Hooper"
    class="profile-img"
  />
  <div class="profile-name">Greg Hooper</div>
</div>

    CSS:

    .profile-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

    Card Section:

    <div class="card">
  <img
    src="../assets/images/illustration-article.svg"
    alt="Illustration for the article"
    class="card-img"
  />
</div>

    CSS:

    .card-img {
  height: 200px;
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
}

    Key Takeaway:

    Images that convey meaning should always be inside <img> tags with proper alt attributes. Background images should be reserved for decorative elements that do not add value to the content itself.

    2️⃣ Decorative Images Belong as Backgrounds

    Observation:

    While content-related images are placed as backgrounds, it’s good practice to limit this approach to purely decorative images (e.g., subtle patterns or visual enhancements).

    Example in Real Life:

    Think of this as placing a motivational poster in a meeting room. It's there to add ambiance but doesn't affect the meeting's purpose or decision-making.

    Recommendation:

    For purely decorative images, continue using CSS background properties but ensure:

    • They do not mislead or confuse screen readers.
    • They do not include important visual content.

    Final Thoughts: 🌟

    • Your work is heading in the right direction. Refining semantic HTML practices will boost the quality and accessibility of the project.
    • These changes will improve usability and make your code more professional and maintainable for the team.

    Keep up the great work! 🚀 Let me know if you have any questions or need further clarification. 😊

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

    I am proud that I finished another challenge.

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

    I started writing HTML using the ul, ol and table elements. During the styling process I found it easier to replace them with regular elements and use css grid to achieve an accurate design of the figma file.

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

    You are welcome to leave any feedback.

    Recipe page challenge -HTML / CSS

    2
    Aakash Verma•9,500
    @skyv26

    Rather than changing your whole approach, add more generic tags and more and more styles you should use the previous approach of ul,ol and table.

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

    I am proud that I finished another challenge.

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

    I started writing HTML using the ul, ol and table elements. During the styling process I found it easier to replace them with regular elements and use css grid to achieve an accurate design of the figma file.

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

    You are welcome to leave any feedback.

    Recipe page challenge -HTML / CSS

    2
    Aakash Verma•9,500
    @skyv26

    Hi @VirginiaPat, 👋

    Your layout is visually appealing and responsive across screen sizes—great work! 😊 I have a few suggestions to improve the semantic structure of your code, making it more maintainable and accessible. Let's dive in! 🛠️

    1. Simplify bullet points with <ul> and <li>

    In your current implementation, you're using custom grid styles and icons for bullet points. While this works visually, it's unnecessarily complex. Using <ul> and <li> would achieve the same result with less code and better semantics.

    Example (Before):

    <div class="grid-4cols grid-5rows">
  <div class="dot-style col2-row1">
    <ion-icon name="ellipse"></ion-icon>
  </div>
  <p class="text16px-Stone600 col4-row1">
    <span>Total:</span> Approximately 10 minutes
  </p>
</div>

    Refactor (After):

    <ul>
  <li><span>Total:</span> Approximately 10 minutes</li>
  <li><span>Preparation:</span> 5 minutes</li>
  <li><span>Cooking:</span> 5 minutes</li>
</ul>

    💡 Why? Imagine explaining to a friend: instead of manually drawing bullet points, you use a pre-made list notebook. It’s quicker and less prone to mistakes!

    2. Ingredients section

    Similarly, your ingredients list can be simplified with a <ul> tag. It’s perfect for unordered lists like this.

    Example (Before):

    <div class="flex-container">
  <h2 class="ingredients-title">Ingredients</h2>
  <div class="grid-4cols grid-9rows">
    <div class="dot-style col2-row1">
      <ion-icon name="ellipse"></ion-icon>
    </div>
    <p class="text16px-Stone600 col4-row1">2-3 large eggs</p>
  </div>
</div>

    Refactor (After):

    <h2>Ingredients</h2>
<ul>
  <li>2-3 large eggs</li>
  <li>Salt, to taste</li>
  <li>Pepper, to taste</li>
  <li>1 tablespoon of butter or oil</li>
  <li>Optional fillings: cheese, diced vegetables, cooked meats, herbs</li>
</ul>

    3. Ordered lists for step-by-step instructions

    For sequential steps, an <ol> tag is ideal as it provides built-in numbering.

    Example (Before):

    <div class="grid-4cols grid-11rows">
  <p class="instrct-number col2-row1">1.</p>
  <p class="text16px-Stone600 col4-row1">
    <span>Beat the eggs:</span> In a bowl, beat the eggs...
  </p>
</div>

    Refactor (After):

    <ol>
  <li><strong>Beat the eggs:</strong> In a bowl, beat the eggs...</li>
  <li><strong>Heat the pan:</strong> Place a non-stick frying pan over medium heat...</li>
  <li><strong>Cook the omelette:</strong> Once the butter is melted...</li>
  <li><strong>Add fillings (optional):</strong> When the eggs begin to set...</li>
  <li><strong>Fold and serve:</strong> As the omelette continues to cook...</li>
  <li><strong>Enjoy:</strong> Serve hot...</li>
</ol>

    💡 Why? Think of reading instructions in a recipe book—it’s easier to follow when steps are clearly numbered.

    4. Use <table> for tabular data

    For the nutrition table, <table> tags make your data more semantic and easier for screen readers to interpret.

    Example (Before):

    <div class="nutrition-table">
  <p class="text16px-Stone600 col2-row1">Calories</p>
  <p class="nutri-col2 col4-row1">277kcal</p>
</div>

    Refactor (After):

    <table>
  <tr>
    <th>Nutrient</th>
    <th>Amount</th>
  </tr>
  <tr>
    <td>Calories</td>
    <td>277kcal</td>
  </tr>
  <tr>
    <td>Carbs</td>
    <td>0g</td>
  </tr>
  <tr>
    <td>Protein</td>
    <td>20g</td>
  </tr>
  <tr>
    <td>Fat</td>
    <td>22g</td>
  </tr>
</table>

    💡 Why? Tables are like spreadsheets. They group and align related data logically, making it easier for both humans and computers to parse.

    Final Thoughts

    By adopting semantic HTML, you’ll:

    • Simplify your code, making it easier to maintain 🧹.
    • Improve accessibility for screen readers 🎙️.
    • Reduce unnecessary CSS and markup 📉.

    Keep up the great work, and feel free to reach out if you have any questions! 🚀

    Best regards,
    Aakash

    Marked as helpful
View more comments