@swiTTcHH
Submitted
if i could get some guides to using semantic html and github, that'll be much appreciated
@Klonnister
@swiTTcHH
Submitted
if i could get some guides to using semantic html and github, that'll be much appreciated
@Klonnister
Posted
Hello there! I hope you're doing fine. I really like your solution, well done!
Regarding to your requests, here are some links I can share with you that helped me out a lot to understand Semantic HTML and github:
Regarding to github, I was going to recommend the W3Schools page as well. That one is cool. I'll leave this Git tutorial just in case you have any doubts about using git, this guy explains it very well. Programming with Mosh Git tutorial
That's all from me, I hope this is helpful and happy coding!!
@MeghaS4831
Submitted
Hi, Could anyone help me understand how we can create this website for a mobile version? Do we used media queries? In the readme file it mentions that the designs were created to the following widths:
@Klonnister
Posted
Hello! I hope you're doing fine. Your solution looks good, though regarding to your question, here are some recommendations that I think might help :).
Regarding to responsiveness, for this exercise you don't need to use any media queries as the component is small and it doesn't change for the desktop version. But here's a tip to make your website adapt to any screen sizes:
First I'd recommend setting all elements' box sizing to border box:
* {
box-sizing: border-box
}
A brief explanation of what this does is that any element with border box set will respect its size regardless of the padding or margin you add and a scroll bar won't appear. You can read more about it in W3Schools CSS Box Sizing
Then, I'd advise to delete the div with class "outer", and style your body tag instead to make it occupy the whole screen and center your component:
body {
max-width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: hsl(212, 45%, 89%);
}
Then <body> will always ocuppy 100% of width and 100% of the viewport height. Then, display flex will do the job of centering your component regardless of the screen size.
Here are a some links that can help you understand this better:
Now regarding to accessibility, I think you did great by adding an <h1> as it describes the title of the page and every page needs one. The only thing that I'd say you can improve is to add a main tag. The main tag basically tells the browser or screen readers what is the main content of the page.
You can change the tag <div> with class "whitediv to <main> and keep all attributes and classes on it.
<main class="whitediv" style="background-color: hsl(0, 0%, 100%);">
This is called semantic HTML. Here are some links to read more about accessibility and Semantic HTML
I know it is a lot, just take your time reading and practicing with them, you'll see it'll be easy peasy. Anyways, I hope I was helpful, happy coding!
Marked as helpful
@Zy8712
Submitted
I wasn't able to get the hover over the main image to work. Hope someone can teach me how I could integrate this feature into my code. Thanks.
@Klonnister
Posted
Hey there! And very well done, I like your solution aside from the hover over the image problem, it looks really cool.
I'll do my best to help you out with the hover effect on the image (this is what I did):
First I created a container for:
We have three elements in total.
<div class="image-div">
<img src="./images/image-equilibrium.jpg">
<div class="curtain"></div>
<img src="./images/icon-view.svg" alt="" class="curtain-icon">
</div>
.image-div {
width: 100%;
border-radius: 0.60rem;
overflow: hidden;
position: relative;
}
(Position relative is settled because we need to add position absolute to the curtain icon).
.image-div img {
max-width: 100%;
height: auto;
display: block;
}
.curtain {
background-color: var(--Cyan);
width: 100%;
height: 100%;
position: absolute;
opacity: 0%;
transition: opacity 0.25s;
}
I added opacity: 0% so that when you hover over the image container (image-div), a transition will be done:
.img-div:hover .curtain {
opacity: 50%;
}
This will basically create the hover effect, the cyan div will be shown everytime you hover over the container. Read more about CSS Transitions
.curtain-icon {
position: absolute;
inset: 0;
margin: auto;
opacity: 0%;
transition: opacity 0.25s;
}
Just in case: inset: 0 is used to set the top, right, left and bottom properties to 0 (position: absolute), and margin: auto will automatically center the icon in the container.
Finally, we can set a transition for the curtain icon to show it everytime we hover:
.img-container:hover > a > .view-img {
opacity: 100%;
}
You can learn more about these efects here: W3S CSS Styling Images. Scroll down to the Image Hover Overlay section.
Hope I was helpful and happy coding!
Marked as helpful