Skip to content
OverviewSolutions
5
Comments
112
Bishal Singh Deo🎮
@Bishalsnghd07

All comments

  • Bishal Singh Deo🎮•1,440
    @Bishalsnghd07

    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❤️

  • 6xg0d•210
    @6xg0d
    What 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

    QR code challenge solution

    2
    Bishal Singh Deo🎮•1,440
    @Bishalsnghd07

    Hi, @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 helpful
  • Rudro032•20
    @Rudro032
    What 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

    I used HTML and CSS

    1
    Bishal Singh Deo🎮•1,440
    @Bishalsnghd07

    Hi, @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❤️

  • Bishal Singh Deo🎮•1,440
    @Bishalsnghd07

    Hi, @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👏

  • Bishal Singh Deo🎮•1,440
    @Bishalsnghd07

    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 helpful
  • Rodney•320
    @RodneyTakundaMadondo
    What 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.

    Single-Price-Grid-Component

    1
    Bishal Singh Deo🎮•1,440
    @Bishalsnghd07

    Hi, @RodneyTakundaMadondo👋

    Congrats for completing this challenge 🎉 and you did great job 👏

    I'm in mobile now, so I have one suggestion related to that:

    1. 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 helpful
  • DivasJaglan•170
    @DivasJaglan
    What 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 😐

    Responsive Newsletter sign-up form with success message

    1
    Bishal Singh Deo🎮•1,440
    @Bishalsnghd07

    Hi, 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-width in media queries defines that you are following desktop first approach, change it to min-width then 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 768px screen size. I will recommend to use rem instead of px and 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 helpful
  • pauleenann•240
    @pauleenann
    What 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?

    Responsive landing page using CSS Grid

    1
    Bishal Singh Deo🎮•1,440
    @Bishalsnghd07

    Hi, @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-height rather than height. 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 adding width and height into it, you are preventing the responsive and original size of the layout. That's why never recommend to use height and width in 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 use min-height always 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 helpful
  • mijeong•160
    @snakechickensoup
    What 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.

    HTML, CSS

    2
    Bishal Singh Deo🎮•1,440
    @Bishalsnghd07

    Hi, @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 height in the body tag. It will only break your layout. You can directly give min-height instead of height.

    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 helpful
  • Bishal Singh Deo🎮•1,440
    @Bishalsnghd07

    Hi, @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 helpful
  • Riya Gupta•30
    @Riya922003
    What 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."

    Responsive Landing Page using flex box

    2
    Bishal Singh Deo🎮•1,440
    @Bishalsnghd07

    Hi, @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 ❤️

  • Bishal Singh Deo🎮•1,440
    @Bishalsnghd07

    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 h6 in 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 ❤️

  • VakhoCloud•190
    @VakhoCloud
    What are you most proud of, and what would you do differently next time?

    It was interesting to build, but there were some issues. The first issue was with Angular. I tried to build with it, which was easy, but problems arose during deployment. The main issue was that SVG files were not displaying on GitHub Pages. The second issue was deploying Angular with Git, so I learned something new. So I recreated it with pure JS. Guess what? There was also an issue with SVG files. I don't know why, but in incognito mode, everything is working with pure JS. Also, with Angular, this problem isn't solved in incognito mode. ***SO PLEASE CHECK THE CHALLENGE WITH INCOGNITO WINDOW.

    What challenges did you encounter, and how did you overcome them?

    I want to mention that in CSS there is 2 width, first is compatible with Chrome and second is with Firefox .success-container button { width: -webkit-fill-available; width: -moz-available;

    }

    HTML, CSS, JavaScript, CSS Flex-Box

    1
    Bishal Singh Deo🎮•1,440
    @Bishalsnghd07

    Hi, @VakhoCloud👋

    Everything looks good, I didn't find any error anywhere😊

    Marked as helpful
  • Bishal Singh Deo🎮•1,440
    @Bishalsnghd07

    Hi, @not-PJ👋

    Congrats for completing this challenge 🎉

    Responsive not at all, I would recommend to work on HTML Semantic and CSS basics. To learn basics, I would recommend this best resource 👉HTML Basics and CSS Basic.

    And if you want to make this project responsive with pixel perfect, then this video will help you👉Responsive Single Price grid component web page

    Hope this suggestion will help you!

    Happy Coding❤️

  • Bishal Singh Deo🎮•1,440
    @Bishalsnghd07

    Hi, @SONALI-NEGI👋

    Congrats for completing this challenge 🎉 and you did a fantastic job👏

    There is few adjustments should be needed:

    1)Semantic ui: Do not break the heading levels. It should be like this 👉h1, h2, h3, h4, h5 and h6. Start with h1, h2 and so on. h1 is the most important tag and h6 is the least important. Always follow the ascending order. Never jump h1 to h3. It loose the semantic ui of your web page.

    2)No need of using ul and li tag in price-card__list class. It is not a list, it's a paragraph. Instead of using <li>, it should be a better approach if you use <p>. And just give some max-width properly on it, so it maintains the layout responsive.

    3)I would recommend one tool to you which will help you out to check your web page performance, accessibility, SEO and Best Practices, that is lighthouse. By inspecting in your browser you can get the option lighthouse testing. This tool will decrease developer workload and gives accurate result.

    4)Apart from coding and development, I have a general review for you I gonna tell you, I also did the same mistakes at starting of my frontend development journey but as time passes I realise that GitHub is only use for tracking and saving our local repository into it, by any chance if we delete our local repository code from our pc, then from GitHub we can clone this repo and reuse it for this role GitHub is used for not for deployment.

    For deployment I would recommend to use netlify or vercel for free and it is hassle-free also.

    Hope, this suggestion will help you ahead in your future to.

    Happy Coding❤️

    Marked as helpful
  • Bishal Singh Deo🎮•1,440
    @Bishalsnghd07

    Hi, @zecher-07👋

    Congrats for completing this challenge 🎉 and you did great job👏

    I have one suggestion for your regarding query:

    Yeah flex will be better option rather than using only padding, remove that all padding properties in body tag and add this one proper approach body { background-color: hsl(212, 45%, 89%); padding-top: 60px;❌ padding-bottom: 60px;❌ padding-left: 17px;❌ padding-right: 17px;❌ display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; }

    Adding this property, will center your main div properly. This is the basic CSS, you should follow and by doing this changes in main div, your rest child div will follow the main div & your work become easier.

    Hope, this suggestion will help you with your approach!

    Once, again Welcome to Frontend Mentor, wishing you a joyful journey ahead and happy coding ❤️

  • Bishal Singh Deo🎮•1,440
    @Bishalsnghd07

    Hi, @MhizGordon👋

    Congrats for completing this challenge🎉

    I'm in mobile now, so I can give feedback related to that only:

    I have a one suggestion for you:

    1)To make your web page more responsive in mobile view, give some padding in the body, so the layout looks more responsive in mobile too.

    Other than that you did a great job

    Hope this small tip will help you!

    Happy Coding ❤️

  • Bishal Singh Deo🎮•1,440
    @Bishalsnghd07

    Hi, @Sarkastherin👋

    Congrats for completing this challenge🎉 and you did a tremendous job👏

    Going through your HTML & CSS rather than JS, that you want. Your HTML semantic is good, approach is okay. Just have to work on css basics.

    A one suggestion for you, might it be helpful:

    1)I see in your code, there is a few css foundation errors you given width and height directly in body tag, which is not a best practice, by using height directly in body, you are preventing actual(full) size of your layout, in this case layout of your web page may break, it is negligible in smaller projects, but when you work with larger projects ahead in future, when there is 3 or more components in same web page then it will give a disaster result. I would recommend, Instead of using height you can use min-height. You can use height and width in child div's to maintain your layout responsive. By doing this accessibility and performance of your web page will improved.

    Hope, this small tips will help you ahead in your future too!

    Once again welcome to Frontend Mentor, wishing you a joyful journey ahead and Happy Coding❤️

    Marked as helpful