Skip to content
OverviewSolutions
38
Comments
71

Tharun Raj

@Code-BeakerMalappuram, Kerala, India1,330 points

I'm a 12th-grade student from India 🇮🇳, learning web development. Currently, I know HTML,CSS and some basic Javascript. 😃

I’m currently learning...

I am currently learning the core concepts of JavaScript to make my websites interactive and usable.

Latest solutions

View more solutions

Latest comments

  • Tharun Raj•1,330
    @Code-Beaker

    Hey there, good job finishing this challenge! ☻

    Unfortunately your live preview does't seem to work. Try deploying again via GitHub Pages or platforms like Netlify or Vercel. Hope this helps.

  • Stryde2022•490
    @Stryde2022
    What are you most proud of, and what would you do differently next time?

    so far, this is the fastest i have completed anything on here, i am super happy of that.

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

    N/A

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

    As i said, this is my best so i want alot of criticisms so that i know how i can get better. Please criticisms are welcomed

    Responsive 3 column card design using css and html

    #angular#express
    1
    Tharun Raj•1,330
    @Code-Beaker

    Hey there. Congratulations on completing this challenge. I'm sure you must've had fun playing around with your HTML and CSS knowledge! 🎉

    I have visited your live site and checked the source code. I have come to notice that while focusing on the looks of the site, you need to make sure you use the most appropriate tags for each element.

    • The buttons in this case are links that are styled like buttons. It is better to use a tags when creating links like these.
    • Use min-height: 100vh instead of height: 100vh. Using just the height will prevent the page's vertical height on mobile phones and smaller devices.
    • Instead of px, use rem values which are more responsive and easier to handle.
    • Use CSS Variables to make your code more re-usable. You can assign a name to a property and call use that property by that name.
    • Your site isn't responsive for mobile so you can try out media queries and optimise it to be viewed on phones.

    That's all I've wanted to point out. I hope this helps you improve your solution.

    Happy coding! 😄

    Marked as helpful
  • Tharun Raj•1,330
    @Code-Beaker

    Hi 👋 Good job completing the challenge. I want to share some of my suggestions for improving your solution.

    • Use colors with good contrast to make it readable. The links are not clearly readable because it's black inside grey.
    • You don't need to use all that unnecessary JavaScript in this project. Simply use the <a tag to create all those links. Something like this:
    <ul>
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
...
</ul>
    • You could minimize the use of br tags by using a display: flex on the ul element and adding a gap: 1rem.
    • There's a typo in the project title: "Social medai" -> media
    • Make sure heading tags decrease one by one.
    h1
h2
h3
...
...

    This is essential for the accessibility of the website.

    • Instead of px, you can use either rem or em to make responsive layouts easier for you.
    • Use class selectors instead of tag selectors. Tag selection can mess up your code when you're dealing with large projects.
    • Use CSS Variables or Custom properties to make your CSS reusable.

    I hope this helps you learn something new! 🤝

  • Tharun Raj•1,330
    @Code-Beaker

    Hi friend! 👋 Congratulations on completing this challenge 👏🥳

    I have noted down a few points while I visited your website and source code and I would like to share it with you and help you improve your solution.

    • Instead of using pixels, use relative units like rem to make it easier to make the website responsive for different screens.
    • There's no need of these lines of code:
    body {
    width: 100%;
    height: 100%;
}

    The body element already takes the full width and height of the document and hence it doesn't make any difference. Same applies to the main element.

    • The links should be wrapped in a tags and not button tags. They're meant to be links that take you to an external website. Right now, they're set to be buttons and do not serve their actual purpose.
    • You can use CSS Custom Properties and avoid writing the same thing again and again for CSS properties. Here's a guide on Getting started with CSS Custom Properties
    • NEVER set font-size in pixels. Read this.

    That's what I've got for you. I hope you found these helpful! 😊

    Marked as helpful
  • Tharun Raj•1,330
    @Code-Beaker

    Hi there, congratulations on completing the challenge. You've done a good job with this one... 🥳

    I have taken a look at your live preview and source code. Let me share some of my suggestions to help you improve your current solution.

    • Use class for styling components rather than the element/tag selector. When working on big projects, classes can be a lifesaver. Using tags can make it complex and confusing as it applies to all instances of the specified tag.
    • The "Change" link should not be wrapped inside p tag. It is a link and should only be wrapped in an a tag.
    • You can have the buttons use the same font as the rest of the body by using an inherit in the CSS:
    body {
font-family: "Red Hat Display", sans-serif;
}

button {
font-family: inherit;
}
    • There's an easier way to center something vertically and horizontally on a page by using display: flex:
    .container {
display: flex;
justify-content: center;
align-items: center;
}

    But, you need to move the card's elements into a new container.

    <div class="container">
<div class="card">
... EVERYTHING INSIDE THE CARD GOES HERE ...
</div>
</div>
    • Import Google Fonts inside the HTML. This is better for the website's performance.
    • Use CSS Variables/Custom Properties to improve reusability across your CSS. Here's how you can create variables:
    :root {
--font-main: "Roboto", sans-serif;

--weight-light: 300;
--weight-regular: 400;
--weight-bold: 700;

--color-white: #fff;
--color-black: #000;
}

    Learn more about variables here

    • Never* use pixels to set your font size. Here's why

    Hope you find these helpful in improving your solution, Happy coding! 😄

    Marked as helpful
  • Og-successful•280
    @Error-at-night
    What are you most proud of, and what would you do differently next time?

    I'm proud I also able to solve the challenge and finally put RTK query into practice. If I'm to solve the challenge next time, I will build it as a full stack project, right now I'm just using json-server to generate endpoints

    To start this application run the following command (in your terminal) in the project directory

    • npm install
    • npm install json-server (if you don't have json-server installed)
    • npm json-server --watch data/data.json --port 8000
    • npm run dev

    Interactive comments section using React, RTK query, Tailwindcss

    #react#redux-toolkit#tailwind-css
    1
    Tharun Raj•1,330
    @Code-Beaker

    Hi there, congratulations on completing this challenge... 🥳

    I visited your live preview and unfortunately it throws the error "Could not fetch the comments".

    I hope you will look into it and fix the issue. Good luck! 😄

View more comments