Since this was my first project in React, I'm sure there are ways in which I can improve my skills, so I'll be looking forward to any feedback!
I made the active notification circle a div and then tried to align it with the notification, but I still couldn't properly align it with the notification as when resizing the window, it does not work as intended for all screen widths. Advice on how to properly achieve this would be much appreciated!
There isn't anything specific that I would like help with, but general help or feedback would be much appreciated!
Freely please!
Wow, you have done a great job! Just a small suggestion that you can change the cursor to pointer when the user hovers over the buttons. Right now the cursor only changes to a pointer when you are near the radio element; you can set it to change when hovering over the whole button. Also, you can add a media query around a screen width of 390px if you want to make the website responsive for screens below 390px. Other than that, everything seems great :)
While researching how to change the cursor pointer color to black as per active-state design, I discovered that CSS cannot modify cursor color directly as it's primarily controlled by the operating system and browser.
Hey, good work on the project! I was also trying to change the color of the cursor with CSS while working on this project, but then realized that you can't directly modify the cursor color using CSS. However, you can set the cursor to an image, e.g., if you want to set the color of the cursor to black, then you can download an image of a black cursor (the size should be <= 128x128) and set it using the following code:
button{
cursor:url(<image_path>), auto;
}
Hope this helps :)
I'm proud to be able to link my profile and make them work the way I wanted
What challenges did you encounter, and how did you overcome them?I encountered challenges like with the margins
What specific areas of your project would you like help with?I think I've done the one I thought it's right
Hey, good effort in completing the project but I have a few suggestions for you:
a:hover {background-color: green;}If you need any further help with your code, let me know!
I would most probably look for a shorter more effective way to write this code
What challenges did you encounter, and how did you overcome them?Not much, just took me more time than expected
What specific areas of your project would you like help with?I would love help with javascript, even thou i didn't incorporate it in this code.
Hey, good work on the project! Just a small suggestion that it's better to include the links inside an anchor tag (<a/>) and specify the href attribute inside the anchor tag.
Regarding help with JavaScript, I'd be glad to help you out! Is there anything specific you are looking for or in general? One fun and creative way to learn JavaScript could be by incorporating a light theme as well in your project and then allowing the user to toggle between the light and dark themes.
Proud of the effort and consistency I put throughout the project. Proud of the things I have learnt every time I am faced with a challenge
What challenges did you encounter, and how did you overcome them?I faced some issues while trying to host my project within github pages. I had to reserach on ways to solve the issues. Luckily I did.
What specific areas of your project would you like help with?For now everything is okay.
Hey, great work on the project! One improvement you can make is to wrap your main div in another div, say with a class of 'outer'. Then for this div with class 'outer', you can set the following properties:
.outer {
min-height: 100vh;
display: flex;
align-items: center;
}
This will vertically align your main container.
I've just completed a front-end coding challenge from @frontendmentor! 🎉
You can see my solution here: https://www.frontendmentor.io/solutions/social-links-profile-project-dCJ4-1GrSE
Any suggestions on how I can improve are welcome!
Hey, good work on the project! I see that your container is not vertically aligned, so you can achieve this quite easily with the following code:
.container{
display: flex;
align-items: center;
}
This will work as you have already set the min-height as 100vh of your container.
