Implementing my knowledge to this solution
What challenges did you encounter, and how did you overcome them?HTML structure and class naming
What specific areas of your project would you like help with?Everything
Hello, your solution looks good! If you want, you can try adding a gradient to the main square so it looks more like a design. However, I think everything else looks perfect. Wishing you the best in your future projects!
background: radial-gradient(circle at top centerVery well done project and good luck in your next projects
I am proud of not giving up and adding all the features that were mendatory .
What challenges did you encounter, and how did you overcome them?playing with the custom button was a bit tricky :)
What specific areas of your project would you like help with?Whatever you think i should do better.
Hello, good job with the website, but it seems to me that it does not fully match the concept of the task, because the data on the website should be updated automatically and the reset button should clear the data fields.
ifInput.addEventListener('input', () => updateButtonColor()); ifInput2.addEventListener('input', () => updateButtonColor()); customTip.addEventListener('input', () => updateButtonColor());
You can make listeners for input and build a function that will update the content. You only need a few "if" statements, and you will be much closer to the concept of the website, and one more small detail that you can upgrade, so you can delete the arrows on your inputs, and it will look much betterinput{ all: unset;
I hope You find it helpful and good luck in next projects.
use the json file i make search on google and use tutorials to find the solution
First of all, explaining all this in a message is quite hard for me, so I apologize for that. However, I can give you some advice: you should watch some videos on YouTube and read articles about similar problems. Personally, I learned this by trying to display the data on a blank template first, and then gradually adding divs and other elements to the website just to see how it works in the simplest way. I found this video that shows how to do it maybe will help You.video
Very well done project and good luck in your next projects
Finally getting hang o responsive design
What challenges did you encounter, and how did you overcome them?I was not able to style the bottom component as required. And I also had chellenge with uing javascript to change the compnents of the bottom div
What specific areas of your project would you like help with?I would appreciate help with my getting better on Javascript, any recommendations on practical hands on tutorial or useful books. I woul also appreciate corrections on best way to style the bottom div
Hello, I’m not sure if my way is the best because I’m also just starting to learn, but I just made another div for socials, and with JS, I made it pop up on the screen when a button is clicked and disappear when clicked again. On the mobile design, I made the div with the photo disappear and replaced it with socials.
button.addEventListener('click', () => {
if (mediaQuery.matches && !landscapeQuery.matches) {
divPersonalInfo.style.display = 'none';
divSocials.style.display = 'flex';
} else {
if (isToggled) {
divSocials.style.display = 'none';
} else {
divSocials.style.display = 'flex';
}
isToggled = !isToggled;
}
});
button2.addEventListener('click', () => {
if (mediaQuery.matches && !landscapeQuery.matches) {
divSocials.style.display = 'none';
divPersonalInfo.style.display = 'flex';
}
});
background: linear-gradient(to bottom, white 90%, hsl(217, 19%, 35%) 100%);
You simply write "background-color" and You should udes "background" instead
Very well made page and I really like your creativity in terms of additional design. Good luck in your next projects
You did a very good job on this project and good luck on Your next projects
I am most proud of being able to use CSS Grid to build a responsive layout especially with the Grid-template-areas.
What challenges did you encounter, and how did you overcome them?One challenge i encountered was using the @font-face property after i downloaded it, but i was able to use it by reading about web-fonts on W3schools. Another challenge was using the justify-items and align-items property to manipulate grid items, thanks to Webos for his comprehensive course on CSS Grid which helped me to understand how to use Grid.
What specific areas of your project would you like help with?Any idea on where i can improve will be much appreciated
Hello Your project looks good but I have some ideas for You to test out.
Overcame a few challenges and got a pretty decent result
What challenges did you encounter, and how did you overcome them?n/a
What specific areas of your project would you like help with?n/a
I'm glad I have started using global variables, and utility classes and tried to achieve more with a smaller number of lines of code.
What challenges did you encounter, and how did you overcome them?I find styling list-style elements a bit tricky but I'm glad I managed to solve it using
What specific areas of your project would you like help with?li::marker{}
I'm trying to learn more about spacing across different devices.
Hello
Hello. First of all You do very good job with styling Your website and its look very similar to design.
You need to make a bit smaller space between qr code and text container and it will be perfect. I also saw that if webside is to short vertically to fit content it end up getting cutted. My advice to this problem is setting minimal height to the size of your content
