I am currently working on my Tribute Page, but I seem to have run into a bit of a wall. When I paste the entirety of the HTML code into my Notepad file to check out how it looks in the browser it doesn’t show up properly. Maybe the solution is simple, but I would like another set of eyes (or multiple sets) to check through and point out anything I can’t yet see (being a greenhorn and all).
You can view the code in a repository (Build-a-Tribute-Page) on my GitHub account @BrandynJ.
On a side note, I would strongly suggest using an editor like VS Code and installing the Live Server extension. Notepad isn’t going to cut it in the long run.
Regarding [First Grid: Left], I only see the [h1] text and the three links in that container are present and work properly; however, the background color is not present. I have the color set to ultramarine, but is there a way that I can use the #031424 code instead?
Regarding [First Grid: Right], I only see a small banner of color that should be the entire container background color although I notice that I have it set to 70px instead of 700px.
Regarding [Second Grid: Left], the background color for that container is below it and not the size it was originally intended to be at that.
If I could use the #xxxxxx codes for the colors I want instead of the color names I would like to. How can I fix the code in that respect?
There is no .w3-ultramarine class in the CSS. I have never really used the W3.CSS Framework so I can’t help you much. I’m guessing this page has all the BG colors.
Just remove the inline style style="height:70px;" you have on the div.
There is no .w3-crimson-sky class which is what you have on the container div. You also have another color class .w3-indigo on the last child element inside the container (it is not on the container but a child of the container). That color class does exist so if that is the color you want on the container you just have to move that class to the container div.
You can use your own CSS with whatever colors etc. you like. Just make a CSS file and link to it in the HTML.
I have re-worked the entire file because I didn’t like the design direction of the previous one, but seem to still have issues with containers orienting the way I want them to.
How can I make .left, .middle and .right orient horizontally instead of vertically? In other words, I would like for each of the color squares to be side by side [–] [–] [–] sandwiched between the .header and .footer.
Also, please let me know if there is a more semantic method for making a button perform functionally as I have rigged the one I have so far. And I am using CSS Grid.
The .left, .middle, .right sections are not grid items because they are inside the main element and the body is the grid container. Only direct children of the grid container are grid items, so only the header, main and footer elements are grid items.
You will rarely need the outermost grid to be very complex because you inevitably end up with other page sections which act as containers for different layouts, like what you have for the three-column layout. Your body grid really only needs to place the header main and footer. Then you can make each child element of the body its own grid container. An element can be both a child of a grid and itself be a grid for any child elements inside it.
The buttons should be <a> elements with a href, not button elements inside forms. Just remove the forms and turn the buttons into links instead.
I’ve added class=grid-container to the body, header, main, and footer elements. I then added the header, left, middle, right, and footer classes to the section elements of the respective parent/grid-container. Subsequently, all of the containers are aligned horizontally [–] [–] [–] [–] [–]. How would you suggest that I fix this? Have I incorrectly added classes?
EDIT: I also took your suggestion and made the choice to download VS Code. I’ve yet to install the Live Server extension, but so far the color differentiation when writing code is sooo much better. Thank you for making that suggestion!
You can’t just reuse the same grid-template-areas on all the grids like that. You also still need to place each grid child of the body grid using grid-area (like you did before).
As I don’t know the full layout you are going for, or what changes to the layout you are planning to make at different screen sizes, it is a bit hard for me to give you any hard rules for your body grid. Right now what you have is really just a one-column page layout (the page not the sections). Whatever layout you are planning for the sections themselves (like the three-column section) does not have anything to do with the main body grid.
I would suggest learning a bit more about CSS Grid
I know it’s a lot of information to digest but you really do not need to understand everything to use grid. The first page on a Google search for CSS Grid are all links to good resources.
I suppose CSS Grid is still something I do not grasp. What I am doing for is this.
EDIT: The standard layout, say on a computer, would be:
Header
Column Column Column
Footer
The responsive layout, say on mobile, would be:
Header
Column
Column
Column
Footer
That is ultimately what I am going for, but the link is where I got the CSS code from. It only contains the CSS, so I have been merely trying to figure out how to apply it to the HTML. Apparently, as you can clearly see, is it isn’t going well.
In the example linked to, the three columns are all grid items. In your code, the three columns are inside their own container (main).
It is just example code, I would never do it like that. The three-column layout would have its own container and I would use that container to make the three-column layout.
Again, you can not use the body grid to place child element inside of header, main and footer. You can only place those three elements as they are the only direct children of the body grid.
Place header, main and footer on the body grid where you want them.
Use the main container to make the three-column layout. You can make it a grid and place the child section elements on that grid. You can also make the three-column layout using flexbox.
I made a few changes to how I applied the Grid classes, and now the layout is looking more like the example I linked to. Now I see an issue with the size of the columns in the Main grid-container. What parameters would I need to focus on to have the columns fill up the entire mid-section of the layout?
Also I appreciate that you’ve been taking the time to help me with this. I’m having a little bit of trouble grasping exactly what you mean, but I believe I am understanding some of it well enough.