@llariola00
Submitted
I learned a few things in this challenge.
- Bootstrap is quite restraining in terms of fine-tuning CSS properties.
- Hover overly icon effect.
Aadvik
@Aadv1k
All comments
- Aadvik• 1,250
@Aadv1k
Posted
Good, clean and polished. What else can one expect from such a challenge? Good work pal! I would have said mobile responsiveness but it looks great even on small screens
1 - PGraeme Byrne• 370
@grmbyrn
Submitted
I didn't find a way to make previous and next projects appear on the page in the My Work section, so I would appreciate any ideas on this, as well as anything else that could use some work. Thanks!
Aadvik• 1,250@Aadv1k
Posted
Hey! I don't have pro but attempted this challenge nonetheless (courtesy of you for the assets) Here is the github link live url
The way I sovled the issue, was to just align all the images with a flex, justify them on the center and just translate the container by the width of a image on the arrow click
0 - Aadvik• 1,250
@Aadv1k
Submitted
I feel like the tooltip could be improved upon, its just that with my implementation (tailwind-in-html-in-js) leaves not a whole lot of flexibility, any input is appreciated
Aadvik• 1,250@Aadv1k
Posted
Holy hell I just saw the 40 html mistakes, but most of them seem to be the doings of tailwind and webpack, so I don't think I can fix em
0 - PKent O'Sullivan• 1,870
@12Kentos
Submitted
SCSS is definitely a little messy, but was able to get the job done.
One thing I wasn't sure about is, the box on the desktop view, doesn't shrink/move when the view gets adjusted, I'm not sure why. Any ideas?
Thanks!
Aadvik• 1,250@Aadv1k
Posted
this is because of the way your app is centered and the approach, this is why you should opt for a mobile first approach, on mobile do something like
.card { width: 80%; max-width: 700px}and done, simple as that, no need to worry about the sizing, and also, when centering elements horizantally within the body usemargin: 0 autoand use position absolute for the vertical centering, sorry if my comment is a bit vague, feel free to ask me anythingMarked as helpful
1 - serfoll• 120
@serfoll
Submitted
All inputs are welcomed!
Aadvik• 1,250@Aadv1k
Posted
hey man great design, just one small suggestion, (this is something even I do and am trying to avoid) that is hover, I would say you should add a
:activeanimation to your button to make it clicky both on mobile and deskop. The problem with a hover is that it is sticky on mobile, which makes it irritating, in my newer projects I avoid using hover in most cases, especially where the effect is visible (box-shadow for instance) instead I try and addactiveanimations that trigger when the button is clicked.Marked as helpful
1 - Moses• 130
@mtenkorang
Submitted
The overlay proved tricky. Got it working(a bit) but the svg looks faint. The alignment of the price and days left don't look so accurate.
Aadvik• 1,250@Aadv1k
Posted
Your design is great just a little suggestion -- add a media query for smaller screens like so --
@media only screen (min-width: 375px) {}and here you can maybe adjust some fonts and the width of the card.0 - Rémy Boiré• 350
@remyboire
Submitted
I had fun adding animations when the data is load via the data.json file. Feel free to give any feedback if there are some stuffs I can improve!
Aadvik• 1,250@Aadv1k
Posted
The design looks spot on! just one small thing, I think the grey bar is meant for the highest value
0 - Jeffrey Tuason• 550
@Tuason066
Submitted
Hi,
I need help with my JavaScript.
As you can see in my script I have three functions (dailyCards, weeklyCards, and monthlyCards) I'd like to ask if I can make it only in one function because they have only small differences.
Thank you so much for helping out.
Aadvik• 1,250@Aadv1k
Posted
Good job on breaking down your JS into functions, that is a good practice, so, here is a simple fix; remove all the other functions and just have a single one
getCard(date)where the date is either daily, monthly or weekly, then simply in your template replace${item.timeframes.daily.current}with${item.timeframes.[date]['current']}(do this will all the references) and voilaMarked as helpful
2 - IRVINE MESA• 1,855
@DrMESAZIM
Submitted
ALL feedback is welcome . I also did YouTube video for this challenge , I also want feedback for this : https://youtu.be/EknT7SD5-f0
Aadvik• 1,250@Aadv1k
Posted
Hey, the only tip I have is that you should use bem naming conventions in your html, that makes it cleaner and easier to read, for you and other devs. Here is a BEM 101
0 - King• 310
@king-oldmate
Submitted
I had to cheese things a bit since I had some difficulties with dynamic styling with Tailwind and React, but it doesn't seem to have impacted the production build.
How does one ensure that they are building an accessible website whilst using React?
Aadvik• 1,250@Aadv1k
Posted
Hey man! I was curious to see your source code, since I myself just started using tailwindcss, but I couldn't find the actual source, instead it was the minified production code; I would suggest you keep your src folder separate and gitignore the destination folder, and simply add a build command to netlify. You can reach me out via twitter or mail and I can help you set it up. You can also take a look at my repo of fem projects
Marked as helpful
0 - Alucard• 870
@Alucard2169
Submitted
I wanted to do this project with as much js as possible and i got to learn a lot from this project about async/await and promises. I realize that the way i did it is not very efficient but i will improve it. please give any feedback/tips/criticisms.
thank you.
Aadvik• 1,250@Aadv1k
Posted
Consider adding a hover effect and a cursor: pointer to increase make the experience better.
Marked as helpful
1 - Karthika Selvam• 30
@kattycreates
Submitted
Suggestions are welcome.
Aadvik• 1,250@Aadv1k
Posted
Good job on the design and making use of semantic html. At this point I would recommend you look into class naming conventions such as BEM. which you can checkout here
Marked as helpful
0 - Pailin• 20
@Papaloyy
Submitted
Hi~~ this is my first try on HTML and CSS. what should I have to improve. Thankyou for your advise.
Aadvik• 1,250@Aadv1k
Posted
you did an exceptional job considering this is one of your first challenges. I would suggest some tips, you make use of "semantic html"
- Semantic html; Semtantic html makes your code easier to read for both you,
and someone looking at your code. semantic html is basically.
<article> <h2> Title </h2> <p> Blah blah </p> </article>
is better and more redable than just putting everything inside a div. For more info You can check this out or you can check some of my projects out to see it in practice.
0 - Semantic html; Semtantic html makes your code easier to read for both you,
and someone looking at your code. semantic html is basically.
- juanitatime• 20
@juanitatime
Submitted
This is my first challenge on Front End Mentor. When I added the icon, it would get resized whenever I add the border-radius so I had to add the border separately. I had trouble creating the icons and making them hover together with the border. I would appreciate your feedback on how to do resolve this.
- How did you add and style your icon?
- How did you add the border around your icon?
- How did you make the icon and border altogether hover altogether?
Aadvik• 1,250@Aadv1k
Posted
Congrats on your first challenge.
- You cannot "style" icons, unless they are SVG in which case you can directly edit their color or other tweaks.
- Adding a border is pretty straight forward
border: 1px solid black - To add a hover effect you can
element { transition: all 1s ease; // this is to make hover smooth } element:hover { border: 1px solid black }0 @rpturbina
Submitted
Hello everyone,
I just finished the solution for the challenge of creating an order summary card. In this solution, I challenged myself to create styling using SASS as well as my learning journey how to use SASS. This is my first solution using SASS.
Please give me your opinion on my solution. Your feedback is very valuable to me. Thank You!
Aadvik• 1,250@Aadv1k
Posted
Great job on the UI! although you should also add a media query to adjust the background images on mobile.
Marked as helpful
0- SHIVAM SINGH• 120
@shivamsingh2499
Submitted
Aadvik• 1,250@Aadv1k
Posted
Hey! Here are some fixes I would suggest you apply on your project.
-
Media query on mobile; You should add a media query for smaller screen sizes, maybe you can change the width or the spacing of the elements in the container element.
-
Centering; To perfectly center your container over the body you can use position absolute, like so -
.container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) } -
Semantic html; Semtantic html makes your code easier to read for both you, and someone looking at your code. semantic html is basically.
<article> <h2> Title </h2> <p> Blah blah </p> </article>
is better and more redable than just putting everything inside a div. For more info You can check this out or you can check some of my projects out to see it in practice.
0 -
- Aadvik• 1,250
@Aadv1k
Submitted
Would love to get any input on the mid-section with the tricky overlay. I tried several "hacks" such as background-image, flex with relative positioning and some other solution, but I ended up just going with the position absolute.
Aadvik• 1,250@Aadv1k
Posted
Alright WOW there are a lot of accessibility issues with this one! don't know why it is marking minified css generated by the sass compiler as a "error", the sass compiler would have told at compile time.
0 @Julia-Fidison
Submitted
Hello, any feedback will be welcome
Aadvik• 1,250@Aadv1k
Posted
Hey! Here are some fixes I would suggest you apply on your project.
-
Media query on mobile; You should add a media query for smaller screen sizes, maybe you can change the width or the spacing of the elements in the container element.
-
Centering; To perfectly center your container over the body you can use positon absolute, like so -
.container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) } -
Background; Css backgrounds are super powerful! You can set
background-repeattono-repeat -
Semantic html; Semtantic html makes your code easier to read for both you, and someone looking at your code. semantic html is basically.
<article> <h2> Title </h2> <p> Blah blah </p> </article>
is better and more redable than just putting everything inside a div. For more info You can check this out or you can check some of my projects out to see it in practice.
Marked as helpful
0-
- Jordan• 20
@jofb
Submitted
I'm not sure how well I've laid out my css, I'm still learning how flexboxes work. It might be a bit of a mess and I'd like advice on that. And of course any extra advice on my html is appreciated! Thanks
Aadvik• 1,250@Aadv1k
Posted
I say this to a lot of developers, but add a media query. challenges like these MIGHT seem to work fine on mobile, in practice they don't. So my tip to you will be to add a media query on smaller screens (say 400px) and change up the padding and/or the width. also you should look into semantic html.
Also look into semantic html; semantic html makes your code easier to read for both you, and someone looking at your code. semantic html is basically.
<article> <h2> Title </h2> <p> Blah blah </p> </article> ```is better and more redable than just putting everything inside a div. For more info You can check this out or you can check some of my projects out to see it in practice.
Marked as helpful
1 - alonshav• 20
@alonshav
Submitted
Hi everyone, a few questions on the my solution:
- Is my solution responsive enough? Is there away to make it more responsive?
- Regarding the active state - I inserted the actually SVG in my HTML in order to create the transition in CSS. Should I have used an external link instead? What would you prefer?
- What about the global parameter in my CSS? Is this a good way to easily modify the design in the future? Am I missing something useful in my Root properties? Is using REM preferable in this case? Or would you use different Units?
Thank you!
Aadvik• 1,250@Aadv1k
Posted
-
While there is no such thing as responsive "enough" I would advice you to add a media query for smaller devices to maybe change up the width or the padding.
-
The way I did the active state was to have the image and a absolutely positioned "overlay" div within a parent element, then you can reduce the opacity of the overlay and set the z-index to be on top.
0 - Danila• 110
@ColdLikeMcFlurry
Submitted
I will be glad to any feedback)
Aadvik• 1,250@Aadv1k
Posted
You pretty much nailed the UI, good job. I would have done something different, on mobile setting a
margin: 0 autocenter the element vertically, then on desktop, setting position absolute and centering it that way. Also it appears that your github leads to a 404, I think you set your repo to be private.Marked as helpful
0 - Vedat Sözen• 230
@vedatsozen
Submitted
I could not make it responsive. I did not use bootstrap. I need to learn how to make a page responsive without bootstrap framework. I will now start to learn it. If you have any help, i am happy to learn how to do it.
Aadvik• 1,250@Aadv1k
Posted
So first up, you need to center your container which you can do like so
.container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) }Then, you need to apply a display of flex on the parent container. Don't set the height of any element let it be based on the padding. then, simply add a media query to set the flex-direction to column on mobile.
Marked as helpful
0
