@ErayBarslan
Posted
Hey there, design is close to the provided, it's responsive and animations looks cool. Great work with this one! Some suggestions:
- On screens wider than 1440px width, all the content aligns at the left side and the page is no longer responsive. This is due to max-width on the container. You can place the content to the center with the help of
flex
orgrid
:
body{
...
display: flex;
justify-content: center;
}
Although background will still be limited to 1440px
. So it'll require whole another approach. I suggest using separate containers for each section of your page. Right now entire page has one container that acts like body and when you set a max-width
, it won't support all screens. As an example you can use:
<footer>
<div class="footer">
...
</div>
</footer>
With this setup, you can give max-width
to <div .footer>
to limit the content, but background still scales with the container footer.
- For semantic markup , we should contain the page with landmark elements. For your case you can change
.container
<div> element to<main class="container">
without breaking the design. However convenient approach would be:
<header> ... </header>
<main> ... </main>
<footer> ... </footer>
- A site needs a
<h1>
per page. You can use it as<h1 class="title">All your files in one secure location, accessible anywhere.</h1>
In general try to limit usage of<div>
where there is a semantic option like headings, <p>, etc. Try to limit div usage for design purposes. - You can wrap
<ul>
inside header with<navigation><ul> ... </ul></navigation>
so the page is more accessible. In general accessibility will result in much better SEO since it helps assistive techs navigate through our page for visually impaired users. It may seem confusing at first on how to use elements for semantic markup but once you get the idea, it becomes natural. Other than these great solution again and happy coding :)
Marked as helpful
@Reyhandilek07
Posted
Hi, firstly thank your for your feedback. I will search these and will improve my code.