I am satisfied that I made the responsive card.
What challenges did you encounter, and how did you overcome them?The challenge was centering the card in mobile and desktop mode, which was overcome through the 'use of flexbox and mediaquery.
What specific areas of your project would you like help with?I would like to know a better solution than my.
Congratulations on finishing the challenge.
Good job on making the webpage responsive.
I noticed a few things you might find beneficial to incorporate into your coding.
I noticed you included <h1> <h2> and <h3> tags. However, you did not use them in chronological order. Using the header tags properly is important as they provide structure to the webpage and are also utilized for accessibility features by screen readers. Thus, <h2> comes after <h1> and <h3> comes after <h2> and so forth.
<h1> is reserved for the most important heading in the document and <h6> is for the least important. When you use the headers tags properly the webpage is better structured and easily accessible.
I hope you find this helpful in structuring your webpage.
happy coding!!!
In the project, no hover color has been specified, so you will notice that I have set the hover background-color to white and the text color to black, while keeping the active color as green as per the requirements.
Getting the scale of the component right was a bit difficult. I hope it's not far off from the original design in terms of scale.
Hi, Khulekani Gcaba.
Congratulations on completing the Social Links Profile Challenge! 👏🏽 🎉
I have a suggestion for you, if you don't mind. I noticed in your HTML that you used two header tags: h2 and h5.
It's important when using header tags to start with h1 and then proceed in descending order of priority. In your current code, you didn't start with h1 but instead went straight to h2, and then jumped to h5. I understand that you may have chosen these tags based on their sizes – we've all made that mistake at some point.
Moving forward, it's better to start with the <h1> tag for your most important text, and then progress downwards like a flight of stairs.
This principle ensures that your webpage is well-structured and accessible to everyone, including those who use screen readers. These also ensures you website is propely optimised for search engines.
It is interesting if you can check out more information on why the proper usage of header tags are important for web development, I recommend reading the following article
Great work!
I hope you find this suggestion helpful.
Happy coding! 🥂
Hey there! 👋 Just finished working on a social links card visual for a Frontend Mentor challenge. I'd really appreciate your feedback on the HTML and CSS code. Specifically looking for thoughts on the overall design, how it renders on different screens, and any ideas on code improvement. If you notice any have tips on best practices, I'm all ears! Thanks a bunch for your time and input!
Hello Funtikar, congratulations on finishing the challenge 👏🏽 🎉.
It's beautifully done.
Just a little observation however. I noticed the first heading is a h2 element in your webpage. Structure wise, It's a better approach to start with a h1 tag then work your way down. This is for structural and accessibiilty reasons.
You can always customize your headers element to the font size you prefer.
someone once gave me this advice on this platform:
Unlike what most people think, it's not just about the size and weight of the text It is about maintaining a clear and consistent hierarchy through out the document
Great work!
I hope you find this helpful.
Happy coding 🥂
I had a lot of fun during this project. This is my first project pushed directly from my system. More challenge solutions are coming soon... **I changed the challenge name to mine, yayyyyyyy!!!
Hello DEVADE, congratulations on finishing the profile card component 👏🏽 🎉.
It's beautifully done.
Just a little observation however. I noticed the first heading is a h3 element in your webpage. Structure wise, It's a better approach to start with a h1 tag then work your way down. This is for structural and accessibiilty reasons.
You can always customize your headers element to the font size you prefer.
Great work!
I hope you find this helpful.
Happy coding 🥂
Hello Satyam, congratulations on finishing the order summary competition 👏🏽 🎉.
I noted some observations you might find worthwhile.
Reviewing your code, I noticed you do not have a header element, particularly a h1. It is important to state that header's improve the structure and readability of your web page since they provide hierarchical order, additionally headers enhance the accessibility and navigation of the webpage for users who rely on assistive technology, such as screen readers.
Your use of <div> is more than necessary, as the div with the class "frame" could have held the img tag, the "Order Summary" in a <h1> element and the "para" class would have been nested in a <p> element all within the "frame" <div>. The div tag is used to define a division or section as it group elements in a web page and it should be used on "a need to use bases".
The <button> tag is really helpful and easier to use than makeshifting a <div> tag as a <button>, and it helps with accessibility also. I noticed you used the <div> element there instead of a <button>.
Nonetheless, good work!
I hope you find this helpful.
Happy coding 🥂
Hi Weixin, congratulations on finishing the challenge 👏🏽 🎉
I noted some observations you might find helpful.
There’s no heading in your code. I can see the “html and css foundation” text is in a <p> tag. It is better you nest it in <h1> heading element as this is the most important text in the document. Search engines use the headings to index the structure and content of the webpage. Using headings help provide a structure and hierarchy.
I also noticed you nested every <img> tag in a <figure> element. While the <figure> element is important, it serves no purpose in the present document. <figure> should not be used on decorative content like background images or supplementary images like an avi. You use <figure> to mark a self-contained element that is related to the main flow of the document, for example a diagram, or you use it when you need to caption an image. Since this in not the case presently. Using only the <img> with an alt attribute will suffice.
The borders of the blog preview card are not meant to be sharp; they are curved. You can curve them in css using this:
main { border-radius: 10px 10px; }
Great work!
I hope you find this helpful.
Happy coding 🥂
