Spencer Runde• 640
@spencerrunde
Submitted
Decided to do this without Javascript to complete the optional challenge in the description. Also added the animation of the box bobbing up and down just for fun.
Conrad
@ConradMcGrifter
All comments
- Conrad• 950
@ConradMcGrifter
Posted
nice job completing the optional challenge 👍
I only see one issue:
- if all the accordion tabs are opened, the content overflows the card (this is because you have a fixed height set on your card)
Marked as helpful
1 - Brooke Wargnier• 155
@brookewargnier
Submitted
This was a quick 4 hour evening build. It really helped me start to feel like I'm getting a good handle on CSS and HTML, and it felt especially nice after my last project which had multiple section on a page!
Please let me know if you find any issues of standards or any additional resources that you think will help me grow in any capacity :)
Thanks!!
- Brooke
Conrad• 950@ConradMcGrifter
Posted
good job, it looks really nice 👍. I am also doing some smaller projects after completing some of the longer/bigger ones and I think its a good way to try new things!
-
my main suggestion is that you should avoid setting fixed
heightandwidth, especially fixed heights because this can cause problems with responsiveness and content overflowing its container. -
if you really need to set a width or a height, use
min-height:,max-height:, ormin-width:,max-width: -
try and use margin and padding on your elements inside the cards to create the space you need instead of setting a fixed height
Marked as helpful
1 - Ahmed Sameh• 60
@Ahmed0107
Submitted
Can you rate this work, please?
Conrad• 950@ConradMcGrifter
Posted
its pretty decent. I would rate it 7.5/10
- I think you need to fix the layout on mobile
- on desktop at larger resolutions your design is stretching so try putting a max width on your
divcontainer - I think you need to validate the password better because currently you can enter just 1 character and it will accept it. maybe put a length requirement
Marked as helpful
1 - Mohamed Draz• 80
@mohameddraz
Submitted
what is my grade?
Conrad• 950@ConradMcGrifter
Posted
- you are using way too many grid columns / rows. 135 is a pretty ridiculous number.
- your grid is not responsive and the text is overflowing the containers. Try to use a responsive unit like
frto set the grid colums / rows.
Marked as helpful
0 - Abdullah Nadeem• 20
@abdnadeem382
Submitted
Any feedback on grid systems or underlining links will be highly appreciated.
Conrad• 950@ConradMcGrifter
Posted
here is a codepen I made to show you how I did the underline hover effect for my project
Marked as helpful
0 - Shiro• 80
@shironeko2707
Submitted
Hi. This is my lastest project on FrontEnd Mentor. Any feedback is appreciated
Conrad• 950@ConradMcGrifter
Posted
your image isnt showing up because you need to add the
src="./images/image-header-desktop.jpg"on the image element.-
example:
<img class="img-src img-mono" src="./images/image-header-desktop.jpg" alt=""> -
currently you are trying to use the property
content: url("./images/image-header-desktop.jpg")to link the image but that is not correct
0 -
- Danilo Alves 🎧• 485
@mizek1
Submitted
Hey! It's the first time I use BEM methodology. What did I miss? Any tips and feedback would be absolutely appreciated.
Conrad• 950@ConradMcGrifter
Posted
looks good to me, nice job 👍
1 - Stephane Jean• 360
@distephano30
Submitted
Greetings,
Let me know what you think
Conrad• 950@ConradMcGrifter
Posted
well done, the site looks good to me. The only thing I would suggest is that you put a
max-widthon your main container so that it doesn't stretch out at bigger screen sizesMarked as helpful
0 - César Mejias• 190
@CesarGMEFA
Submitted
I hope advice, criticism and whatever.
I had serious problems with the height of the cards and well I think everything is fine.
Conrad• 950@ConradMcGrifter
Posted
good job , Cesar
- I would put a
max-widthon your main container so that it does not stretch at larger screen sizes
Marked as helpful
1 - I would put a
- Diego• 150
@Diego-Garza2007
Submitted
Creo que el codigo que escribi es un poco desordenado aun estoy aprendiendo si ven en algo que pueda mejorar comenten
Conrad• 950@ConradMcGrifter
Posted
you should avoid putting a fixed height on your containers because this could cause problems with content overflowing
debe evitar poniendo un altura fija en su cajas, porque no es responsivo. debe usar
min-heightin vez deheighten la mayoría de los casos.Marked as helpful
1 - Branden Evans• 20
@BrandenEvansWD
Submitted
I would appreciate any feedback! I'm very new to scss still. One of the issues I was having was using "@use" to import my partials into my main scss style sheet. I eventually was able to more it work using @import and I can't seem to figure it out. Also issues with vs code plugins crashing whenever I would open the style.scss file.
Conrad• 950@ConradMcGrifter
Posted
check out this video by Kevin Powell on how to use @forward and @use link to video
Marked as helpful
0 - Jimmy Hoang• 570
@JimmyHoang296
Submitted
I can not figure out how add image to get same effect, so I use img as background
Conrad• 950@ConradMcGrifter
Posted
you can take a look at my solution. it's not perfect but I was able to achieve the image positioning with
position:absoluteMarked as helpful
0 - Jan• 135
@trostjan
Submitted
Really happy with the result, any feedback is highly appreciated :) Also i already know there is a bug I don't know how to fix and that is opening the menu in the mobile preview and then the menu doesn't dissapear when scaling the viewport to the desktop size. Any suggestions on how to tackle this problem would be very nice.
Conrad• 950@ConradMcGrifter
Posted
looks really nice, good job!
as far as the mobile nav remaining opened when scaling up to desktop size, I think you could just write a media query to hide it
Marked as helpful
0 - Frizy• 30
@iAndrewZ
Submitted
Hello guys! I have some questions:
- Do you think my CSS code looks messy?
- What change should I make for my CSS and HTML code to look better? Thank you!
Conrad• 950@ConradMcGrifter
Posted
I would avoid nesting your paragraph elements inside of your heading elements, as it is incorrect to do so.
<h2> 803K <p>Likes</p> </h2>Marked as helpful
1 - Shahin NJ• 1,190
@SJ-Nosrat
Submitted
Any feedback with respect to the use of CSS Grids and SCSS would be appreciated.
I'm still struggling with how to go about organizing my SCSS files; any recommendations for front-end architecture would be appreciated!
Conrad• 950@ConradMcGrifter
Posted
Check out the 7-1 architecture for organizing scss files link
1 - Robert Iancu• -20
@R0b3rtG
Submitted
I tried this challenge and I think it turned out pretty good.
It might not be the best but I'm happy with the result.
What do you think? Please leave some feedback!
Conrad• 950@ConradMcGrifter
Posted
It might be because you need to add
bottom:0;andright:0;but thats just a guess since im on mobile and cant edit the code in the browser0 - cryptososso• 150
@cryptososso
Submitted
Thank you for you feed back. I don't why when i published on github the background image doesn't show up.
Conrad• 950@ConradMcGrifter
Posted
the current path you have is incorrect it should be:
background-image: url("images/pattern-background-desktop.svg");0 - PKellen Ruyle• 930
@rule-kells
Submitted
I am not sure if my naming conventions are the best. Any suggestions on naming classes in the HTML? Also, any suggestions on organizing one's stylesheet? Not sure if it is properly organized. And anything else you may have found that I could've done better on! The feedback is much welcomed. Thanks!
Conrad• 950@ConradMcGrifter
Posted
Check out BEM naming methodology css tricks article
Marked as helpful
0 - K MacLeod• 40
@ksmacleod99
Submitted
Any good reading on styling ONLY active/selected buttons, and returning previously selected buttons to a non-selected style? I gave up :(
Conrad• 950@ConradMcGrifter
Posted
You can make a css class with the active styles and then toggle it on and off with javaScript
0 - Bikrant Malla• 990
@vikrantmalla
Submitted
Drop some Idea
Conrad• 950@ConradMcGrifter
Posted
I would put a max-width on your grid container so that it doesn't to fill the whole screen on higher resolutions
Marked as helpful
0 - Matthew Pierce• 495
@shake88junt
Submitted
I had some trouble figuring out the grey background at first, but it was an easy fix after I finally got to solving it. At first glance I thought this website would be very hard to make, but it wasn't too bad. It just made me realize how I should focus more on organizing my code. Next time I will create more reusable classes. Any tips on organization?
Conrad• 950@ConradMcGrifter
Posted
it looks very nice but you didn't add any of state management. for example if I make a pledge, the number of backers should go up and the amount of money pledged should be added to the total. other than that, you did a very good job!
1
