@marcfrancissSubmitted 5 months ago
Alexandru736
@Alexandru736All comments
- @mohammadfallah7Submitted 4 months ago@Alexandru736Posted about 2 months ago
Hi @mohammadfallah7
I have two remarks on your solution:
- First, regarding your background-image, for larger screens, it doesn't fully stretches the screen width. For the
<body>tag, you could set the 'background-image: url('your-image')' and thebackground-size: contain. It might not stretches the ideal way, but at least it does the trick. - Secondly, you have overloaded your js script. Ideally, make your HTML with all attributes and elements you need. For example, you could have added both buttons for each question and set the default one with
display: blockand the other one withdisplay: none. Then, instead of creating anactivetype of class, you could have used ARIA attributes likearia-hidden="true"and when you click the button, the attribute of the default button would have the value true and the other one false, and so on. Overall, great project and good job on using SCSS. Keep up the good work!
Best, Alex
0 - First, regarding your background-image, for larger screens, it doesn't fully stretches the screen width. For the
- @dolapobjSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I thought the organization of my JS code was very good, and easy to follow. Doing easy projects like this helps me reinforce the different logical aspects of working with JS. variables, functions, event listeners, etc.
What specific areas of your project would you like help with?Any feedback on my JS would be great!
@Alexandru736Posted 2 months agoHi @dolapobj!
Nice project! The logic in the JS file looks great. Regarding the styling updates you need to make when you click the buttons, I believe that you should make use of ARIA attributes. For example, the way your tip buttons work is the same as radio buttons. Therefore, you could use
aria-checked. Another thing, this time regarding the HTML tree, avoid usingdivs and spansas much as possible. This recommendation comes from using HTML semantics more. They make web accessibility a lot easier.Keep up the good work!
Best, Alex
0 - @wideirpSubmitted 2 months ago
- @juliusalbertoSubmitted 3 months ago@Alexandru736Posted 3 months ago
Hi! I really appreciate your work. The design looks really cool, as well as your code. It is well structured and easy to read. This is not something to change but a suggestion you could take into consideration for your future projects. When it comes to web accessibility, I highly recommend using the ARIA standards. You could look it up yourself, by accessing the website https://www.w3.org/WAI/ARIA/apg/patterns/ Good luck!
0 - @bartoszdudziak-devSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
I would add some transition on hover effect. Due to usage input tags I couldn't create pseudo elements on them which could let me to change background with effect. Perhaps I would let my wrapper grow a little bit before it achieves the breakpoint.
What challenges did you encounter, and how did you overcome them?I didn't have much serious problems.
What specific areas of your project would you like help with?Accessibility
- @jrgenwebSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
how did you manage to do it
What challenges did you encounter, and how did you overcome them?on the desktop view, the position of the share div, but I solved it by putting the whole thing in a div and adjusting the absolute position accordingly
What specific areas of your project would you like help with?the problem mentioned above, as I solved it, can hang out of the viewport at certain screen sizes
@Alexandru736Posted 4 months agoHey there! Your solution looks awesome. Keep it up!
0 - @Kikino02Submitted 5 months agoWhat are you most proud of, and what would you do differently next time?
.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
@Alexandru736Posted 5 months agoHi! The design of your project looks good with little exceptions of color choosing for some fonts. However, since you choose to use SASS as a way to work more efficient on your CSS, I would like to share some feedback with you:
- First, modularity is one of the biggest assets you could use if you chose SASS. For example, if you have multiple cards, you can observe that they share the same html with only the change of colors. Therefore, you could use
mixinslike a programming function to modularize that part. - Second, I saw you used
grid-columnandgrid-rowto insert the cards in the order you desired. This approach is flawed due to the fact that if you had even more cards, you could easy mess the code. Thus, you could usegrid-template-areasto be more efficient. Keep up with the next projects!
Marked as helpful0 - First, modularity is one of the biggest assets you could use if you chose SASS. For example, if you have multiple cards, you can observe that they share the same html with only the change of colors. Therefore, you could use
- @DalaScriptSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
- I'm proud that this was my first project where I used SCSS—it was a very pleasant experience! 🎉✨
- I really liked it, and after this, I'm going to use SCSS all the time. 💻💪
- I also used CSS Grid for the first time, something I learned early on but never had the chance to apply. I think I did well! 📐🟦
- These weren't really difficulties; for example, SCSS was new, and I didn't know the syntax, so I searched the Internet. 🔍💻
- I also revisited CSS Grid with the help of online resources. These weren't difficulties for me—I managed easily. 🌐✨
- I'd love to hear from other developers about what they think of my SCSS and CSS Grid implementation. 🧑💻💬
- Suggestions on how I can improve these skills would be greatly appreciated! 🌟🛠️
@Alexandru736Posted 5 months agoGood jobe, mate! I have nothing to comment on your design/code! Keep it up!
1 - @EduTavaressSubmitted 6 months ago@Alexandru736Posted 6 months ago
Hi there! I looked over your final design and code and looks like a pretty neat design! However, I have some improvements you could do to make the project be even better:
- I don't see the mobile design in your code. Generally, when you start working on a website, you should apply a mobile-first workflow. This is where you apply media queries
- Another thing is that I see you used quite a lot margins. Generally it's not that bad. Personally, I don't think it's a must that your design should have the same px values as in the mock-up picture. This is why I find it more important to use relative units(like em and rem). When the screen size changes your solution is going to blow up and won't have the same proportions.
- The last thing, this is not a big deal but can improve your workflow, and that is to use CSS variables. Use them to store the color values so that you can apply them easier whenever there is an opportunity. Keep up the good work!
0 - @brane10Submitted 8 months agoWhat are you most proud of, and what would you do differently next time?
.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
@Alexandru736Posted 7 months agoHi! The implementation looks good but you missed some design points like the bottom margin of the recipe container and the text color of the nutrients section but these are small details. Other than that, keep it going!
0 - @JoseViniciooSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
Fiz so no olho, sem usar medidas pré definidas.
What challenges did you encounter, and how did you overcome them?nenhum
What specific areas of your project would you like help with?nenhuma
@Alexandru736Posted 7 months agoRegarding the design, there are some aspects you might have missed. For example, you need to apply the right weight to the text font, or apply the right color to the description text. I see you used margins to layout the container and the attribution component. I find this not a very good practice in the future if you want to develop more complex styles. You could use instead(apart from
marginshorthand),display: flex. Flexbox is actually pretty versatile and you could use it in many situation, not only when you have lists. Therefore you could flexbox, and then center the container in the middle of the screen, then set agapbetween the container and the attribution, or useabsolutepositioning to place it at the bottom of the screen. It is also a good practice to place the attribution component in afooterlandmark instead of using just adiv.0
