@MubarakAfolabi
P
Jon
@jonmc89All comments
- P@jonmc89
Nice Work, I love the live updated UI as you type.
- @DaveldiP@jonmc89
This looks great. I love the coloured drop shadow on the active state of the button.
- @RaniaEl-khoulyP@jonmc89
The background image is a nice touch.
- @Mohamed-AbdelreheemP@jonmc89
Nice work, really close to the solution.
- @GhostVinAdeWhat are you most proud of, and what would you do differently next time?
I was able to understand some approach and how they work
What challenges did you encounter, and how did you overcome them?TH font part
What specific areas of your project would you like help with?Mobile view
P@jonmc89I think one of the best things you can try is working on the mobile view first then using media queries to scale. Personally it’s something started doing during my time on Frontend Mentor.
With the media query you can the use min-width to scale up.
@media screen and (min-width: 90em) { /* Your styling adjustments here */ } - @AriKILLERWhat are you most proud of, and what would you do differently next time?
Most proud of knowing how to structure it without giving it too much thought, the stylesheet its pretty neat and I like how everything turned out together, making the URLs have an style was pretty cool because the default blue and underlined its ugly for my liking.
What challenges did you encounter, and how did you overcome them?How to change the style of the URLs, it turned out to be just a mistake of mine as I was trying to style the wrong thing instead of the <a>
What specific areas of your project would you like help with?With the proportions, to know if the space between elements its well done or not, because I think its what troubles me the most in the challenges I have done so far.
P@jonmc89Looks good. Well done, if it makes you feel any better I have made that mistake with links loads of times 😂.
A couple of tips for you. As most of the elements have the same font you can define this in the body element on your css that’s way everything will inherit the same font.
Another thing you can try is defining your colours as a variable that way if you need to amend you only have to do it one place.
The below link as a good definition:
Marked as helpful - @DanKRT-StarWhat are you most proud of, and what would you do differently next time?
In future projects, I would like to:
- Add ARIA roles and better accessibility support
- Replace alert() with a custom modal or toast for better UX
- Implement better animation sequencing for smoother transitions
- Ability for user to add new task, delete task, sign-up to create more than 5 tasks
I have trouble with be used to using fetch to get database but thankfully I got code copilot to help me a lot with that
What specific areas of your project would you like help with?I'd like you guys to share me documents or tips when using fetch in JavaScript. Thanks a lot
P@jonmc89This is awsome, I love the way it pops in on page load. Your JS code is so concise, would love to be able to think of that.
- @Pc-KiruiWhat are you most proud of, and what would you do differently next time?
Did the projected as expected from me. Came up with a design that resembled the one I was given in the challenge. Purposing to go through hover and focus states use it to improve my design.
What challenges did you encounter, and how did you overcome them?Did not encounter any challenge.
What specific areas of your project would you like help with?- Could you please help me in understanding how to use Figma files provided in the project description.
- Have been provided with some fonts in the project but need some guidance on how to make use of them.
P@jonmc89First of all, you have made a great attempt at this challenge. Regarding adding fonts, my method is to go to googlefonts, They have a method of adding them to your project with 1 line of code.
- @FuerenDevWhat are you most proud of, and what would you do differently next time?
I'd do the table implementation differently the next time. I'm proud of almost everything because it's my first ever good looking HTML, CSS project :D
What challenges did you encounter, and how did you overcome them?Tables was hard and the mobile implementation took me some time to understand but i think it turned out good. I mainly used AI to overcome them.
P@jonmc89Great Job, I have a tip that I learned through the platform. Next time you take a challenge try starting with the "Mobile View" first. I find that its easy to scale up and will take less code to fit to other view ports.
You can then the media queries like so:
@media screen and (min-width: insert width here){}Give it a go :)
Marked as helpful - P@Jayfx24What challenges did you encounter, and how did you overcome them?
Setting the shadow on success button hover was quite challenging. Initially i attempted using box-shadow but it did not turn out right, after some search i realized i could achieve it with
::after + blur, which did the trick :)P@jonmc89Great Job!, nailed the design and form validation in all device views. What you could do to make it a full solution is add a screen re direct to the success page.
Below is how I managed it.
/* JS form main form page add this to the "If email is valid part of your code */ window.location.href = "./success.html"; /* Then on the success page adding this to the button to dismiss */ const dismissBtn = document.getElementById("dismissBtn"); dismissBtn.addEventListener("click", function (event) { window.location.href = "./index.html"; });Marked as helpful - @BCEESAY10What specific areas of your project would you like help with?
- For desktops, positioning the share popup directly above the share icon
- Making the pop up better for medium screen sizes like tablets
P@jonmc89Solid start, i understand the trouble you were having with sizes of the image, what i did was to make an empty div and made the background img the Draws image. The displayed the tablet and desktop view as Grid. Was a Tricky one for me this one but I think you have made a good start.
- P@AdamHaniffP@jonmc89
Hey, Looks great from what i can view, i think there is something weird happening with the previewer. You code is imaculate love the organisation in your CSS.
- @YousefAdelGitP@jonmc89
Looks great nailed the layout and structure. Taken a look at your CSS too, definatley a few things I could learn from you.
- @lorelairarasP@jonmc89
Looks good, it would seem that the links are broken to your icon images on the cards themselves.
- @Bruno091pyWhat challenges did you encounter, and how did you overcome them?
Eu senti um desafio para fazer a responsividade para tornar o site em mobile.
P@jonmc89Looks Great!
- @Mrc3193What are you most proud of, and what would you do differently next time?
I'm proud I managed to produce a result without premium design tools (Figma). Although it was difficult, it was a very fruitful journey.
What challenges did you encounter, and how did you overcome them?The most challenging part was adjusting the layout to achieve a result as close as possible to the objective. This was because, as I mentioned before, I didn't use the premium resources.
What specific areas of your project would you like help with?Any feedback is welcome.
P@jonmc89I think you did a great job with the layout. Looks as close as the solution example. One small improvment but not essential, the prep time section could do with loosing the bullet points, unless it was intential :).
Other than that great job!
- @DotesagP@jonmc89
Very nice, love the smooth transition hover effect.
- @egorpyaWhat are you most proud of, and what would you do differently next time?
This time I did the project really fast - in just 4 hours! Yes, the project was pretty easy, but nevertheless, I enjoyed making it!
The main addition to the site is Snow particles from this repo. To comply with MIT license, I added the same as well.
Also, I included Click to Copy function to the email button, because why not!
P@jonmc89Love the snowfall effect. One thing i noticed when you hover of the card you get a scroll bar on the y axis.
