Looking to hire developers?
@ruedasjnthn
@zuolizhu
Submitted
Another small project built using Svelte, hope you like it!
Feedbacks are super welcome!
One little bug I found out is that, the copy won't work within the preview window. But it will work on the actual live site: https://zzl-frontendmentor-challenges.now.sh/url-shortening-api-master/index.html
hi your work is awesome, but im kinda sad im trying to find solution that succesfully use the shortly api into their project. overall, i will use this design as my preference in completing this challenge
@ab-irami
Submitted
Feedback are always welcome.
Hey great progress, im wondering if my recent solution about this challenge will help you improve your website. I have to admit the theme toggle switch is the most difficult part.
@Gabriel01-jpg
Submitted
What I can do better to improve the responsive design... This is my only mistakes on this project
i think making the image and content container size proportional to each other will make it more nice, try to set the grid template column to 1fr 1fr.
be consistent with your padding and margin, i think it is from 900 - 1000px screen width the content gets out of its container and made the layout a bit mess
@Hostnik
Submitted
Any feedback is welcome.
there a lot of things in my opinion that need to work on to improve your website
first using proper breakpoints especially on your mobile screen
u can use grid to improve your design
the typography need to be pleasing to the eyes and not breaking lines at some point
u can use mix-blend-mode: multiply the reduce the opacity of your image to 70% to match the set design in this challenge
Marked as helpful
@Swan-Yee
Submitted
I made this with HTML CSS and to get responsive every device. Warmly welcome of your feedback and suggestion what I need or what should fix.
Thank You......
there are some things to change to make this website more elegant in my opinion
u might want to reduce the padding of your content to make it more nice and readable
grid is my best suggestion to control your card component to fix the image as it shrink a lot as the viewport width decreases
Marked as helpful
@Numark12
Submitted
This is my first completed project. I would like to know some way to reduce lines of code in CSS (it was quite long for such a small page). Thanks!
Este es el primer proyecto que finalizo. Quisiera saber si hay alguna manera de reducir las líneas de código de CSS (quedó bastante largo para una página tan chica). Gracias!
there are some things that you can work on to improve your website in my opinion
First is the typography make sure the heading stand out than the subheading, using font-weight bold might be the way to fix that
Somewhere at 620 to 635px the design become a mess, make sure to check your media queries to ensure fluid responsiveness
You might want to consider using percentage in you margin to have consistent margin in your card component
Marked as helpful
@blurrypxl
Submitted
Hi guys, I just finished this challenge. Please let me know if you have any suggestions, I'd really appreciate it :)
Thank you
The website responsiveness is great but the margin of the card component is not proportional
@DavidAlex17
Submitted
i would like to say this challenge made me realize i have a lot to learn in web development. not just that, but git/github as well. i have a long way to go, so please any constructive criticism on anything specific or in general would be much appreciated.
use display:block to show your image
also use text -align: left to correct the layout of your design, u can achieve this using media queries to help you change layout as the screen size changes
@ElizabethWoodhouse
Submitted
Would love feedback on my CSS and html
using grid will help you a lot in this challenge
use mixblend mode: multiply then set the opacity of your image to 70%, you can achieve the set design for the image using this technique
Marked as helpful
@3filian
Submitted
How to set the image to right? How to add the purple wrapper to the image?
use mixblend mode: multiply then set the opacity of your image to 70%, you can achieve the set design for the image using this technique
@mpham-12
Submitted
Hi guys, I just finished my HTML and CSS courses and am now working on my application skills before I start JS. I tried my best to replicate the challenge but I am aware that I might have some bad practices in my coding. I was unable to center the bottom text and also unable to put a purple filter over the card image. I am open to feedback. Thanks!
use css grid broo, it will help you a lot in this challenge, also it is easier to use grid with sass
@SatwikModi
Submitted
Any suggestions for object alignment other than float.
You can use grid to properly control your card component, take note the it might be easier to use grid with sass
@chillcodemao
Submitted
I presume my solution is about right (by comparing to the design). In this case my question would be: is there a more efficient way to code this responsive page? P.S. I am new to Github and how it works - I learned the basics for this exercise.
You can use percentage or viewport width to make consistent margin as the screen size is reduced
Marked as helpful
@zeshanabdullah10
Submitted
Please give feedback. Will be really obliged and thankful if I can learn some good tips from you. Thank you in advance.
try to make the typography in your website more clean, this could be better with the proper use of margin and padding. also, the proper font-size and family can make your website more pleasing to the eyes
Marked as helpful
@Sarat-Dev
Submitted
Why is mobile site moving towards the right of the page?
Also let me know what other corrections do i need to make on my page?
U should use object fit to fit the image inside the container. Try to use grid to control the positioning of your card container, take note it might be easier to use grid with sass
@Rohitgour03
Submitted
Hello friends, This is my first project at the frontend mentor and very new to the git and GitHub things, feeling scared but also excited about these new things. Although this project seemed to be very easy in the beginning, as I was working on it I faced some problems. Could you help me with them? How to make the height of the background image equal to the size of the main card? and anything you found wrong, or not good, please aware me of that. And first time writing the README file, don't have many words to write.
you should set the proper breakpoints in your media query, good try keep on practicing bro!!
Marked as helpful
@EthanHardwick
Submitted
This is my first frontend challenge and also really my first finished piece of work. I tried not to use too much help/examples. Most of the HTML and CSS came from me in a way that I thought was best so would really appreciate if you could tell me how wrong I am! Also I couldn't get the size of the desktop card correct - it looked fine when I was editing but for some reason stretched when uploaded to github.
Thanks.
The website is responsive good job! However, watch out your margin and padding in every breakpoint, ensuring that it is pleasant to the eyes of the viewers
Marked as helpful
@zokn
Submitted
It is not that complex, it comes in handy to reinforce css
Try to work more on your media queries to provide better web responsiveness, try to reduce its margin as screen size decreases. You can check my solution in this challenge. I would love to hear your opinion on my solution :>>
@m4sc0
Submitted
try on utilizing flexbox and media queries in your solution, it will surely help you in achieving a responsive website. you can check my solution in this challenge i hope it can help :>>
@ApplePieGiraffe
Submitted
Hey, everybody! 👋
This was a fun challenge in which I learned how to use and style the <details> and <summary> HTML elements.
I also added a bobbing animation to the floating cube (with a small touch from the drop-shadow CSS function) and animated the linear-gradient background with this helpful tool.
I'm quite happy with the result! 😊
Any feedback on both the design and code is welcome and appreciated! 😃
Happy coding! 😁
EDIT: For some reason, the details marker on each of the FAQs is showing up in the screenshot (even though I set their display to none) but they're gone on the actual page, as far as I can tell.
I love the little animation on the side. It really inspires me. I will make your solution my reference in creating this challenge
@ohad331
Submitted
Hi there! I had some problems with adding a purple color shade using css, and vertical centering. If someone can help me solve these issues I will be glad. tnx!!
Also, try to work on the page responsiveness of your website, it will take some time. But, I hope you will nail it sooner or later.
@ohad331
Submitted
Hi there! I had some problems with adding a purple color shade using css, and vertical centering. If someone can help me solve these issues I will be glad. tnx!!
Try to set the background of your image container to purplish then on your image reduce its opacity to 75% probably then set the mix-blend-mode to multiply. I also have my solution in this challenge you can check my github repo for the code. Let's help each other to become a better front-end developer :>>
