The most difficult part of this project was script. I found it difficult to animate the plus and minus icons. That is why i am unsure about this part. The description of this task provided a desing for mobile as well. So, should I write another html and css for mobile design in this case?
you do not need to create a new project for the mobile design. you should go and watch the a video on youtube on responsive web design to understand it more
This is not responsive. Any suggestions are welcomed.
Nice try at the design but you should not;
1.use specific height for main container it is better practice to use height: fit-content then use padding: to create spacing around keep in mind if your not using box-sizing: border-box it will create extra spacing around the container.
2. if your not sure which colour to use there is a website called colour finder here is a link to it
color finder when you visit the website drag and drop the design image provided to you by frontend mentor and click on the place you want to know the colour of and then copy the hex value of the colour to use in your css.
3.And dont forget to add border: radius to the image and the main container tag.
When using media queries is it better to have them throughout the css file or put them all at the end together?
Nice design, it seems like someone has alreadt answered the question, but when your going for a laptop-first design you should put all the media queries in descending order but when your going for a mobile-first design you should put all the media queries in ascending order.
Pure HTML & CSS development frontend challenge. I've polished my skills in Flexbox by doing this challenge.
Amazing design but i found some issues which are the following; 1.Use flex direction column on the body tag to move the attribute tag to the bottom 2.To make your design responsive use media queries learn more about them on youtube i would recommend kevin powell 3.Use align-items when using display: flex to align items straight to make your work look more professional
Feel Free to review and write feedback
works perfectly but the `border radius at the bottom right should be more to match the design and the year, month and day should align to the left and their font sizes should be bigger
Yes
Nice shot at the main design but your not quite there.
1.To center the container use
body{width: 100%;, height: 100vh;, display: flex; align-items: center; justify-content: center;}
2.To Achieve the two elemet side by side in but one having a borde and not affecting the other. -Create a div and sets its background to white and then create two div inside the div that you created inital then make the background of the first div the purple shade and sets its border radius to the right size and make the background color of the seond div inside the main div white.
This was my first time using Chart.js and it really simplified a lot of things for me. This is the first version. In the second version I want to fix the Readme.md, create a blog post for it and maybe increase the widths of the bar graphs.
Amazing design love the animations but instead of using a fixed height for the main component it is better to use padding, and the border-radius on you containers changes to 0 at 755px.
NeverStopGrowing
Wonderful design, but watch out for the bottom-right-border-radius: . The component's width is smaller than it should be, and the age calculator doesn't seem to work correctly. I would advise using an api, but you can do that later as you start learning about apis.
Had fun doing this project, any suggestions are welcome.
Nice solution, however I noticed a few problems with it. These are the issues and their fixes.
1.The attribute should not be in the blog preview card it should be outside at the bottom of the page: To fix this remove the attribute div and place it outside then set it position: absolute then bottom: 0 and position: relative on the preview card container to fix this.
2.Use media Queries to apply style for different screen sizes learn more about them on youtube
3.Do not separate your paragraphs use text-wrap: wrap; to make it change based on screen size
4.USe the proper Font-weight for different texts based on designs
Any tips appreciated
Hi, Nice design
Completed a QR code challenge
indian:
नमस्ते, बढ़िया डिज़ाइन लेकिन
english:
hi, nice design but
This is my first I build. I used tailwindcss. Please provide feedback.
Hello, Nice design but i would recommend scaling down your projects size to make it easier to work with and you should reduce the padding between the text and its container. And you should position the attribute at the bottom, reduce its font and also add the link to your github as the location of the link.
