All comments

VANI MITTAL• 120
@vanimittal1304
Submitted 2 days ago
Order-Summary-Component
1
Tharun Raj• 520
@Code-Beaker
Posted 2 days ago
Hi there, congratulations on completing this challenge. You've done a great work! 🎉

I would like to put forward some of my suggestions regarding your solution that might help you improve it.

use proper tags for the elements. for example, the "Change" is a link. You have used a <p> tag in your HTML to create that element. But, as it is a link, it should be an anchor tag.

<a href="#" class="change">Change</a>

this will also help you minimise the HTML you're writing. Instead of a p wrapped in a div, simply use an a tag.

Do the same for the "Cancel Order". It is also a link.

instead of using

body { height: 100vh; }

use:

body { min-height: 100vh; }

use rem instead of px. While using px is certainly not wrong, rem values are better when building responsive layouts and is easier to handle. If you wish to learn more about this topic, refer to this article

Overall, your solution looks impressive.

Hope this helps you learn something new! 😃
Marked as helpful
0
Renata Guimarães• 20
@guimaraesrenata
Submitted 2 days ago
What are you most proud of, and what would you do differently next time?

I am proud of being able to do it by myself.

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

I had a challenge to center the main box, I overcome it using flexbox at the body.

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

If you can take a look at my code and see where I can improve.
Social media project with HTML and CSS
2
Tharun Raj• 520
@Code-Beaker
Posted 2 days ago
Hi there, congratulations on completing this project. You've done a great work! 🎉

Your project looks good and you have kept the contrast well for the active States of the hover.

However here are some of my suggestions regarding your solution that might help you improve it.

use classes instead of id. You should use a class if you need to use the same selector more than once within a page or a site. While an ID is specific to a single element, classes can be assigned to multiple elements on a page or throughout the website

instead of height: 100vh, use a min-height: 100vh height property will limit the height to 100vh which will cause issues on mobile phones/smaller screens where it blocks the content’s height.

usereminstead of pxfor font size, posting, margin, etc. If you want to learn more on this, refer to this article

Other than that your solution looks good 👍

Hope this helps you learn something new! 😊
0
P
Koda👹• 1,930
@kodan96
Submitted 3 days ago
What are you most proud of, and what would you do differently next time?

Made with:

HTML 🦴

CSS 🎨

JS 🤖

used jQuery and Showdown.js libraries 📚

mobile-first workflow 📱📱

you can save, edit and update docs 📃📃

used prefers-color-scheme to match the site's theme with user preference

used localStorage, so the editor will still have your files when you return to it after closing it

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

I took a something-like-React way to dynamically render elements from localStorage into the My Documents section, I wonder if there's an easier way to do it.
Functional In-browser Markdown Editor 📌📌 w/HTML, CSS & JS
#jquery
3
Tharun Raj• 520
@Code-Beaker
Posted 3 days ago
Great! I have noticed that the filename is too dark and is almost impossible to see and read. Try a lighter color maybe?
Marked as helpful
0
Dkojak• 10
@Dkojak
Submitted 3 days ago
used containers
1
Tharun Raj• 520
@Code-Beaker
Posted 3 days ago
Hi there, congratulations on completing this challenge. Your solution looks beautiful! 🎉

I would like to share some of my suggestions regarding your solution, that might help you improve it.

On hovering, the text of the links is not readable due to poor contrast. Consider changing it to a darker color to maintain the readability.

instead of using a br for the gap between the links, create a container with flex and then put them inside the container. This will make your HTML much better.

also, you don't need to put a button inside an anchor tag. If the link is considered as a button, then just keep the anchor tag and then style it to look like a button. change your HTML into something like this:

<div class="container"> <a href="https://github.com/dashbord" target="_blank">GitHub</a> <a href="https://github.com/dashbord" target="_blank">Frontend Mentor</a> ....... ....... </div>

then, style it using the CSS:

.container { display: flex; justify-content: center; align-items: center; gap: 1rem; /* change this to an appropriate value */

use a CSS reset to remove all the default browser styles and apply your own. Here's a guide on how and why use a CSS reset

Hope this helps you! 😊
0
Risa2422• 30
@Risa2422
Submitted 3 days ago
Social links profile
1
Tharun Raj• 520
@Code-Beaker
Posted 3 days ago
Hi there, congratulations on completing this project. You've done a great job! 🎉

Your project looks good and you've tried to get it close to the design. I have some suggestions regarding your project that might help you improve it.

the social links must be created using anchor tags because they're links. currently they're list items that are inside a ul. I recommend to change it to something like the code-block below with your classes/ids.

<ul> <li> <a href="#">GitHub</a> </li> </ul>

on hovering the links, the text is not readable. Consider using a darker color instead of white. A more appropriate and contrasty color would be the `

use a min-height instead of height for the container. height: 100vh will restrict the height of the container on mobile phones and the website will not be responsive.

.container { min-height: 100vh; }

use CSS variables or custom properties in projects like this. It will help you in not remembering the color's hex/hsl codes everytime.

Example:

for the dark background color, create a variable like this:

:root { --dark-color: hsl(0, 0%, 8%); }

to use it, simply use:

body { background-color: var(--dark-color); }

If you wish to learn more about this topic, check out this article from MDN

I hope this helps you learn something new 😊
Marked as helpful
0
Sumedha Koranga• 70
@sumedhakoranga
Submitted 4 days ago
What are you most proud of, and what would you do differently next time?

I am learning about responsive layouts and what units I should use in CSS.

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

I am having a problem with my browser every time I refresh the page. It shows the page differently, and I am trying to figure it out.

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

Could you please review my code and provide suggestions on potential improvements? I'm interested in understanding what practices I should avoid and what enhancements I might consider. I appreciate your guidance on this!
product-preview-card
2
Tharun Raj• 520
@Code-Beaker
Posted 4 days ago
Hi there, congratulations on successfully completing this challenge. You've done a great work on this one! 🎉

Your HTML is well structured and you've used the appropriate tag for the elements. However, I came across some issues when I opened it on mobile view.

the image was overflowing the container.

the font-size wasn't responsive for smaller screens.

The max-width of the image should be 100%. It will help the overflowing of the image.

Using flex isn't wrong but, an easier option would be grid. Grid is easier to make layouts like this and to make responsive.

On mobile design, you can make it like this:

.container { display: grid; grid-template-columns: 1fr; }

and on desktop, you can change it like this:

@media (min-width: 800px) { .container { display: grid; grid-template-columns: repeat(2, 1fr); } }

I suggest you to play a little with your media queries and adjust the font-size for smaller screens. Currently it is too big and is nearly overflowing the container.

If you wish to learn more about responsive design, check out these articles from:

freeCodeCamp

MDN

I hope you find this helpful! 😄
Marked as helpful
0
Solo-Saad• 20
@Solo-Saad
Submitted 7 days ago
What are you most proud of, and what would you do differently next time?

I'm not proud od anything I took alot of time to do it

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

In all the project

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

All of it
Blog Preview Card
1
Tharun Raj• 520
@Code-Beaker
Posted 7 days ago
Hi there, congratulations on completing this project. You've done a great work on this one! 🎉

First of all, take your time. There is no need to hurry when approaching a project/challenge. Take your time to think and imagine how you're about to complete it and then just work on it. 😊

I have some suggestions regarding your project that might help you:

For projects like this or a bigger project, use an external CSS file instead of putting your styles inside the HTML file itself.

use rem values instead of px. For example:

.blog { width: 30rem; /* change this value */ }

you can also use it for font-size, margin and many more properties. If you wish to learn more about rem, check out this article

your blog element is not centered on the screen. You can fix that by giving a flex layout to the body element and centering it.

body { display: flex; justify-content: center; align-items: center; }

Hope this helps you to learn something new! 😄
0
Niloy Das• 230
@NiloyDas07
Submitted 9 days ago
What are you most proud of, and what would you do differently next time?

This one was pretty simple.

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

I was pretty smooth.

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

Nothing particular in this one. Any feedback is appreciated.
Responsive Page
2
Tharun Raj• 520
@Code-Beaker
Posted 9 days ago
Hi there, congratulations on completing this challenge! You've done a great work on this one. 🎉

I have a suggestions regarding your website that you might find helpful.

Use rem instead px when defining the width of your container. rem is considered better for use and also is better when making your website responsive.

If you wish to learn more, see this article

Hope this helps you learn something new 😄
0
kozmanashvili• 150
@kozmanashvili
Submitted 9 days ago
competed
#accessibility
1
Tharun Raj• 520
@Code-Beaker
Posted 9 days ago
Hi there, congratulations on completing this challenge! You've done a great work on this one! 🎉

I have some suggestions regarding your project that might help you improve it:

this project lets you work with your CSS grid layout skills. As far as I could understand, you've used three separate rectangles with margins and paddings to join them together. If you're struggling with the grid, I recommend you to go through these resources:

Kevin Powell's tutorial on CSS grid

MDN Documentation

Other recommendations:

use an external stylesheet instead of placing your CSS inside the html file. It is recommended when approaching projects like this and bigger projects as well.

don't use percentages for margins because they're hard to maintain:

don't do this:

margin: 24%;

instead, use rem:

margin: 2rem; /* change this value */

use better class names. It is recommended to give class to elements that describe what they're for example,

when you have a navigation bar with a <nav> element, use a class name like

<nav class="navbar"></nav>

it gives you a better idea about the element.

to center the card both vertically and horizontally, you can give the body a flex and then center them like so:

body { display: flex; justify-content: center; align-items: center; min-height: 100vh;

my personal recommendation is to avoid using this on the body itself and instead use a main or a div element.

use Google Fonts to import the fonts that are required in this project.

Hope this is helpful to you 😃
Marked as helpful
0
Eyu32• 120
@Eyu32
Submitted 10 days ago
social-links-profile-main
1
Tharun Raj• 520
@Code-Beaker
Posted 10 days ago
Wow, loved the idea of taking this further with a dark-theme toggle! 😄
0
Nathan B• 90
@natebe4
Submitted 10 days ago
What challenges did you encounter, and how did you overcome them?

Mobile sizing media queries. Still learning that.

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

Media queries for mobile.
Order-Summary-Component
1
Tharun Raj• 520
@Code-Beaker
Posted 10 days ago
Hi there, congratulations on completing this project, you've done a great job! 🎉

This might not be the help you've specifically asked for but, I would like to put forward some of my suggestions regarding your HTML and CSS.

instead of using a div for the buttons, use either an a(anchor) or button tags. They are more accessible to the users. This will also reduce a few lines of code for you.

Apply this to:

"Change" link

"Proceed to payment" button

"Cancel Order" link

Instead of:

<div class="payment-button"> <p id="PTP">Proceed to Payment</p> </div>

You can try using:

<button class="payment-button">Proceed to Payment</button>

or:

<a href="#" class="payment-button">Proceed to Payment</a>

These make much more sense for a button.

instead of height use a min-height for the container:

.container { min-height: 100vh; }

use rem instead of px for: rem is more of a flexible unit when it comes to making responsive websites.

font-size

padding

margin If you want to learn further, check this article.

Hope this helps you improve your solution! 😄
Marked as helpful
0
Lokesh S• 110
@Lokesh0212004
Submitted 10 days ago
What are you most proud of, and what would you do differently next time?

In this website I used bootstrap framework at first time onwards, it is satisfied.
News Homepage
1
Tharun Raj• 520
@Code-Beaker
Posted 10 days ago
Hi there, congratulations on completing this challenge! 🎉

I attempted to visit your website and my browser blocked the website stating that it's a "Dangerous site". I think there is an issue with your hosting. In that case, check out these free website hosting platforms:

Vercel

Netlify

I have checked your solution and it looks good. You've done great with customizing Bootstrap. Great work.

I hope this helps you improve your solution. Happy Coding! 😄
1
Deepu23456• 90
@Deepu23456
Submitted 20 days ago
What are you most proud of, and what would you do differently next time?

by making this project i came to know that how good and efficient CSS is important for a developer which helps to get rid with repetitive code. So next time i will try to enhance my code optimization skills and work more on them. Thank You ......

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

Honestly its not that much challenging so i actually didn't encounter as such challenge but yes whenever i got stuck on some problem i refer to google and MDN documents which helps me a lot. Thank You.....

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

I like CSS part very much and also enjoys it while coding. But not a lie i also like Js part but only when the problem is solving step by step whenever it get stuck for more than 30-40 minutes i lose my patience. Its all about this but working on that stuck part and get success in that is another level of happiness for me. Thank You....
CSS flex Box, javascript event listener...
2
Tharun Raj• 520
@Code-Beaker
Posted 15 days ago
Hi there, you've done a great job regarding this solution.

Here are some issues that I came across in your solution:

It seems like there is a white box below the pop-up and also the popup is not in the right position.

On mobile, the pop-up does not have proper width. It overflows the container.

Here's how you can improve your code in this one:

instead of creating a share-container element, place the share inside the profile-section itself. Then give the profile-section the following properties:

.profile-section { position: relative; }

then give the share element:

.share { position: absolute; right: 0; bottom: 25px; /* change this value if you want */ }

There is no need of the share-container.

I see that you've tried to create the little triangle that joins it with the share icon. But it's actually blocking the content beneath it.

These are small issues that can be solved to make the website better. I hope you look into the problem and understand how to fix it.

Hope this helps you improve your solution!
0
Giovanna Lago• 20
@LagoGiovanna
Submitted 18 days ago
What specific areas of your project would you like help with?

I would like to understand more about making a responsive web page. I feel like his is hard for me.
A simple web social link-sharing profile page using HTML and CSS.
5
Tharun Raj• 520
@Code-Beaker
Posted 18 days ago
Hi there, congratulations on successfully completing this challenge. You've done a great work with this one!

The desktop design looks good. But, you need to add a media query to make your website responsive.

to make it easier, don't use % for the width and height of the container(#main-content). Instead use rem. This is better for responsive design.

#main-content { width: 30rem; /* change this to an appropriate value */ height: auto;

To make the website responsive, you need to add a media query to your code.

@media (width < 50rem) { #main-content { max-width: 20rem; /* or an appropriate value */ }

Hope this helps you 😊
Marked as helpful
1
Ikechukwu Chiemelie Charles• 160
@IkechukwuChiemelieCharles
Submitted 20 days ago
What are you most proud of, and what would you do differently next time?

Am Proud of how I was able to make them responsive on different screen sizes

What I would do differently is Using color variables to store my colors and reusing them

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

I would want to be helped with how I can make the social logo (Facebook, Instagram and Twitter) change color when hovered
A landing Page built with HTML & CSS
3
Tharun Raj• 520
@Code-Beaker
Posted 20 days ago
Hi there, congratulations on completing this project! It's a great work you've done on this one. 😊

I attempted to visit your website and I noticed an issue with the output.

The font size on desktop is really small to the point where it becomes very hard to read.

To make the readability better for the desktop version, consider increasing the font-size of the elements accordingly for a better experience.

Hope this helps you.
Marked as helpful
0
SuriyanRavi• 170
@SuriyanRavi
Submitted 20 days ago
Fylo Landing page
1
Tharun Raj• 520
@Code-Beaker
Posted 20 days ago
Hi there, congratulations on completing this project. You've done a great job with this one!

I have some small suggestions regarding your website that might help you make it better:

Use class instead of id in your HTML.

I attempted to visit your website on a desktop and I noticed that, the <img id="img2" src="./images/illustration-2.svg" alt="" width="500px"/> was overflowing my screen (image from "Stay productive, wherever you are" section).

This can be prevented by removing the width="500px" from your html and adding reset to your css:

img { max-width: 100%; }

instead of flex, for a better and easier layout control, you can your display: grid for your sections. Like this:

#content2 { display: grid; grid-template-columns: repeat(2, 1fr); }

this will be better for handing 2-column layout compared to flex.

Note: change the id selector to either a class or to your liking...

The footer links have poor contrast making it hard to see and read. Try a lighter color for them.

Mobile responsiveness of the site still needs some work. Currently, it looks like the width of the whole body is shrinking and not the elements.

I hope you find this helpful... 😊
0
Mr-Khaira• 30
@Mr-Khaira
Submitted 20 days ago
What are you most proud of, and what would you do differently next time?

I am aiming to land an internship, and I want to be able to code with professional standards, hence I would focus on making my projects more like production code, the methodologies which currently, I am not aware of.

I will appreciate it, if you would find it in your heart to spare some of your precious time to provide me valuable guidance, on improvements, and how I may land my first job.

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

The complexities of the validation of the input fields, for instance to make up the logic for when to show "must be a valid day" or "day is required", was challenging but was solver by the use of "touched" method of the React-Hook_form lib.

I will appreciate it, if you would find it in your heart to spare some of your precious time to provide me valuable guidance, on improvements, and how I may land my first job.

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

The core logic, that was to calculate the age up to the precision of day was quite complicated and cant be accurate because, the value for month is not a constant.

I will appreciate it, if you would find it in your heart to spare some of your precious time to provide me valuable guidance, on improvements, and how I may land my first job.
React-hook-form, responsive, custom font, react JS
#react#semantic-ui
1
Tharun Raj• 520
@Code-Beaker
Posted 20 days ago
Hi there, congratulations on completing this challenge! 🎉

I attempted to visit your website and it looks really good on both mobile phones and desktop. You've done a great job on this design and its responsiveness.

But I came across a small issue: The details I enter turn white and I can't see it. I tried refreshing the page but, it remains the same.

I hope it helps you to improve your solution!
Marked as helpful
1
Azize Doğan• 100
@azizedogan
Submitted 23 days ago
What are you most proud of, and what would you do differently next time?

I'm proud of making it easier and more responsive.

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

I had a little difficulty creating a responsive design. I overcame this difficulty by reading different codes.

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

I want help with responsive design.
Responsive Recipe Page Using CSS Flexbox
3
Tharun Raj• 520
@Code-Beaker
Posted 21 days ago
Hi there, congratulation on completing this challenge! 🎉

You've done a great job regarding the responsiveness of the website on mobile phones.

The two points below will help you fix the image on mobile phones.

set an overflow hidden to the container:

.container { overflow: hidden; }

add a small padding to the head-img

.head-img { padding: 1rem; /* should be fine in this case */ }

Change the padding accordingly.

This will make the image look better on smaller screens.

Hope you find this helpful!
0
Danilo Lucban• 40
@dannncode
Submitted 21 days ago
What are you most proud of, and what would you do differently next time?

.

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

.

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

.
Social Link Profile
1
Tharun Raj• 520
@Code-Beaker
Posted 21 days ago
Hello and congratulations, it's a great work you've done on this solution! 🎉

I have a little suggestion that might help you in making it look better on mobile phones.

Consider adding a media query to your solution. Like this:

@media (width < 50rem) { /* your CSS code here */ }

You can change the width however you like.

Hope this helps you 😄
0
Lauren Molloy• 10
@LaurenAMolloy
Submitted 22 days ago
What are you most proud of, and what would you do differently next time?

This is the first time sharing some code in public. It is also the first time I have completed a project without a tutorial or step by step guide. I am proud of attempting this project. Since I started learning JavaScript, I have neglected using HTML and CSS and just using prewritten files from my course. This challenge really helped me realise the importance of consistent practice and regular reflection.

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

This took me a while, so I suppose one challenge is not being fluent enough writing my own code and being dependent on tutorials. This is the main reason why I joined this community. Another challenge was making the site responsive. For the next challenge my goal is to not look at any of the solutions till I have submitted my own. :)

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

How could this be improved? What advice would you give moving forward to sharpen the skills used in this challenge for future challenges? What would be some skills to learn next in order to progress? There is so much to learn!
qr-code-component using HTML and CSS
2
Tharun Raj• 520
@Code-Beaker
Posted 22 days ago
Hi there, congratulations on completing this challenge! It's a great work you've done 🎉

Try using rem instead of using px because rem is handier in making the website responsive and it's considered more responsive.

If you wish to learn more on this topic, check out this article on why you should use rem

I hope you find this helpful!
Marked as helpful
0
Kaung Khant Ko Ko• 330
@Kaung-Khant-Ko-Ko
Submitted 22 days ago
Fylo website using CSS Grid and Flexbox with JS code for email check
1
Tharun Raj• 520
@Code-Beaker
Posted 22 days ago
Hey, it's a great work you've done on this challenge. Congratulations 🎉

I would like to share my suggestion about making the website responsive for mobile phones and smaller screens in general. This way, people who have a device with smaller screens can view it and it will be a better experience.

Good luck!
1
P
Julie Crotzer• 340
@JCrotzer
Submitted 24 days ago
What are you most proud of, and what would you do differently next time?

Just working on fun projects to enhance my coding skills.

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

N/A

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

None
Responsive landing page using flex, html and css
2
Tharun Raj• 520
@Code-Beaker
Posted 24 days ago
Hi, congratulations on finishing this project! It is a great work.

Here are some of my recommendations regarding your solution:

Instead of using <div> for the link and p for the text inside the link, like this:

<div class="link"> <p>GitHub</p> </div>

You can use an anchor tag so it is more accessible and so that the element matches its original purpose. You can use this method:

<a class="link">GitHub</a>

This will help you minify your CSS by styling an anchor tag instead of a <p> inside a <div>.

Hope this helps you. Happy Coding 🎉
0
P
Justin Connell• 720
@justinconnell
Submitted about 1 month ago
What are you most proud of, and what would you do differently next time?

I took an adaptive design approach to this project because the elements can be arranged well on the two screen sizes it was designed for.

CSS Grid was ideal for laying out the page and toggling between the mobile and desktop layout by changing the grid dimensions.

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

I found it challenging to use fluid sizing for the rating and review cards and opted to use static width and height properties and change those with media queries for the relevant screen sizes.

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

Any suggestions on approaching fluid layout will be greatly appreciated.

Thanks!
Adaptive design social proof page
1
Tharun Raj• 520
@Code-Beaker
Posted about 1 month ago
Hi Justin, congratulations on completing this project!

I checked the live preview on my phone and laptop. On mobile it works well and is responsive. But, the site isn't displaying the column layouts on desktop. This might be due to the min-width value added to your media queries.

Consider adding a smaller min-width for your media queries and it should work.

@media (min-width: 800px) { /* media queries code here */ }

Hope this helps!
0
myrh• 100
@myrhisyoinked
Submitted 9 months ago
What is the best practice to center elements horizontally and vertically?
HTML Semantic, CSS
#accessibility
4
Tharun Raj• 520
@Code-Beaker
Posted 9 months ago
Hi there!

Congratulations on completing this project! 🎉

Here is the code that's commonly used for centering content horizontally and vertically:

.element { display: flex; justify-content: center; align-items: center; }

Hope you find this helpful!
1

Tharun Raj

All comments

Order-Summary-Component

Social media project with HTML and CSS

Functional In-browser Markdown Editor 📌📌 w/HTML, CSS & JS

used containers

Social links profile

product-preview-card

Blog Preview Card

Responsive Page

competed

social-links-profile-main

Order-Summary-Component

News Homepage

CSS flex Box, javascript event listener...

A simple web social link-sharing profile page using HTML and CSS.

A landing Page built with HTML & CSS

Fylo Landing page

React-hook-form, responsive, custom font, react JS

Responsive Recipe Page Using CSS Flexbox

Social Link Profile

qr-code-component using HTML and CSS

Fylo website using CSS Grid and Flexbox with JS code for email check

Responsive landing page using flex, html and css

Adaptive design social proof page

HTML Semantic, CSS