Hey freeCodeCamp community,
I am designing a website mockup, and will attach an image of what it looks like currently. I am fairly new to web design, but have a basic grasp on what can be done. I’m attempting to use CSS Grid to design my homepage. From here I really have 2 questions:
- First, my home page seems fairly long, at least compared to websites shown in tutorials I’ve found on CSS Grid. It seems like ‘grid-template-areas’ may be one way of building my home page. Will this become overly complicated and a less effective way of building something that looks like what I’m currently showing in my attached image(s)? The way I’m picturing it is that my ‘grid-template-areas’ will end up looking like this:
‘header header header nav nav’
'article article article article article’
'article article article aside aside’
‘article article article article article’
‘aside aside aside aside aside’
‘article article article article article’
‘aside aside article article article’
'article article article article article’
‘article article article article article’
‘article section section section article’
‘footer footer footer footer footer’;
I’m uncertain if I’m using the right semantic language for everything, but I will also overlay each ‘grid-template-area’ item on my website mockup so you can see exactly what I have imagined in my mind. I hope I have provided enough information for someone with more experience to help me here.
- Secondly, some of my imagery, such as the header, footer, and a few other images, touch the edge of the webpage. In the past when using CSS Grid, I couldn’t get the grid to go all the way to the edge of the screen, but it had a small margin that seemed inherent. How can I avoid this from happening when I begin the html/css process?