RohanIV
@RohanIV
All comments
- RohanIV• 160
@RohanIV
Posted
Good work . Your site looks good
0 - RohanIV• 160
@RohanIV
Submitted
What are you most proud of, and what would you do differently next time?
Implementing JS, still don't fully get it but managed to make it work.
What challenges did you encounter, and how did you overcome them?
Getting JS to work. A lot of research and video watching.
What specific areas of your project would you like help with?
- When I extend each question, on the smaller screens the background doesn't extend to the bottom and leaves a blank space. Don't know how to fix it.
- Any tips on make my JS code more efficient if needed.
2a. And any tips on getting better at JS. (still gonna keep practicing)
Thank you in advanced
RohanIV• 160@RohanIV
Posted
Thank you for commenting. I managed to fix it. In my CSS I had
background-image: url("assets/images/background-pattern-mobile.svg");and i change it to
background-image: url("../assets/images/background-pattern-mobile.svg");I just had to add ../ to the beginning @rtoddm
1 - MOHAMMED KEDIR• 10
@Mrcoolprince
Submitted
What are you most proud of, and what would you do differently next time?
This is a solution to the QR code component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
- Screenshot
- Links
- My process
- Built with
- What I learned
- Continued development
- Useful resources
- Author
- Acknowledgments
Screenshot
Links
- Solution URL: Add solution URL here
- Live Site URL: Add live site URL here
First i started from observing the figma file which gave me a good idea of how to start, Then i moved to the html part from creating a div for the first container which will contain our Qr code and paragraph then created another div and container for the qr code image part then continued by creating the paragraph part at last the attribution part. Next moving to the css part i started by giving my desktop a proper margin to hold my html structure in place the continued by coloring it to match the figma and continued to the container part which will contain everything(the Qr code image and the paragraph) after giving the container a proper margin and padding which helped me to hold it in position and followed by width and height the container had been finished moving to the Qr code image which was done by width and height in addition to the border-radius. Then continuing to the paragraph part i started by giving it a proper font weight and font style which was the easy part thanks to google font then finished it by giving it the font size.
Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
What I learned
I learned a lot of things which helped me to test my knowledge specially the Css parts.
I will show you the best parts below:
#rectangle { background-color: hsl(0, 0%, 100%); width: 22%; text-align: center; margin: auto; margin-top: 11%; border-radius: 20px; box-shadow: 0px 25px 25px rgba(0, 0, 0, 0.05); } #text2 { text-align: center; font-family: 'Outfit', sans-serif; font-weight: 400; color: hsl(220, 15%, 55%); font-size: 15px; display: inline-block; left: 0%; width: 256px; position: relative; letter-spacing: 0.19px; }Continued development
As my learning journey continues i will be focussing on the css part specially the css-grid and flex-box which had been a challenge for me.
Useful resources
- Resource 1 - This helped me to get great fonts reason. I really liked this website and will use it going forward.
- Resource 2 - This is an amazing website which helped me finally understand Css(flex-box and grid). I'd recommend it to anyone still learning this concept.
- Resource 3 - This is an outstanding website which helped me find some help concerning my code. I'd recommend it to anyone having the same problem.
- Frontend Mentor - @Mrcoolprince
- Twitter - @Mr_cool_prince
I would like to thank FRONT-END MENTOR for helping me advance my coding knowledge and test my self .
What challenges did you encounter, and how did you overcome them?
I was challenged with placing the qr code image which I over came by the help of the community
What specific areas of your project would you like help with?
I would like to get help with understanding flex-box and CSS grid
RohanIV• 160@RohanIV
Posted
These helped my with learning flex and grid:
flexbox zombies - game
flexbox froggy - game
Grid Garden - game
Josh W Comeau - Grid, Flex and other stuff (interactive site)
0 - David• 80
@David-dawn
Submitted
What are you most proud of, and what would you do differently next time?
Am proud to pull this off, cause it contains advance css grid
What challenges did you encounter, and how did you overcome them?
None
What specific areas of your project would you like help with?
None
RohanIV• 160@RohanIV
Posted
Nice site. 👍
Marked as helpful
0 - Branka R• 290
@brainka
Submitted
What are you most proud of, and what would you do differently next time?
I am so used to using flex box, but am pretty happy with learning to use grid as well.
What challenges did you encounter, and how did you overcome them?
Getting the cards to be correct height and width.
I created another row instead of using gap...not sure if this is the correct way of doing this.
What specific areas of your project would you like help with?
Overall review of my code and any feedback on my solution.
RohanIV• 160@RohanIV
Posted
Nice site. I gave my card a width then for my grid section I used align-items: center; to get them in place and even. Still new to grid but hope this helps
0 What are you most proud of, and what would you do differently next time?
completing the challenge
What challenges did you encounter, and how did you overcome them?
- positioning the 169 previous price is hard for me because it kept shifting with different screens
- I could not the exact padding measures on figma, had to come up with my own calculations
- I started with the mobile design and could not hack it, shifted to desktop then adjusted to mobile.
- the media query is a bit challenging-Did not use font display, line height, line length font size topography
What specific areas of your project would you like help with?
the above mentioned challenges
RohanIV• 160@RohanIV
Posted
Nice page. You can try this for your 169 price:
- remove: 'justify-content: space-between; on .price tag and add 'align-item: center;' .pricetag { align-item: center display: flex; line-height: 1rem; margin-bottom: 10px; }
-remove width:50px; from .price1 .price1 { color: #3D8168; font-family: "Fraunces", sans-serif; font-weight: 700; font-size: 32px; margin: 10px; margin-left: 0; }
hopefully this helps
Marked as helpful
0- Divadovitch• 190
@Divadovitch
Submitted
What are you most proud of, and what would you do differently next time?
Adapting the image to the smartphone version with container queries.
What challenges did you encounter, and how did you overcome them?
I didn't look at the mobile version until I finised the desktop version. I had to make changes in the css for the
h1and the image recipe. I used clamp for the font size and container queries for the image.What specific areas of your project would you like help with?
A better way to adapt the image of the recipe in a fluid manner between the desktop and the mobile version.
RohanIV• 160@RohanIV
Posted
Still learning myself but, maybe try 'mobile first design' as for me it it easier to start small and then get bigger. It also helps with responsiveness and accessibility.
0 - Poornachandran• 30
@Poornachandran14
Submitted
RohanIV• 160@RohanIV
Posted
Good site. Consider using flexbox to center the card.
0 - Cousnay• 320
@Disney-Banje
Submitted
What are you most proud of, and what would you do differently next time?
Easy project for me. Improved my HTML semantic structure and included relative units for CSS.
What challenges did you encounter, and how did you overcome them?
No Challenge encountered! A fairly easy one for me.
What specific areas of your project would you like help with?
Some feedback would be highly appreciated.
RohanIV• 160@RohanIV
Posted
Nice page. Nothing to add, but learned a bit myself reviewing your code.
0
