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.
I was able to complete the challenge, and learnt how to get icon from an online source, and credit the site.
What challenges did you encounter, and how did you overcome them?I encountered some challenges while trying to implement the black hand cursor hover effect (note that I downloaded a black hand icon from Flaticon website). Despite several attempts to resolve the issue, I was unable to determine the cause. I plan to revisit and troubleshoot the problem when I have the opportunity.
As a result, I was unable to complete the challenge, specifically the part involving displaying a black cursor when hovering over elements that require interaction.
What specific areas of your project would you like help with?I would appreciate if someone could review my code and point out a fix for the issued I had with displaying my downloaded cursor icon as hover effect.
Hey, your downloaded cursor image size is 512x512 pixels and most browsers have restrictions on the image size (should be less than or equal to 128x128 pixels). I tried downloading a 24x24 cursor image and then set it as the following and it works:
{cursor: url('<image_path>'), auto;
If you need any further assistance, let me know!
I'm very proud to say that I am getting better at HTML and CSS, and I'm excited to say that I have learned more about the transition effect in CSS.
I am applying links for the first time using JS, which has allowed me to understand how the methods work better.
What I would do differently next time is start to try React and see how it goes.
What challenges did you encounter, and how did you overcome them?The biggest challenge that I encountered was the picture. Although the funny part of why nothing was being applied to the image, was because I didn't have a class enabled to it. LOL.
What specific areas of your project would you like help with?Specific areas of my project that I would like help with is just tips on what I should know about JavaScript, and how it can be used even more when it comes to web development.
Awesome work on the website! I like your unique touch about adding different background colors for different buttons. Regarding your question about Javascript, one creative and nice way I found in this project to implement JavaScript is by creating a light theme as well, and then the user can toggle between the light and dark themes. This is a simple task, but it helps get better at understanding the basic implementation of JavaScript, and it also looks really cool! I did the same for my project, and if you need any further help with how to achieve this, let me know!
Hi there 👋, I’m Rashid and this is my solution for this challenge. 🚀
Any suggestions on how I can improve and reduce unnecessary code are welcome!
Thank you. 😊
Hey, Rashid Great work on the website! A small suggestion for you:
a { transition: background-color 0.5s }
This is just a sample transition, and there are multiple other ways as well. If you need any further assistance, then let me know!Getting it to look as close I could to the original.
What specific areas of your project would you like help with?I'm not sure if there is anything specific that needs fixed. So any feedback would be much appreciated.
Hey, good work on the website! There are a couple of suggestions I have for you:
button {cursor : pointer;}I am proud of my progress in doing the challenges.
What challenges did you encounter, and how did you overcome them?Make it as close as possible to the design provided by the challenge.
What specific areas of your project would you like help with?Open to any feedback, I believe it will help improve my projects.
Hey, good work on the website! Your website seems to be working fine and is responsive as well. I have a small suggestion for you to improve the aesthetic of the website, you can add a basic transition on the anchor link so that when it changes the color upon hovering it looks better:
ability to align the items using flex
Hey, upon viewing your website I have a few suggestions for you to improve your code and design:
<div class='x'> and then setting the following properties for this <div>.x{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
If you need any further help, then let me know!
Hey, upon viewing your website on a mobile device, the profile picture does not seem to be appearing. You might want to check the path for that!
I viewed your website and it seems to be working great on a mobile device. However, there are a few suggestions I have for you to further improve your code:
You have done a good job overall, but I have noticed that you used <span> for the social links. It is always best practice to use anchor tags <a> for all the links on your website. Even if the links don't have any href attribute, it is still better to use an anchor tag to represent the link and then style it.
Overall you have done a good job but in order to improve the user design, you can change the cursor to pointer when the user hovers above the download buttons:
button:hover {cursor:pointer;}
In order to improve the user design you can change the cursor to pointer when the user hovers above the ratings and the submit button:
.rating-item:hover {cursor:pointer}
.btn:hover {cursor:pointer}
The mobile responsiveness doesn't seem to be working but the desktop design looks good :)
