Amar Kosare• 170
@amar215
Submitted
I used flex-box to center the component.
Rajesh Janyani
@Rajesh7rj
All comments
- Rajesh Janyani• 330
@Rajesh7rj
Posted
Hello @amar215, Congratulation for your first chellange.
I have seen your code, one thing I want to tell you is the width and height of card are not appropriate. You should give width in rem (around 18 rem to 20rem). because giving width in % it will change according to screen size because it's depend on screen size. also for heigth you should give 100% height or don't giving height it by default takes space that requires for contain of card with padding. So if you add just width : 18rem and height:100%. It will make your component accurate and responsive also.
.card { display: flex; justify-content: center; align-items: center; flex-direction: column; margin: 5rem auto; padding: 20px; width: 18rem; <==== height: 100%; <==== background-color: hsl(0, 0%, 100%); border-radius: 15px; }
I hope it will solve your problem, keep coding and keep learning.
Best Wishes
Rajesh Janyani
}
0 - leiftocd• 60
@leiftocd
Submitted
Rajesh Janyani• 330@Rajesh7rj
Posted
Hello @leiftocd, Great work buddy.
I want to you give advice about your image border radius. your border-radius is 10 px. But we only have to give border-radius to only top left of the image and bottom left of the image.
So you can add these two line of code for correction.
this is your code should be in your style.css 👇 img{ border-radius : 10px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
or
img{
border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
I wish you the best, hope my feedback will help you. Keep learning buddy...
Thanks Rajesh Janyai
Marked as helpful
0 - Ignacio Figueroa• 250
@ignaciofigueroadev
Submitted
Hey there! 🫡 this is Nacho
This is my solution of the "Profile card component"
How was my experiencie in this project?
Was very funny, I finished it in two hours. I've had a problem with the backgrounds but I fixed it right away
What I used in this project?
- HTML
- SASS
- BEM
- Mobile-first workflow
I have some questions:
- Is my code okay?
- I have something to improve?
I want to know your feedback! any tip or advice are helpful and welcome!
Cheers!
Rajesh Janyani• 330@Rajesh7rj
Posted
Hey @ignaciofigueroadev, Great Work Buddy 👏.
I saw your design it looks great but there are few things we can change and correct them. I think card height seems little big so you can set card height.
Also in mobile view your card seems same as desktop view, you can change font size and scale up your card dimensions according to mobile-design.jpg file which given in the resources.
You can use @media-query method for responsive website. You can check this link for that : https://www.w3schools.com/css/css_rwd_mediaqueries.asp
I hope you can understand this and improve your code. But again it was great attempt for your side.
Wish you a best of luck! ✌️ Keep Learning.... Keep Coding.....
Thanks! Rajesh Janyani
1 - Vinicius Henrique• 590
@viniciusshenri96
Submitted
Hi everyone, this was my solution to this challenge, whoever can give me some feedback on the code or advice, I appreciate it. 👍.
Rajesh Janyani• 330@Rajesh7rj
Posted
@viniciusshenri96 Great work! mate, looking responsive for all devices.
Great written code of html and responsive.css. Achieve responsiveness for almost all devices (tabs and phones) is commendable. It is great learning for me from your code.
Keep putting your best work forward. It is helpful for many developers like me.
Best wishes.... Keep coding.... Keep learning...
Marked as helpful
0 - Chris Andrews• 170
@ChrisAndrewsDev
Submitted
Hello guys, first time here!
Q1. Are there large chunks of un-necessary styles/overlapping styles? Q2. Is my use of SASS efficient and practical? Q3. Any obvious changes I could make to improve my codes' structure? Q4. (Optional/Less relevant) - Any general advice on submitting challenges on here, did I do it correctly? Thanks in advance!
Rajesh Janyani• 330@Rajesh7rj
Posted
@ChrisAndrewsDev Good effort on first one. Here I wanna help you on you 3 ACCESSIBILITY ISSUES.
Document should have one main landmark, this encloses the main part of your project, you can fix it like this:
<div class="homeWrapper"> <-- remove <main class="homeWrapper"> --> addAll page content should be contained by landmarks, at the end of your code you have a div that can easily be a footer:
<div class="attribution"> <-- remove <footer class="attribution"> --> addI hope this will help you.
Good wishes......
keep coding..... keep learning.......
Marked as helpful
1 - Stevan-Dev• 330
@Stv-devl
Submitted
Hi, First project I complete in javascript. I did a simple toogle to display the popup. I use SASS, grid, flexbox and simple javascript
Rajesh Janyani• 330@Rajesh7rj
Posted
@Stv-devl Nice one mate, Your solution looking very good.
can you tell how you did that box thing when you click in share icon.
It will great help if you guide about that and because I'm going to do this challenge very soon.
0 - Praise• 80
@Omoh123
Submitted
A feedback will be well appreciated, I'm not sure I used some of the properties in the right way.
Rajesh Janyani• 330@Rajesh7rj
Posted
@Omoh123 Hey, Good attempt mate, but i wanna give few suggestions.
First you should uncomment your font url.
Second for element <p> , you should you should use font-family: "fraunces", because it is mention in style-me.guide of project.
You can also use <h1> instead of <p> for text "Gabrielle Essence Eau De Parfum".
You can also add font-weight -700 for larger font (for boldness of font) for text "Gabrielle Essence Eau De Parfum" and for price.
Your class ="text" container look more wider, you can set his width equal to class "image-text".
Hope these things will help you. Over the time you will become better and better.
Best Wishes.... Keep coding....
Marked as helpful
0 - Ollie• 580
@ohermans1
Submitted
I really enjoyed this project - it is my second using React, and involved a lot more props and other behind the scenes react then my last project to get the slider etc working. I also used SCSS as I much prefer it over standard CSS.
The initial app was created using create-react-app, and was built and added to github pages using gh-pages.
I am really happy with the end result, but of course, appreciate any feedback!
Est time: 4 hours | Total time: 6 hours
Rajesh Janyani• 330@Rajesh7rj
Posted
@ohermans1 good one, i found your id in solutions section, i've seen your bio, your self taught developer. i'm also learning frond-end my own, it's been 1 month, i want your help to guide me or give any reference (any course, any youtube videos, any books) for my skill improvement. your work as self taught is very good and inspiring, it would be great help if you guide, how long its takes, what is way to learn and which things have to learn for it.
keep going.... keep coding... best wishes....
Marked as helpful
1 - Gvne• 70
@gvnee
Submitted
How to make it more responsive? And I want to avoid using specific fixed values like 300px for dimensions.
Rajesh Janyani• 330@Rajesh7rj
Posted
@gvnee You did good job.
You can use "media query (@media only screen and (max-width: 600px or 'any value you want' )" for responsive web design.
You can also checkout this :- https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I hope it will help. keep learning buddy.......
Thanks......
1
