I made a landing page for FCC's beta and i'd like your critique

Hey. I’m doing FCC’s beta and i just finished the landing page. I skipped the testing suite because it felt limiting for this project, so i’ll just adapt or create another version whenever the live version comes along. Besides that, i have quite a few questions after finishing this project, it took me about 5 days and while i found most of what i tried to do, some things i’m stilll not very sure about.

  1. What is the minimum width and aspect ratio that most websites support? After 568px it gets quite easy to support, but the difficulty below that is absurd. At 320x it’s almost the effort of making another site, specially when background images are involved.

  2. In media queries i had to set everything to !important in order for the mobile-version of the website to work. Is this common practice?

  3. Is it a problem if i don’t use “labels” in an input field? Instead use just placeholder text.

  4. I had quite a bit of trouble in image sizing, how do people usually choose images for a responsive website? Is it one huge image or a bunch of images for each resolution? What i did was look for an aspect ratio that is common enough (16:9), then the images would trickle down properly. For thumbnails i had to manually resize them though, however i’m not sure if that’s common practice.

  5. I tried really hard to fade-in the gallery images, but i couldn’t figure it out how to do it properly. Any suggestions on how to do it? All that i tried ended up messing with the buttons for the gallery, instead of just the background-image.

Besides that, i’d also like to know if there’s anything you’d change about the page, from design choices (fonts, colors, etc) to coding choices (code readability, efficiency, etc…)
Here is the codepen: http://codepen.io/Selhar/full/WRqZjr/
You can view the code here : http://codepen.io/Selhar/pen/WRqZjr/
(responsivity breaks when the length is weird like in the editor view, but i couldn’t find any other scenario where it broke, so i didn’t mind)

Thanks a lot, and sorry for asking so many questions.

3 Likes

I know I’m not helping here, but I’m still lured into pointing this!

OMG THOSE IMAGES MY MOUTHS WATERING OMGGG <3 :cake: :icecream:

2 Likes

I think the site looks good, the only thing i notice it the “SEE MORE OF OUR SELECTION!” vertical spacing is off (which is picky) great work.

1 Like

Yeah, i noticed the vertical spacing too but ended up forgetting about it. Thanks, i’ll take a look!

The best method for using media queries to support mobile is to build your page mobile first. Then work your way up in media queries. For my personal site I use the following:

//mobile default

//tablets
@media(min-device-width: 601px) { }

//computers
@media(min-device-width: 993px) { }
2 Likes

Oh, and another question i have is about the gallery section, in the title i made it’s width 10%, but in some resolutions the vertical centering breaks, anyone knows what’s up?
I made the project in my local computer, when i added it to codepen the gallery title centering broke, due to the header codepen adds by default. If i change the padding it goes back in place, however in smaller resolutions it breaks again, so it’s not much of a solution.

Personally i would add a hard code 50px(or what ever you think) to that height, i don’t believe theres a need for the title height to adjust depending on screen size.

I like it. Not a fan of the yellow though at this time I cant think of a better color. Not very helpful but at the very least I can say the site looks pretty tasty… good… I meant good.

@Selhar1

I’m viewing this on 16:9 aspect ratio on desktop.

I like it, great image choices plus the flow of the page is nice. I like your placements of the transparent boxes and it has a smooth transition from the first section towards the second section. I also like the style you placed your GitHub, FreeCodeCamp, and codepen links in: small centered logos with a uniform block-color.

The only criticism I can give you is font choice. It’s not the worst but something about how it looks regular or bold is off to my eyes.

1 Like
.gallery {
  // your css
  transition-duration: 1s;
}

The documentation for transition-duration.

That doesn’t work in this example. It fades the whole gallery, including the controls, instead of only the background-image.

Ok, what are you referring to when you say controls? I think your referring to the sidebar with cupcakes. I am viewing your codepen with desktop screen size. The only thing that changes on my screen is the background image. The sidebar with the various cupcake images is visible and never fades. I tried moving transition-duration property before and after your properties in the gallery class. I get the same results.
Can you double check that you changed .gallery{} and not #gallery{}.

Oh, i’m using firefox, in chromium/brave it seems to be working fine. Thanks a lot.

I think its pretty, very bight and colorful. I like it.:+1:
I tried it on my mobile phone too and I noticed the little side menu overlaps a bit on the footer when you scroll right to the bottom. I think it will be better if it didn’t. Here is a screenshot of what i mean.

1 Like

Cool, glad it worked. Also, like everyone else said in the thread the images are amazing and I want a cupcake :yum:.

1 Like

Looks great! when are all those new challenges going live? I really want to do them!

Not sure, i think they don’t have a date yet for release. Probably this semester though. You can start doing the challenges either way, when the changes go live you just transfer your codepen links to the new version.