Could you review my 'psd to css' exercise and point out my mistakes?

Template jpeg: https://i.hizliresim.com/5ht28ox.jpg
Template psd: Golden-One Page Web Template.psd

1 Like

I’ll get you started with one of the most obvious issues. When I narrow my browser I get a pretty good sized horizontal scroll bar, so the page is not responsive. My suggestion, use a narrow-first approach to styling the page. Narrow your browser in as far as it will go and style the page so it looks good at that narrow width (no horizontal scrollbar). This will be your base CSS, don’t use any CSS break points.

Once you getting it looking good at that narrow width then you can gradually widen your browser and decide when you have enough horizontal room to start rearranging elements for a wider view port. That’s when you can add break points (use min-width and rem units).

A few suggestions:

  • Don’t use px to set widths on elements. It makes them less responsive. Use rem if you really need a width.
  • Instead of width, consider using max-width. This makes elements even more responsive because they can shrink as much as needed as the view port narrows.
  • Definitely do not set height on elements that contain text, especially using px. The user can manually change the font size on your page and setting a height will prevent the element from growing tall enough to handle that change. Everyone expects vertical scroll bars so there is no danger in allowing the height of an element to grow as tall as it needs to be to contain all of its text.

You only included an image of the wide view port layout. Any decent designer will include a spec for a narrow layout as well. Did they give you an image of what the narrow layout should look like?

3 Likes

First off, I just want to say that from a pure duplicate the layout perspective I think you did well. There are a few alignment issues (e.g. logo/nav and submit button) but overall I think what you achieved is very close to the mock-up. So that’s great.

But I totally agree with everything said by bbsmooth. Not accounting for responsiveness when practicing with mock-ups can also lead to some very bad habits. That is one of the issues with only having the “desktop” version of a mock-up. You now have to design part of the page yourself and figure out what should happen at lower screen widths.

Just as an aside. I would also suggest you ditch floats for all but their main purpose, which is to float text around elements (e.g. floating text around an image). You clearly know flexbox so I don’t see a need for using floats.

2 Likes

Although that isn’t always a bad thing because then you get to be the creative one and decide how things should look :slight_smile:

Thank you very much for the detailed answer. There is no mobile or tablet design in the psd file so it is not responsive.

That’s what I figured, so I understand why you didn’t check responsiveness at narrow widths. But as @lasjorg pointed out, you should get in the habit of always making everything you create responsive. In the real world there are very few scenarios when you would not be required to make something responsive. So feel free to be creative and design the narrow view yourself, it is good practice. But even if you don’t want to do a narrow view, I think my suggestions above still apply for wide view only. Ditch the px and use rem as much as possible. Use max-width instead of width and don’t set heights.

1 Like

True, it’s not really a bad thing. Keeping the responsive side of things in mind is just a habit you have to get into.

It does increase the overall complexity of the practice project for a beginner to have to come up with design solutions. Some layouts are pretty easy to create static versions of but much harder to make responsive. You might have to drastically change the layout when at lower screen widths because it just doesn’t work at that size.

But that also teaches you about progressive enhancement and being inclusive. You learn to prioritize usability over fancy design and to not think that a site has to look the same everywhere. People use sites, they do not just sit around looking at them.

Places like frontendmentor provide both mock-ups so that is a good place to look for pratice projects when first starting out.

2 Likes

What do you think about using %?

I often use flexbox, is that okay?

It has its uses. It would depend on how you want to use it. I probably should have rephrased my suggestion a little. I didn’t mean to imply that you should always use rem and never anything else. Of course there are times when other units are appropriate, even px. The main thing you want to be concerned about is allowing the elements on the page to be as flexible as possible so they can readjust as needed to changes in view port width (and if you ask me, changes in font size as well, although not everyone thinks this is necessary since most browsers use page zoom by default). Using responsive units like rem over px will definitely make this easier. But percentages might work just as well in certain situations.

One nice thing about using rem for widths and break points is that you don’t have to worry about all the specific px break points you are supposed to take into account for the various mobile devices. Using rem allows you to base your break points on the needs of the content instead of the device. I personally use rem for almost everything except possibly some tiny measurements, like a border, which I might use px instead. But my rem break points are based on what the content needs to display properly. It’s very responsive to both changes in view port width and font size and I know that it will look good on any device they can throw at me.

1 Like

Yes, flexbox is great, so is CSS grid.

There is nothing you can do with floats layout wise, except floating text around elements, that you can’t also do using flexbox/grid.

1 Like