Hello. I just finished my first project and wanted some feedback. As I was very excited and confident going in, now I am filled with questions and confusion. I was making notes and trying to memorize on everything I have learned in each course, but as soon as I opened up Codepen to work on this project my mind went blank, it took me over ten minutes setting up <main>,<h1>…etc. I wanted to do so many things like visual design, using flexbox, grid, and user accessibility, which I have done none of. As I move on to my next project(Survey form), I wanted to ask some questions as well as some feedback.
The guideline said that plain CSS is recommended but everything I did was on HTML and almost felt no need for CSS, is it because I didn’t use the proper tags I needed?
When I add <style> at the beginning of my CSS, it shifts my <h1> so I took it off, reason why?
User story#8 & 9 asks to resize “img” to be responsively and relatively to the width and centered of its parent element, without exceeding its original size. I did text-align: center; but that doesn’t seem like the right tag to use, what is the right way?
Along with each course on HTML and CSS, I’m using w3school to understand each tag and reference but I just don’t know when and where I need to use them. Any feedback is a chance for improvement so please let me know. Thank you so much and I apologize for the lengthy questions.
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36
Whenever you include html tags in your posts, the app will try to interpret them. If you put a backtick (`) immeadiately before and after, it will stop it.
I used a `<p>` here...
The backticks will show up in the editor but not on the screen. It’s also a nice way to highlight code.
I’ve edited your post to put those it to make it more readable.
You just didn’t add a lot of styling to the page so it looks pretty plain. HTML by itself is all you need to deliver content to someone, but CSS allows you to make that content look nicer so it is easier and more interesting to read. It can also help with accessibility as well. For example, right now the content will take up the entire width of the page, which makes for very long line lengths when the browser is wide. This can be hard to read for some people so generally you would put max width on the content so it doesn’t get too wide.
But you do actually have some errors with your HTML. I suggest you use codepen’s HTML analyzer to help you find them.
The guideline said that plain CSS is recommended but everything I did was on HTML and almost felt no need for CSS, is it because I didn’t use the proper tags I needed?
I see some CSS in there. But if you are getting the look you want, then you don’t need CSS. But most people will think bare HTML is kind of boring and something that we’ve seen 10,000 times. Most people will want to add at least a little CSS.
When I add <style> at the beginning of my CSS, it shifts my <h1> so I took it off, reason why?
How do you add a style to CSS. Can you show what you mean?
User story#8 & 9 asks to resize “img” to be responsively and relatively to the width and centered of its parent element, without exceeding its original size. I did text-align: center; but that doesn’t seem like the right tag to use, what is the right way?
Another common trick is:
margin: 0 auto;
That tells it to use 0 on the vertical margins and to automatically calculate the horizontal margins, in other words, center.
Also could you tell me what you are using to put quotes from my post like that code above? when I do it for regular statements the way I do it for codes, it just has the dark gray background like it does above.
would this be what you are talking about? to cover my entire <main> elements ? If I understood it correctly, max&min-width property is so regardless of the viewport’s width, you have the absolute or relative value to your page, but how would I know which value to set? I just picked 500px for this one instead of setting a percentage value to it.
If you don’t mind how would I use that analyzer on Codepen? I couldn’t find them on my current screen.
You use the HTML tag <style> in your HTML to tell it that you want to put some CSS code there. In codepen, you just put it in the CSS pane, without the need for a <style> tag. In the real world, you can put CSS in its own file and pull it in.
If you put that in the codepen CSS pane, that might have caused problems.
A “real world” app will have things split among several files. I would have several html files, and server css files.
But things like codepen are a good learning tool. It’s not a perfect example of “real world” dev work, but it allows you to simply that part of it so you can just worry about getting comfortable with code.
Will do. I feel I was getting over my head working on this first project like I knew everything I learned up to this point. I don’t and I can’t even comprehend some of them. I realized I need to go back to the basic HTML and CSS courses and re-read everything and make improvements on my tribute page before I rush to move onto the next survey form project, which will be meaningless without having that firm understanding of HTML and CSS. I’m glad I made this post because it helped me realize that. I will reply back once I have a cleaner and more accessible tribute page. Thank you!
The max width I was referring to was for the content (the text on the page), such as the text in the list items or figcaption. There are a number of ways you could put a max width on these. You could target each one individually:
li, figcaption {
max-width: 45rem;
}
Or perhaps you could put the max width on the tribute-info section so that everything in that section would be constrained by the same max width. You could even put it on the <main> so that everything on the page is restricted to the same max width. These are the types of decisions that front end developers get paid for
The media query example you gave is more about styling changes based on the width of the viewport. Your example says that while the viewport <= 500px wide don’t put any margins on main. This particular example doesn’t really have anything to do with constraining the width of the content itself. It could, if you added a max-width property to main, but I don’t think you need to in this case.
If you google for “common query breakpoints” you will get a bunch of links back with recommendations about all the different sizes of view ports you need to take into account based on the pixel size. And if worrying about all these different pixel sizes is your thing then go for it But I never use px for media queries, I always use rem. Using rem allows you to take into account not only the width of the view port but the font size as well, which is an extra accessibility enhancement. And it allows you to forget that all of those different view port widths even exist because you are basing the break points on the needs of the content, not the device. I’ll be the first to admit that not everyone agrees with my approach or thinks it is necessary for accessibility. But I can tell you that not having to stress out over the perfect break points (in px) is a very nice feeling.
Yeah, it is hard stuff and it’s hard to get the basics down in the beginning. Cut yourself some slack.
I would also warn to be careful of trying to learn everything perfectly. It’s good to think about learning things well, but you also need to keep some forward momentum. You need to find a balance.
