Member Avatar for Despairy

Hi just had an assignment to make a nice looking html5/css website
this is what i got so far

got any suggestions on stuff i can add to make it better?
and also if anything is wrong with the html logic / css commands etc.
tired of getting bad grades :< ;)
thanks!

edit : uploaded it http://www.filefactory.com/file/4lzo8r649byn/n/EX2_zip

Edited by Despairy
  • 2 Contributors
  • 4 Replies
  • 109 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by dany12

Dani AI

Generated

Quick, practical steps to tighten layout, polish visuals, and fix common HTML/CSS problems mentioned in the thread.

Start with structure and accessibility. Use semantic HTML5 (header, nav, main, footer, section) and label every form control; do not rely on placeholders instead of labels. Add a page lang attribute and a skip link for keyboard users. Use box-sizing: border-box globally so padding and widths are predictable.

Fix typography and spacing first — that alone improves perceived quality. Pick one readable body font and one display font, set a base size (16px) and a consistent line-height (1.4–1.6). Use a simple scale for headings (e.g., 1.25x steps) and a consistent spacing system (8/16/24 grid). Keep max content width (700–1000px) for readability and center with padding rather than relying on huge line lengths.

Choose a small palette and check contrast. Limit to two neutrals and one accent. If using dark backgrounds, ensure text contrast meets accessibility (use a contrast checker). Avoid lowering a parent element’s opacity because that also fades child content; instead use a semi-opaque overlay or rgba() on the background layer.

Interactions and validation: prefer CSS transitions for hover/focus microinteractions and always include keyboard focus styles. For forms, use HTML5 attributes (appropriate type, required, pattern) for quick client-side feedback, but validate again on the server. Provide clear inline error messages and move focus to the first invalid field.

Performance and testing: compress images, keep CSS modular, and test on small screens (add <meta name="viewport" content="width=device-width,initial-scale=1">). Validate markup and rules with the W3C validator (Markup Validator) and check color contrast with WebAIM (Contrast Checker). As asked, confirm your instructor’s preferred style so your choices align with the grading rubric; , follow the small steps above and iterate — visual polish often comes from spacing, type, and clear feedback, not from extra effects.

Recommended Answers

All 4 Replies

Member Avatar for dany12

First problem no verification at your form create a copyright down the page ok use for the background:black don't complicated with rgb and use the opacity feature of css 3 some hover states on the menu maybe some jquery If you want more contact me pm and I can show you one of my works

Member Avatar for dany12

What did you leran at your class css html php javascript?

Member Avatar for Despairy

thanks for reply ... we learned html and css
im just not that much of a creative guy
dont know which colors and sizes should be where and when :)
and if something in the code is wrong could help there too :)
ty

Member Avatar for dany12

Your teacher what styles does he like modern design simple design classy?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.