Advice/opinions on first 'proper' project!

Hi I haven’t posted in here before but this was part of my flexbox project but I decided to just keep building on it what I have learnt so far. I was paying for codecadamy but have paused it at the moment so i’m carrying on with just free resources for right now. I feel like the design aspect of it all is not my strong point so I should decide what sort of path I should take from here on. I have only really just got used to the basics so I know there is a lot more to learn.

This is just a fictional business I have made up and any advice on the design etc would be great!

website ----- https://hollyj24.github.io/Flexbox-project-company-homepage/

code https://github.com/HollyJ24/Flexbox-project-company-homepage/blob/master/index.html

Thank you all

2 Likes

Hi!

Nice start!

3 things to consider from my point of view:

  • color divisions between sections
  • typography
  • layout and resposive-ness (particularly for mobile)

Typography

Sections packed with text like this are hard to read. Personally, I like to adjust the line-height attributes for these types of paragraphs (https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)

You might also want to contrast your title from your banner with a different font or different letter-spacing (https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing)


Color

I love the concept of green combining with the botanical theme. So white and green dominate the page. Maybe there can be something used to mark or fill some divisions just to make it a little easier on the eyes (it’s a little sharp and blinding at the moment).


Layout

The way you have it set up, your entire site is contained in the first page. So for me, either there is a navbar and there’s 3 distinct pages, or there’s no navbar and one continuous page. That’s just my taste, I don’t know what standard “best-practice” is in this case.

You should also think about media-queries so that your page is mobile-friendly :slight_smile:

But again, great work for having this much done already!

Thank you! I am currently working on the media types so it will be accessible on mobile etc, I went back and forward a lot with the color schemes and couldn’t decide what looked best so I will definitely work on that.

I am hoping to turn it into a site with more than 1 page once I get a little more comfortable :smiley:

Thank you for your comments I really appreciate them … I will now go have a play around!

1 Like

Can I ask what you mean by using something to mark or fill the divisions? I do know what you mean by its a bit blinding! Thank you

Well take even this forum as an example. Notice how there’s a grey-ish background that surrounds the all-white posts. This softens the area so it’s less intense.

If it were all white, it’d be more overwhelming.

Ah I see what you mean! Thank you

It looks really good! Personaly I would like to see the smaller pictures more centered under the bigger pictures, or maybe even as big as the first line of pictures. This wil give you a much cleaner overal look. Maybe even give them a little shadow?

As far as your design goes I would consider giving the bottom sections which now have a white background the same green border your pictures have. It will flow better because the transition is regular (if that makes any sense, sorry English is not my main language)

BUT! that being said I really love the layout and color scheme for this project. I think it looks absolutely coherent, this is definitely a website I would love to explore! Pictures are used perfect, very modern!

Congrats :wink:

1 Like

Thank you so much for the lovely feedback … I am struggling a bit with the flexbox aspect so I struggled to get the pictures where I wanted them but I will keep having a play around with the site! I may split it up into individual pages so it feels more like a full website!

Thanks again :smiley:

I have changed it quite a lot today, I just need to tweak a few things and work on now making it resposive on different screen sizes! Thank you for your input it helped!

I have updated it now, still need to work on the media types!

Wow it looks so good! Way better layout. With the navbalk functioning proper, very good.

One last advice, keep in mind that peoples screensizes are different, myself I have 2 different screens (budgets ugh) and one my right screen your site looks perfect, on my main screen, the header saying "the secret Greenhouse - Unique hybrid plants shipped nationwide.’’ is on the left side of my screen. whereas on the other pages (about, contact, newsletter) the allignment is centered on the photos.

Now I did see that you wrote left:130px for this one, so if this was intentional, please forget the past few lines on my behave. If not, I suggest you lose the tag and put the text within the

tag only, adding the styles to the div class topleft. This may result in the heading consisting of two lines, to solve that add>> white-space: nowrap; to the class topleft in your css code.

props for the way your site shows on phone btw, de pictures allign there perfectly! Really love your work!

Thank you! I still need to work on making it work on different screen sizes, is there some standard screen sizes to work from? I am a bit lost by all the different sizes!

I also wrote the left tag on that header as for some reason I just couldn’t get it centered where I wanted it. I will try your tips and see if I can resolve it!

The mobile view is a happy accident as I didn’t realise it actually looked quite good on mobile :laughing:

Changed it a little now so hopefully it’s a bit more responsive on a couple of screens sizes!

Seems perfect! very constant now :grinning:

1 Like