Skip to content
OverviewSolutions
15
Comments
9
Rajesh Janyani
@Rajesh7rj

All comments

  • Rajesh Janyani•330
    @Rajesh7rjPosted over 1 year ago

    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
  • Rajesh Janyani•330
    @Rajesh7rjPosted over 1 year ago

    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
    @ignaciofigueroadevSubmitted almost 2 years ago

    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!

    Profile card component (HTML, SASS, FLEXBOX, BEM)

    1
    Rajesh Janyani•330
    @Rajesh7rjPosted almost 2 years ago

    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
  • Rajesh Janyani•330
    @Rajesh7rjPosted over 2 years ago

    @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
    @ChrisAndrewsDevSubmitted over 2 years ago

    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!

    Product Preview Card / Sass

    2
    Rajesh Janyani•330
    @Rajesh7rjPosted over 2 years ago

    @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"> --> add

    All 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"> --> add

    I hope this will help you.

    Good wishes......

    keep coding..... keep learning.......

    Marked as helpful
    1
  • Rajesh Janyani•330
    @Rajesh7rjPosted over 2 years ago

    @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
    @Omoh123Submitted over 2 years ago

    A feedback will be well appreciated, I'm not sure I used some of the properties in the right way.

    CSS Grid

    3
    Rajesh Janyani•330
    @Rajesh7rjPosted over 2 years ago

    @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
    @ohermans1Submitted over 2 years ago

    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

    Second project using React

    2
    Rajesh Janyani•330
    @Rajesh7rjPosted over 2 years ago

    @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
    @gvneeSubmitted over 2 years ago

    How to make it more responsive? And I want to avoid using specific fixed values like 300px for dimensions.

    product preview card

    1
    Rajesh Janyani•330
    @Rajesh7rjPosted over 2 years ago

    @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