@moncadadSubmitted 10 months ago
When y'all build these projects how do you usually go about determining what a good name for classes, id's, variables etc ? Additional question what is your favorite framework / libraries to use and why ?
Daniel
@tenczowyAll comments
- @tenczowyPosted 10 months ago
Class names should be descriptive and convey the purpose of the element they represent. Aim for clarity and avoid using vague or overly generic names. Instead of using single-letter or abbreviated names like "s", "btn", or "div", opt for more meaningful and explicit names that reflect the element's role in the document. For instance, "submit-button" or "navigation-bar" provides more context and clarity than "btn" or "nav."
As for the framworks/libraries. At the moment I am not using any, since I've started my jorney with web development not that long ago I am trying to build a good fundation by understanding main concepts in HTML and CSS and be comfortable using those 2 technologies. I belive that even tho there are technologies that make building this projects easier and faster, the basics should not be skipped.
As for this project, good job, everything looks just spot on. Highly recommend using REM instead of px values. Using REM units for font sizing makes the text more accessible to all users. People can change their default font size in their web browsers. With REM units, your design will automatically adjust to the user's preferred font size. At first it is not intuitve but after some time you will find it easy to use rem values almost for everything, that will make your websites more adjustable and accessible.
Marked as helpful2 - @darkpynix-webSubmitted 10 months ago@tenczowyPosted 10 months ago
great job on finishing this project. Try adding temporary border to elements such as body, container... border: 2px solid red; That will help you position your elements and see where is the problem.
Marked as helpful0 - @GabrielOliveiraEvangelistaSubmitted 10 months ago@tenczowyPosted 10 months ago
Consider using more semantic elements where appropriate. For example, you could use <section> instead of <div id="main"> and <article> for the header section.
Instead of using border-radius: 9999rem; to make circle out of picture you can use border-radius: 50%;
Also you are styling img in 2 places, id=img-box and img itself. You could do same thing by not having div for img at all and just styling img and adding some margin.
img{ max-width: 25%; display: block; border-radius: 50%; margin: 2rem auto; }
0 - @petritnurediniSubmitted 10 months ago
Discover our 🌟 Social Links Profile App 🌟, a dynamic and trendy platform created with React JS and TypeScript! This app is not just tech-savvy; it's designed to be ultra-responsive, ensuring a smooth experience on both mobile 📱 and desktop 💻 devices.
📌 Key Features:
Personal Touch: Upload your profile photo 🖼️, add your full name, and address for a personalized profile.
React Components Magic: Crafted with reusable React components, making the app both efficient and scalable. 🔄
User-Friendly Design: Though the challenge was straightforward, the building process was fun and engaging. 😄
This app is perfect for those looking to stylishly manage their social links and personal details. 🚀 Your feedback is invaluable – if you have questions or suggestions, I'm all ears! 📢 And if you enjoy the app, a like 👍 or feedback 💬 would be awesome to keep the energy flowing! Dive in and enjoy the Social Links Profile App! 🎉📲
@tenczowyPosted 10 months agoLink to preview site is redirecting to different challange (blog preview card).
Sizing of the main element is slightly off compare to design but other then that everything looks spot on. Good luck in your future challanges!
0
