Good day. Here’s a basic page I did after going through the three very first courses: “Basic HTML and HTML5”, “Basic CSS” and “Applied Visual Design” and I wonder if it is ok for what I’ve learned from these courses or if I should be able to do a little better. Just want to make sure I’m ready to move on to the next course.
I struggled here and there. Mostly the navbar (played around a lot with margins and padding to get the text properly centered, but it always looked a little more to the right or left, ended up leaving it aligned to the left) and the silver background (pure stupidity actually, didn’t want to mess around with RGBA so tried to apply it as it’s own element until I realized I could just look up the RGB values on google).
Still, I couldn’t get the linear-gradient to work with the borders of the images or the golden “hr” under the title and subtitle… I will appreciate if anyone can tell me why. Thanks!.
There shouldn’t be an issue adding a gradient to an hr element but at that point, it really might as well just be a div with a gradient background. For the image, you can add padding to it, or you can give it a container.
Your page needs a little work on the responsive side and I wouldn’t suggest using positioning on the images and text.
Thank you for showing me this!
No positioning on images and text noted. Will go through the course again and look for videos on tricks about positioning then.
Mmmm not sure what you mean about responsive, haven’t reached that part yet, guess you mean it’s all too “static” like an image or the lack of forms?
By responsiveness, I’m simply referring to how the page handles different screen sizes.
If you shrink the width of the page down you can see the elements inside the #MainBackground div are overflowing it (are not contained within it) and at some point, they also start to overflow the page itself.
It’s mainly the positioning of the elements and the fixed width on the images that is the problem.
You can also implement media queries to alter the layout at different screen sizes. With the use of Flexbox and CSS Grid, you don’t need as many (if any) media queries.
You will learn a bit more about “responsive design” later in the curriculum.
After a little reading and playing around in the w3schools.com editor it seems I can use the Float property and change margins to do what I tried to do here with the images and texts by using position:relative and changing offsets. Is that a better way to do it?
I would not suggest using floats unless you want to float text around an element, which is what float was made for. The MDN docs for float have an example.
For layout, we have much better methods today. If you just want the image and text side by side, flexbox is a good option. Check out the video I posted, I haven’t seen it myself but I know the guy in it and he’s good at CSS and explaining stuff. Give it a look.
Oh, I see. Hmmm more stuff I haven’t seen yet, it seems I’m just getting ahead of myself. so I’ll just shut up and keep doing the courses Thank you very much for your time!
