HTML CSS for Responsive design help
Would anyone be willing to look at my HTML and XD file? I would like someone to critique it before I start writing my CSS. I want to know if my approach is sound or if I'm complicating it more than needed. I can provide the code and XD file or give you the link to my GitHub.
23 Replies
Why are you wrapping the main and footer in a container?
html on its own is pretty much useless. Your html and css go together. Depending on what your needs are, your dom might need different layout. On its own the html looks fine but don't think of the two languages like "first you write html, then you write styles". It's a back and forth process and you can't write html to cover all style needs you'll ever have
Though one thing i'd note is i wouldn't use
target="_blank" on the link in the header. It's a navigation header so you expect to jump around the same page rather than openin a new page in a new tab. That's usually only used for cases where you're navigating people to external links or something, where they can't comeIf you're going to share code, please use something like https://codepen.io so people don't have to download random files from a stranger on the internet.
In addition, with codepen, others can fork your code and make changes to share. That way when they say, "hey try changing this…" they can show you exactly what they mean.
Thanks for the input I will from now on use code pen. I can assume Git Hub is a safe option as well?
Yeah, GH is safe. But it’s non-interactive so it’s better for large projects. Codepen is more for prototypes/proof-of-concept
Usually you store your entire codebase on GH then make a minimal example in Codepen when you need help
Codepen is the go-to tool for this. Samples are isolated and we don't have to start a server to see the code
I understand that it's a lot more work on your end to take the code and make it work in codepen though. But your chances of getting help are far higher because you're massively lowering the bar to entry for others to help
It also removes a lot of the unnecessary code so it’s just what’s needed for the example to work
I also use codepens at work whenever i encounter some weird behaviour and want to isolate it in a reproducible example
Many times the act of reproducing on Codepen helps you figure it out yourself, too
Truthfully I don't have reason for the wrap around the main and footer . I have done this since 2009, so I'm trying to relearn the basics and learn responsive design. What do you suggest. https://codepen.io/JParker71/pen/MYKQvZK
In codepen you don’t have a
head or anything. The code in the HTML section is what goes into the body element. You also need to add the relevant CSS otherwise it’s just your HTML textIf there's no need for it you can remove it. I'd just reiterate my comment above. Html and css only make sense together
So it would be better for me to have both before asking for help?
If your code is incomplete we can’t help
There's just not really much for us to say. You're trying to make a responsive site. That all happens in style
Of course depending on what you want it to look like you're going to need different html. It's back and forth
Nowadays i actually kinda consider the html to be in service of the css
I will work on that, thank you for help so far. I'm new these platforms.
I need to remove the head for codepen?
Yeah that history is actually very helpful to know and i understand why you might have seen css as a thing you tack onto html
Anything you need for your <head> is placed there via Settings > HTML > “Stuff for <head>”
Codepen html drawer is built to accommodate everything bw the
<body> </body> tagsI updated my codepen https://codepen.io/JParker71/pen/MYKQvZK with CSS. I tried to mobile first, but I have not moved to other sizes until fix some items. I assigned colors temporarily on the header (green) and main (light grey) for me to see better. I think the logo and CTA are to far from the container edges. The Propriety banner on top and bottom, I don't think the word "Propriety" is actually vertically centered. I'm trying to have the bottom Propriety banner right on top of the footer, but I can't get the footer to the bottom of the page. Other, suggestions and tips are welcomed. TIA.
To make the footer go to the bottom you can make the body a flex container and apply
flex-grow: 1 to main.
Propriety is not centered because you set a height for the banner and margin-bottom for p.Thank you
Would any attribute assigned to <p> affect any <p>'s like ".card p"?
Yes. Unless you override it in the
.card pThanks