@AkherousinSubmitted 8 months ago
Bishal Singh Deo🎮
@Bishalsnghd07All comments
- @Bishalsnghd07Posted 8 months ago
I would say, it's an amazing project ever I seen. It's a pixel perfect, it's a responsive and everything you used that is needed in this project. I love it❤️
0 - @6xg0dSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud that i did it without too much help. I struggle a little bit at the beginning trying to write a good semantic HTML. Maybe not the best, but sure have a clear expression of the content meaning. If i should have to do the project again, i think i'll start by sketching the structure on paper instead of trying to do it mentally. It's way easier to figure it out and gain more understanding of the problem when you write it down.
What challenges did you encounter, and how did you overcome them?The main problem to me was the semantic. After a while thinking if the semantic was good, i realize that the most important thing about semantics it's to make clear the meaning of content, and that there's more than just one "good way" to write semantic code.
What specific areas of your project would you like help with?I'd like to know how can i optimize my code. what can i do to improve my solution in terms of accesibility and good coding practices
@Bishalsnghd07Posted 8 months agoHi, @6xg0d👋
Congrats for completing this challenge🎉 and you did a good job👏
In regarding to improve accessibility and best practices. There is a great tool in the browser that is called lighthouse testing tool. What you have to do is, you just have to right click on your web page, click on inspect option and then, you will see a lot of option and one of the option you will see that is lighthouse and just by clicking on it, you can test your performance of web page, best practices, accessibility, SEO and many more.
This tool will enhance developer proficiency in development and decrease workload and increase efficiency.
One, more thing I would like to recommend you to use this tool in every project to test your performance of web page. Make it a habit, it will help you in lot of things.
Hope, this small tip will help you in your further projects too!
Once again welcome to Frontend Mentor, wishing you a joyful journey ahead and Happy Coding❤️
Marked as helpful1 - @Rudro032Submitted 8 months agoWhat are you most proud of, and what would you do differently next time?
I am proud that its my first project and i do it. when i want to style but i don't know where to start the styling. I learn about center a div and width: auto and max-width. I want help how to visualize my project where should start.
What challenges did you encounter, and how did you overcome them?to center a div. then i go to chatgpt and how to center a div .
What specific areas of your project would you like help with?how to visualize and where should i start
@Bishalsnghd07Posted 8 months agoHi, @Rudro032👋
Congrats for completing this challenge🎉 and you did a great job👏
As per my experience I would help you how to visualize and follow the path:
1)First work on html and css basics & then create basics web page like this. Basics like, as you said how to center div, it's a good decision and good start.
2)Second, if you don't know how to use flex or grid I would say learn it as soon as possible, to make center your div, to make web page responsive, to make pixel perfect. This all will be simply done by flex or grid, and it will maintain your code scalability too.
3)Third, I will give you a 1 insight I would recommend understand the default behaviour of browser, someway your web page is by default responsive, just you have to analyse it, in which area or in which part of website is by default responsive, that's many people ignore it.
4)Fourth, after learning basic html, css, grid, flex. Then, create a responsive or layout based project. One challenge in this frontend mentor website, which I did and it helps me a lot to understand and helps me to make layout responsive and I learn grid property so much in this challenge. And you can also try this 👉Social proof section
And one more thing also the roadmap for frontend development has been given in discord channel of Frontend Mentor. You can follow that also, it will help you a lot to take the decision what to do next.
Hope, this suggestions will help you in further projects too!
Once again Welcome to Frontend Mentor, wishing you a joyful journey ahead and Happy Coding❤️
0 - @ankkielSubmitted 8 months agoWhat specific areas of your project would you like help with?
Any feedback is welcome. Thank you
@Bishalsnghd07Posted 8 months agoHi, @ankkiel👋
I would just like to say Wow💓
You design creation is wonderful. You gave the slow-motion animation it gives amazing experience. Great work👏
1 - @h4sithaSubmitted 8 months ago@Bishalsnghd07Posted 8 months ago
Hi, @h4sitha
Congrats for completing this challenge 🎉 and you did a great job👏
One adjustment should be needed might it be helpful:
As I see your site in mobile screen not responsive, layout had been attached to the top and bottom, give some padding from top and bottom in
<body>to make your layout as per the mobile view design given. By doing that, your layout looks better in mobile view too.Hope, this small tip will help you!
Happy Coding❤️
Marked as helpful1 - @RodneyTakundaMadondoSubmitted 9 months agoWhat are you most proud of, and what would you do differently next time?
Thank you for taking time to view my solution to this challenge, all feedback is welcome and thank you again in advance.
@Bishalsnghd07Posted 9 months agoHi, @RodneyTakundaMadondo👋
Congrats for completing this challenge 🎉 and you did great job 👏
I'm in mobile now, so I have one suggestion related to that:
- Top Layout is attached from the top in the mobile view, which not looks similar as per the design given in mobile view. Give some padding in body tag so that Layout will be detached from the top and looks more responsive in mobile view.
Hope, this small tip will help you!
Happy Coding❤️
Marked as helpful0 - @DivasJaglanSubmitted 9 months agoWhat are you most proud of, and what would you do differently next time?
I am proud that I made most of this project without any help.
What challenges did you encounter, and how did you overcome them?I didn't faced much challenges in this project
What specific areas of your project would you like help with?It is the designing part when I need some help 😐
@Bishalsnghd07Posted 9 months agoHi, DivasJaglan👋
Congrats for completing this 🎉 challenge and you did a great job👏
I would say, If you took help from anyone or can be from Google then definitely you will get help from there and might be your problem related designing part should get solved.
But, no issues I would assist you in ui part:
Let's Start✨
1)First of all you should work with mobile first approach, in this challenge you used desktop first approach. Using
max-widthin media queries defines that you are following desktop first approach, change it tomin-widththen it will said as mobile first approach. The advantage of mobile first approach is you did not have to define much CSS property in it. Using mobile first approach, styles are by default responsive. You Just have to give, define CSS property in desktop view to make responsive.2)Second, your mobile image is not set properly because you did not give any media-query less than
768pxscreen size. I will recommend to usereminstead ofpxand it is the best practice to be use. According to that same approach you can follow on Thanks for subscribing page to get desire result.I would recommend work on responsiveness and mobile-first approach, to enhance your skills and strong your hands in frontend development.
Hope this small tip will help you ahead in your future projects to!
Once again Welcome to Frontend Mentor wishing you a very joyful journey ahead and Happy Coding ❤️
Marked as helpful1 - @pauleenannSubmitted 9 months agoWhat are you most proud of, and what would you do differently next time?
What can I do to improve my coding skills? can i use bootstrap for this?
What challenges did you encounter, and how did you overcome them?I had a hard time making this site responsive because of CSS Grid.
What specific areas of your project would you like help with?can you help me check if my the way I style this site is correct?
@Bishalsnghd07Posted 9 months agoHi, @pauleenann👋
Congrats for completing this challenge 🎉 and you did a great job👏
I review your code and few adjustments needed to make improvement in your code:
Let's start from JavaScript:
1)When clicked on Dismiss button then, thank you page should get close and revert back to normal form page. Add functionalities into it.
Let's come to HTML part:
2)h1 should be used only once in entire web page, never repeat. Always follow the heading levels like this 👉
h1,h2, h3, h4, h5 and h6. By doing this changes your semantic HTML will improved.Let's come to CSS part:
3)Never ever use height and width directly in your body tag or in main landmark. It will only break the responsiveness of the layout, which you are doing. And you center the layout in body tag, that will not work effectively. Instead of that, you can use
min-heightrather thanheight. I will giving you a one insight, If you carefully analyse the behaviour of sites then you will realise or identify that sites are by default responsive by addingwidthandheightinto it, you are preventing the responsive and original size of the layout. That's why never recommend to useheightandwidthin the body tag. In this project it is negligible but in future when you work in 3 to 4 layouts in single page, then you will get disaster result, your layout will break hazardly. So, I will recommend to usemin-heightalways in the body tag and it is a best practice.Hope, this tips will help you with your future projects too!
Happy Coding❤️
Marked as helpful0 - @snakechickensoupSubmitted 9 months agoWhat are you most proud of, and what would you do differently next time?
I want to write HTML tags in a semantic way.
What challenges did you encounter, and how did you overcome them?I used Google to search for solutions when implementing shadows.
What specific areas of your project would you like help with?I want to know how to write clean.
@Bishalsnghd07Posted 9 months agoHi, @snakechickensoup👋
Congrats for completing this challenge 🎉 and you did a great job👏
1)Semantic HTML is okay but, you did a extra things on footer by adding section, that is breaking your semantic ui, no need of section there. You simply just give div there or only paragraph tag is enough
2)There is a one issue in your CSS basics, never ever give
heightin the body tag. It will only break your layout. You can directly givemin-heightinstead ofheight.Hope, this small tips will help you in further projects too!
Once again Welcome to Frontend Mentor wishing you a very joyful journey ahead and Happy Coding❤️
Marked as helpful0 - @313raduSubmitted 9 months agoWhat are you most proud of, and what would you do differently next time?
CSS Animations 🔥 🧨 💥
@Bishalsnghd07Posted 9 months agoHi, @313radu👋
Congrats for completing this challenge🎉
You had done a great job👏 specially with the animation amazing look you provide, no doubt.
But, have one suggestion for you with respect to mobile view. Layout is attached to the top in mobile screen. So l, would recommend to give some padding in a body or in your main landmark, so that layout will be detached from the top and your web page will become more responsive.
Hope, this small tip will help you with the responsiveness.
Happy Coding❤️
Marked as helpful0 - @Riya922003Submitted 9 months agoWhat are you most proud of, and what would you do differently next time?
I am proud of that I finally used flex box reponsively . I would try the same page using react.js .
What challenges did you encounter, and how did you overcome them?Responsiveness was the major challenge
What specific areas of your project would you like help with?"I need help with the CSS part of my project, particularly focusing on making my layout responsive using flexbox. I'm struggling with ensuring that the elements adjust properly across different screen sizes and devices. Specifically, I want to optimize the responsiveness of my flexbox layout to ensure it works well on mobile devices. Any guidance or tips on achieving this would be greatly appreciated."
@Bishalsnghd07Posted 9 months agoHi, @Riya922003👏
Congrats for completing this challenge🎉
First, of all I will tell you, the name of this challenge is single price grid component. So, by seeing the name it is highlighting that this challenge is made for using grid instead of flex. My opinion is also same you should use grid, using flex will only create panic and nothing else or you have to work to hard. So, better option and approach is to use grid. If you know grid, then I would definitely recommend to use grid not flex. If you don't know then I will say please do learn the grid and applied it. Surely, you will get your result. Also, you can refer to any senior developer's here, who create this project, from them you will learn a lot and also you can see my solution also.
Hope, this small tip will help you with the approach.
Once again Welcome to Frontend Mentor wishing you a very joyful journey ahead and Happy Coding ❤️
0 - @Juan-CubidesSubmitted 9 months ago@Bishalsnghd07Posted 9 months ago
Hi, Juan-Cubides👋
Congrats for completing this challenge 🎉 and you did a terrific job.
Your presence of mind in design point of view is amazing. Looks great, hands off🫡.
Just, one suggestion for you:
I would recommend work on a bit in semantic HTML. Never broke the heading levels. After using h1, then use h2 and so on. Follow the path like this 👉
h1, h2, h3, h4, h5 and h6in ascending order always. Headings are not only use for making text bolder or darker. It can be used for maintain semantic and can be used in titles. So, work like this.Other than that good job and hope this small tip will help you in further projects also!
Once again Welcome to Frontend Mentor, wishing you a joyful journey ahead and Happy Coding ❤️
0
