I will keep trying
What challenges did you encounter, and how did you overcome them?No chanlleges as sure, just initaly I don't understand the consecpt
What specific areas of your project would you like help with?Majorly on the functionality most importance
There seems to be an issue with the link to the live site, you might want to check that.
๐ง Hello, I'm Daniel this is my solution for this challenge.
๐ Features:
Animations with Framer motion๐ฌ
๐ช๐ต๐ฎ๐ ๐ถ ๐๐๐ฒ๐ฑ ๐ป:
React JS.๐
Scss.๐จ
ESLint. ๐ฆ
Framer-motion. ๐ฌ
I really liked accomplishing this project, additionally, I have added the framer motion. Hope you like my solution to this task!
If you have any suggestions on how I can improve my code then I will be very happy.
Great work, one thing I would suggest is not using fixed widths on elements as this can create problems with responsiveness and content fit. Use max-width and prefer relative units like rem for better adaptability. Your .card should use a max-width rather and it should be defined in rem. Also, media queries, font-sizes should be defined in rem not px. Keep up the good work, and good luck!
I am not sure what else I would do differently next time, as all I used was basic CSS and HTML.
What challenges did you encounter, and how did you overcome them?It was difficult to find out what the challenge asked for when it said "try not to use media queries." I had a hard time figuring that out, and ended up using media queries anyway.
What specific areas of your project would you like help with?I would like to know more about solutions not using media queries for changing the font size at different screen sizes.
Great work You can use the clamp() function to ensure text adjusts smoothly across different screen sizes without using media queries. Like so
h1 { font-size: clamp(1.5rem, 2vw + 1rem, 3rem); }
I would really appreciate if any feedback on my project
This looks great and it's responsive, one thing you could improve is maybe adding an alert telling the user the form has been submitted and clearing the input fields because now nothing happens when you click on the button. Keep up the good work, and good luck!
Not my best and also open to suggestions. Thank You.
Great work @Zaheer4232, here are some suggestions
min-height: 100vh; on the body and change the padding-top to padding: 1rem on all sides.min-width of the .page-container to max-width and add a width: 100%ul to group the links is a better approach for both semantics and accessibility.head section rather than directly in your CSS file as it enables asynchronous downloading, improving page load times.rem not px. This article explains it better Why font-size must NEVER be in pixels.Hope this helps, Good luck!
I'm proud of how quickly I did it so I did retain a decent amount oh html and css that I just learned. I will definitely break down the design more and I will be learning grid a little more in depth as well as flex box.
What challenges did you encounter, and how did you overcome them?centering my container to the middle of the page took me quite a bit for some reason but I finally just used margin not sure if that is the correct answer.
What specific areas of your project would you like help with?would want to know how my css structure is. is it organized and clean? and was it ok that I used grid instead of flex box. thank you!!
Hi @gbaby97 great job completing your first challenge, here are a few things to review
There are a few things missing from the head section that can improve your webpage:
<meta name="viewport" content="width=device-width, initial-scale=1.0"> Defining the viewport helps your webpage render properly on various devices like desktops, mobiles, and tablets.
<meta charset="UTF-8"> It's a good practice to specify the character encoding used in your document.
The text content in these div elements (Name, location and description) should be semantically wrapped in more appropriate HTML tags like headings h2 or paragraphs p for better accessibility and structure.
To properly center the card, add this on your body and remove the all the margin properties from the .container
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
a tag is sufficient for the social links, the buttons are not needed for this. Also, using an unordered list ul to group the links is a better approach for both semantics and accessibility. You use a single class for all the links and style them the same rather than creating different classes for every single one.Hope this helps, Good luck!
I'm proud of me getting the git set up and connecting to my local vs code. Also, proud that I learned some new CSS syntax.
What challenges did you encounter, and how did you overcome them?getting the project to look exactly like the example. Kept trying
Hi @shaywalker5 great job completing your first challenge, here are a few things to review
main tag around the .containerh2 or paragraphs p for better accessibility and structure.alt="Qr Code to Frontendmentor.io"heights and widths on elements, as this can create problems with responsiveness and content fit. Instead, let the content and padding determine the elementโs size. If necessary, use max-width or min-height, and prefer relative units like rem for better adaptability. Change the width of the .container to max-width and it should be defined in rem.rem not px. This article explains it better Why font-size must NEVER be in pixels.Hope this helps, Good luck!
Doing research to find a solution for responsive text-sizing was challenging but fun. I have learned the 'calc()' function on CSS. Tried different inputs to find the best version that suited my project. Before i have used 'px' values to arrange font-sizes. From now on i will try to use 'rem' and 'em' properities because they are much better for adaptive and responsive code.
What challenges did you encounter, and how did you overcome them?Aligning a small image with a tag was a bit challenging first. I have tried to use 'text-align' and 'vertical-align' properities on CSS but it didn't work. Finally i have decided to use 'display: flex' and find the solution.
What specific areas of your project would you like help with?Doing research to find a solution for responsive text-sizing was challenging but fun. I am sure there is a better and cleaner way to optimize that. I am open to ideas and suggestions!
Any feedback will be appreciated.
You can use the clamp() function to ensure text adjusts smoothly across different screen sizes. Like so
h1 {
font-size: clamp(1.5rem, 2vw + 1rem, 3rem);
}
Here are a few other things to look at
head section rather than directly in your CSS file as it enables asynchronous downloading, improving page load times.Challenge faced [Vertically centering div and applying the drop shadow effect] [MDN documentation on filter effect and W3school documentation on centering div] helped understood the concept.
What specific areas of your project would you like help with?When centering div horizontally and vertically, what's the purpose of having both[-ms-transform: translate(-50%, -50%); & transform: translate(-50%, -50%);] together why not just [transform: translate(-50%, -50%);].
-ms-transform: translate(-50%, -50%); ensures compatibility with older versions of Internet Explorer that require the -ms- prefix. But I don't think it's necessary today as most modern browsers support the unprefixed transform property. Just transform: translate(-50%, -50%); is sufficient
Great work @firelordyaks, here are a few things to review
a (anchor) tag instead of the p tag. The a tag is used for navigation to other pages. Also, using an unordered list ul to group the links is a better approach for both semantics and accessibility.In this challenge, I learned about mobile first workflow which makes the website work faster because it has been handled in advance. In addition, I added a focus selector so that users who use the keyboard can be more comfortable while on the website.
What challenges did you encounter, and how did you overcome them?the challenge is just a habit because I did this challenge from the mobile version first.
What specific areas of your project would you like help with?all areas of html and css
Great work @Fbeye04, some areas for review
a (anchor) tag instead of the button tag. The a tag is used for navigation to other pages, while the button tag is designed for interactive actions like submitting forms or for events like toggling content. Also, using an unordered list ul to group the .media-buttons is a better approach for both semantics and accessibility.height of the body to min-height Using min-height ensures the content can grow beyond the viewport height if necessary, while height would restrict it to exactly the viewport height, potentially causing overflow issues with content that exceeds this height.