@Atomico333Submitted 26 days ago
Fachrezi
@Fbeye04All comments
- @Fbeye04Posted 19 days ago
hey bro, your project looks solid which in terms of functionality exceeds what I've done. I can't really review the javascript code. However, if I may suggest you can pay more attention to the responsiveness of your project on other screen sizes because I see that on the mobile version the appearance of your project is a little less in accordance with the initial design of the project and on a tablet screen it is not suitable if it looks like a desktop. But overall this is good
Marked as helpful0 - @zahraabelluSubmitted about 1 month ago@Fbeye04Posted about 1 month ago
Great job, you managed to complete this challenge and have tried to make it as requested by the project. What impressed me was that you styled when the cursor was on the activity card, besides that your styling for each part of the card has the same size even when moving between reports (daily, weekly, monthly), and you also tried the json data as requested by the project. But in my opinion, there are other things that you can improve in this project such as:
- Using semantic elements in html code generation to avoid using too many divs. The use of div should be used only as a container for styling. In addition, it will be easier to read the code if you use semantic elements.
- Using the main tag after the body as a wrapper for the main content of web content
- Because you use fetch data, in the html code you just write the card container as a container for other activity cards.
- For styling, try to learn css custom properties to make it easier to use the colors requested by the project in the style guide file
- Use brake units so that your display has a benchmark size and reduces display inconsistencies in various browsers
- Related to number 3, you can directly use the foreach iteration method to create cards so there is no need to rewrite each card in html.
- Try to learn the async/await technique and learn the es6 writing method to make your code more organized
- Learn media queries to make the web responsive on all screen sizes
- Prioritize the work of mobile design first because it is more difficult than desktop design
- On desktop display, all your content is still not centered on the screen so my advice on the body is to add min-height: 100vh
That's all the advice from me that you might be able to use to improve this project, admittedly your styling is better than mine so it only needs a little revision in the code writing section.
Marked as helpful0 - @proAbenezerSubmitted about 2 months ago@Fbeye04Posted about 2 months ago
wow man, your project is really nice it looks neat and the javascript function works well even you also put the user email into the success message (I copied it). Maybe a little suggestion on the 820 px screen size signup form has a white background that is too long and the content is not centered so you can tidy it up. Also, I feel that maybe you need to hover the dismiss message button a bit to give a smoother ui experience.
1 - P@lia-oliveiraSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
It was a very enriching experience. Initially, I thought it would be similar to another card project we worked on, but this one is much more complex because it involves many changes in positioning and the appearance of the share bar. What I learned is reflected in my code.
One thing I wish I had done differently is the layout transition. I’d like the layout change to be less abrupt. I’ll try to improve this in the next project.
What challenges did you encounter, and how did you overcome them?I need to expand my knowledge about responsive images.
What specific areas of your project would you like help with?I’m open to any kind of feedback. If you noticed an area for improvement or something I might have overlooked, feel free to share!
@Fbeye04Posted 3 months agoHi, I've seen your work and I'm amazed that this is the best I've seen from the display that has the size that the project requests, the share button function that runs smoothly and the good code writing. Do you have any suggestions for me on how you can code like you have, how you can customize the look of your project to make it similar to the example, and how you can learn javascript especially as a beginner? I hope you will be pleased with my questions.
1 - @cgojkSubmitted 8 months ago@Fbeye04Posted 6 months ago
hey bro, good job. I've seen your project and was pleasantly surprised that you applied different layouts between mobile and desktop mode and it was great. Here I just want to give some suggestions where I see from the look of your project, you seem to not add enough padding/margin between the picture and the testimonial. Other than that, I would also like to make a suggestion where I think your h1 placement is a bit off where it should be placed in the name section and then h2 should be placed for the testimonials (I know it's not formally appropriate but if you think about it h1 should be something like a title or something important). But the rest is great and I love your work, bravo!
Marked as helpful0 - @radhaBharadwajSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
In this project i used position in css for the first time..
@Fbeye04Posted 6 months agohey bro, good job on the project but I see some things that you might want to add for future projects.
-
pada markup html saya merasa kamu bisa lebih merapikan penulisan dengan membaginya menjadi seperti ini <main class=“main-container”> <div class=“main-description”> .... </div>
<div class=“section-container”> <section class=“section-card” id=“supervisor”>.... </section> <section class=“section-card” id=“supervisor”> .... </section> <section class=“section-card” id=“supervisor”> .... </section> <section class=“section-card” id=“supervisor”> .... </section> </div>
</main> -
use css root to remove the browser's default style so that it is easier for you to style according to your wishes. Then, to make it easier, also try to learn the css custom properties
-
for card layouts instead of using flex I recommend using a grid so that your layout arrangement is easier even for different screen types. Also learn the grid template area that will help you in structuring the layout card. Those are the things that I think you can consider adding or using in future projects. Good job bro!
Marked as helpful0 -
- @sour413Submitted 6 months agoWhat are you most proud of, and what would you do differently next time?
I am proud of that I improved in making responsive pages using bootstrap framework, The different things i could do is create more responsive pages like these and implement javascript and more media query techniques.
What challenges did you encounter, and how did you overcome them?The Only challenges I faced is alignment challenges using flex, I overcame with the help of w3c schools and help from one of the members from Frontend mentorship from my previous projects.
What specific areas of your project would you like help with?I would like help in Web-page responsiveness, that's it, I would like to build pages for mobile, tablets and PC, I would like help for building more responsive web pages.
@Fbeye04Posted 6 months agohey bro, good job on your project this time but I want to give you some feedback that you might be able to implement to make your project better.
- try wrapping the name and description using hgroup tag then you can change the paragraph tag to h1 tag for the name.
- instead of using buttons, it would be better if you use list and ul tags it will be more relevant and easier in styling
- learn and use root css so that your page is clean from the browser's default style so that it is more free for you to modify the display. In addition, apply css custom properties so that you can apply as provided from the style guide file.
- instead of 80vh I recommend that the body use 100vh so that the display is right in the center of the page
- you don't have to declare important on all styles because if you place the style where it should be then the style will be applied without any interference.
- for margin, padding and width try to define using numbers like 1rem or 1em and reduce the use of auto.
- try to learn breakpoints on bootstrap it will help you create responsive displays for various types of screens Those are the suggestions that I can give so that the appearance of your project is better, there are many things that must be improved but consistency and commitment are also required so that your skills continue to grow. Good job bro!
0 - @ClaudiaRamirezDSubmitted 6 months ago@Fbeye04Posted 6 months ago
hi bro, I congratulate you for successfully completing this project. But here I found something that you can improve and this is related to the media query where when on mobile the card layout does not display correctly and only leaves one card. As a suggestion try on your card-container apply grid then grid template-areas and there you can write it like this: “teal” “red” “yellow” “blue”
and you will see the normal display on the mobile page
Marked as helpful1 - @YanivridelSubmitted 6 months ago@Fbeye04Posted 6 months ago
Nice work, bro, I commend how you replicated this project so well from both mobile and desktop screens. I would like to make a few suggestions you might want to consider.
- So first, try to wrap the main-container using the main semantic element.
- Use the h1 tag for the big title, then h2 for the other segment titles, if that's not enough you can use h3. You can customize in CSS if there are special cases for certain sentences so that you don't need to use h4 or even h5 tags.
- Compared to using class=“purple”, I think it would be better to use id because it is more specialized.
Marked as helpful1 - @joaoeduardogomesSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
Making it actually work felt really good. Maybe next time I should try using grid instead of flexbox.
What challenges did you encounter, and how did you overcome them?It was difficult to make the images change and fit the space it should like in the design images. The solution that worked was preventing the container from wrapping and changing the flex-direction to column instead.
What specific areas of your project would you like help with?Any suggestions and critics are welcome. I would like to know specially if there is a easier way to complete this challenge. Maybe I was trying to solve it the hard way without even noticing.
@Fbeye04Posted 7 months agoGood job bro but I would give some suggestions like:
- try wrapping the title both the h1 tag and paragraph tag in the hgroup tag, it will make it easier for you in styling.
- besides that, you can also use the s tag for the initial price section, it will also be easier for you
- for the “add to cart” text on the button, try wrapping it in the span tag.
As for the css, everything looks good as well as the appearance. Nice work!
Marked as helpful0 - P@Jan-Dev0Submitted 7 months agoWhat are you most proud of, and what would you do differently next time?
It's not pixel perfect but I think I've come quite close.
What challenges did you encounter, and how did you overcome them?Challenging was only to get a pixel perfect copy.
What specific areas of your project would you like help with?I would appreciate feedback of my CSS in general. Is there anything I can do better? Like the selector nesting or using other selectors.
@Fbeye04Posted 7 months agoGood job man. I don't think there's anything I can suggest. You have implemented the right semantic elements, css reset to remove the default web formatting, use of flexbox, media query to make the display on different screens responsive. It's just probably everyone's preference, I would use section or div instead of nav to wrap the list. Overall it's really good man
Marked as helpful1 - @EmicJoykillerSubmitted 7 months ago@Fbeye04Posted 7 months ago
Good design bro but there are some things that I encountered that are still not in accordance with the requested design.
- on mobile, the image does not appear in full. Try to remove the padding: 20px;
- there are some screen widths which can not display the entire content to copyright such as on ipad air 5 screen size
- instead of using strong tags it would be better if you just set it in css using font weight But overall you managed to solve it. Good job!
0 - @EmicJoykillerSubmitted 7 months ago@Fbeye04Posted 7 months ago
Nice work bro, however I have a few suggestions that might help:
- try making the card elements static, but this is just a matter of taste.
- Also, consider styling the focus selector to make keyboard users more comfortable.
- Don't forget to check media responsiveness by using media queries.
0 - @chenmeisterSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
For this project, I continued to refine my CSS skills by writing efficient CSS code and completing the task myself without relying too much from outside sources. This allowed me to break out of my comfort zone and improve my CSS skills. What I hope to do next time is to keep practicing my CSS and code it without relying on guides.
What challenges did you encounter, and how did you overcome them?I've encountered some issues with aligning images and adding custom fonts. I had to refer to the MDN docs and w3schools to help me get it all set up.
What specific areas of your project would you like help with?I would like to see how I can make my CSS code more efficient and apply some advanced techniques if possible.
@Fbeye04Posted 7 months agoFirst of all, your challenge result is good in appearance but I would like to give some suggestions such as:
- try to use more semantic elements in html. You can use article tag to wrap the card container.
- then, instead of float I recommend using flex because it makes it easier to organize the page layout
- Finally, don't forget to add a media query so that it looks good on smaller screens such as smartphones.
0 - @VictorE3Submitted 7 months ago@Fbeye04Posted 7 months ago
I can't see your solution page but it looks similar to the challenge. Good job!
0 - @AkshayAnand101Submitted 7 months ago@Fbeye04Posted 7 months ago
- try using height: 100vh, this will make your qr code display in the center of the page.
- move all the css in your index.css file, it will make your code look better
- try to add media queries so that the website can display on any screen conditions
- lastly, try wrapping images, titles and paragraphs in a container so that it makes it easier for you when you want styling
0
