Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
moaaz bhnas
1,673 Pointsmy first HTML/CSS web page
I've finished css basics course and this is my first work(a simple page about a tourist city in my country) https://w.trhou.se/t2gf065jph Any feedback is appreciated!
2 Answers
Katia De Juan Bayona
6,757 PointsOh, thanks so much, I had no idea how to do it, haha. Btw, don't worry about the English, it's not my first language either so I do a lot of mistakes too.
As for the website, I just had a look at it. I'm quite new in the front end as well, so I can only give you tips about the design to improve it's readability and look & feel. :) Here are a few insights:
- Header: Try to center the text vertically, so that it's not stack at the top of the page. Turn the text fully white, and decrease a little bit the opacity of the white gradient that you applied to the image, something like a 48% opacity or a bit less would make the header look sharper and appealing, and make the image and text stand out more.
- Main image: Change its border radius to around 10px max, remove the inner gradient/shadow and leave the image as it is. Change the box-shadow to a soft grey instead of its current blue, like a " 0 0 50px -10px #333" . And change the font-weight of the "Find out more" link to normal, and change its colour from its blue to a more softer one like #dcdcff.
- Pictures from the bottom: Change the font to a Sans Serif one to improve readability, and change the colour of the image titles to a darker colour (you can use the lighter blue as a hover). Remove the blue background from the images and change the border-radius of the photos to a maximum of 6 or 8 pixels.
Well, that's all I found. They are just tips, so you can mess around and try different versions to find a style that fits with what you are looking for. Hope it helps. :)
Katia De Juan Bayona
6,757 PointsI`m quite new using this workspaces thing, where can I view the result of the code on the browser?
The code looks pretty clean though. :)
moaaz bhnas
1,673 Pointsif you have time I think this is how you can preview it 1- "fork snapshot" on the top right 2- "fork workspace" 3- preview thanks for reply and excuse my English ?
moaaz bhnas
1,673 Pointsmoaaz bhnas
1,673 PointsI will try to improve them now one by one and I plan to start in the typography course to improve the fonts and legibility Thank you so much for your time and help ?. You are too kind.