I am glad to say that it was easier that I thought, I feel that I am starting to learn to deal with HTML and CSS and I am really improving in it.
Of course, I would love to learn best practices or better ways to achieve the same results. If you have any suggestion or ideas for me, I would love to hear it from you! :)
Hello, awesome job here.
Your "buttons" were created with the incorrect element. When the user clicks on the button they should be directed to a different part of your site. The anchor tag will achieve this.
<a href="/">Learn More</a>
Note It's a violation of the HTML5 specification to include either an anchor tag inside a button tag, or a button tag inside an anchor tag. Interactive elements are not permitted to be children of one another, as it introduces ambiguity with regard to user intent.
Some browsers (like Chrome) will support this practice and, I believe, give the outer tag precedence when a user clicks on the nested elements, but not all browsers support it to any degree, and because it's not in the spec no browser is ever going to be required to. You'd be severely restricting the efficiency and effectiveness of your web application's cross-browser compatibility if you do this.
Therefore, it's preferable to style your link into a button.
To solve the alternate text issue, car icons are for decoration purposes only, so they can be hidden from screen-readers by adding aria-hidden="true" and leaving its alt attribute empty:
<img src="./images/icon-sedans.svg" alt aria-hidden="true">
<img src="./images/icon-suvs.svg" alt aria-hidden="true" >
<img src="./images/icon-luxury.svg" alt aria-hidden="true" >
Lastly, you should use the cursor: pointer property to indicate that the element like a button or a link is clickable.
can you please provide feedback and some tips for me?
Hello, great job there. To centralise your page, use flexbox or grid layout to center elements. You can read more about centering in CSS here: Using flexbox:
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
Using grid:
body {
min-height: 100vh;
display: grid;
place-content: center;
}
I am Unsure about how this webpage will look in another device like mobile phone also I am facing difficulty in making design more responsive.
Hello, great job here.
Check out the links: CSS grid and CSS flexbox to get a better understanding.
Using flexbox:
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
Using grid:
body {
min-height: 100vh;
display: grid;
place-content: center;
}
Example: max-width changes the background color to blue if the viewport is 375 pixels wide or smaller
@media (max-width: 375px){
body{
background-color: blue;
}
}
min-width changes the background color to lightgreen if the viewport is 376 pixels wide or wider
@media (min-width: 376px){
body{
background-color: lightgreen;
}
}
So for mobile styles, include a media query with max-width 375px(mobile width) so you can then define your mobile styles below. See more information using this link @media rule in our CSS reference
I found difficult to position the container in the middle.
Great job. An alternative way to centralize the page is by using CSS Grid: which acts similarly to flexbox.
body {
min-height: 100vh;
display: grid;
place-content: center;
}
You can find out more about centering in CSS here
Continued to develop my proficiency with positioning elements using flexbox, as well as responsive layouts using media queries.
Any feedback or suggestions welcome :)
Hello, awesome job here.
Your "buttons" were created with the incorrect element. When the user clicks on the button they should be directed to a different part of your site. The anchor tag will achieve this.
<a href="/">Learn More</a>
Note It's a violation of the HTML5 specification to include either an anchor tag inside a button tag, or a button tag inside an anchor tag. Interactive elements are not permitted to be children of one another, as it introduces ambiguity with regard to user intent.
Some browsers (like Chrome) will support this practice and, I believe, give the outer tag precedence when a user clicks on the nested elements, but not all browsers support it to any degree, and because it's not in the spec no browser is ever going to be required to. You'd be severely restricting the efficiency and effectiveness of your web application's cross-browser compatibility if you do this.
Therefore, it's preferable to style your link into a button.
Nice job. Media queries help you to define different style rules for different device widths like phones and laptops.
max-width changes the background color to blue if the viewport is 375 pixels wide or smaller
@media (max-width: 375px){
body{
background-color: blue;
}
}
min-width changes the background color to lightgreen if the viewport is 376 pixels wide or wider
@media (min-width: 376px){
body{
background-color: lightgreen;
}
}
See more information using this link @media rule in our CSS reference
Example
@media (min-width: 769px) and (max-width: 1000px)
Sections can be separated using either grid or flexbox in different situations.
CSS GRID is a more powerful system compared to Flexbox, using a two-dimensional layout system allowing users to lay out content in rows and columns. I tend to use them both - Grid for building mainframe and general layout blocks and Flexbox for everything inside those blocks.
can you tell me how i can make mobile version of it?
Nice job. To create a mobile version, you need to use Media queries. Media queries help you to define different style rules for different device widths like phones and laptops. So set the width for the mobile version and apply your css styles below.
Example: max-width changes the background color to blue if the viewport is 375 pixels wide or smaller
@media (max-width: 375px){
body{
background-color: blue;
}
}
min-width changes the background color to lightgreen if the viewport is 376 pixels wide or wider
@media (min-width: 376px){
body{
background-color: lightgreen;
}
}
See more information using this link @media rule in our CSS reference
I am happy to come up with this even though its looking a mess from how I want it to behave. I am having issues with making the page responsive and how to also make child divs responsive to parents structure
I want your ideas on how to make my page responsive. I dont mind pulling all down and beginning from scratch with your inputs
Hello, your page looks great. Regarding responsiveness, I have some tips.
Firstly, giving the page a height after the media query (for the mobile display) forces all the elements to be displayed in that little space and so some are displayed on others. To solve this, remove the height so the elements take up their needed space.
.main-content{
display: flex;
flex-direction: column-reverse;
/*height: 70vh; remove this*/
}
.left{
/*height: 50vh; remove this*/
font-size: 0.9375rem;
width: 100% ;
padding: 1.875rem;
margin: 0;
}
Next, two images were given. One for the mobile and the other for the desktop. Include the two images in the HTML file (give them two different classes to differentiate them and ease styling). In the styles.css file, display the mobile image as none in the desktop styles and after the media query (for mobile styles), display the desktop image as none and the mobile as block.
In HTML
<div id="right">
<img src="images/image-header-desktop.jpg" class='desktop' alt="image-header-desktop">
<img src="images/image-header-mobile.jpg" class='mobile' alt="image-header-mobile">
</div>
In CSS
/*Desktop design*/
.desktop{
/*add the other styles here*/
}
.mobile{
display: none; /*displays only with mobile width*/
}
/*mobile design*/
@media (max-width: 48rem) {
.mobile{
display: block;
/*add the other styles here*/
}
.desktop{
display: none; /*displays only with desktop width*/
}
}
I've had a lot of problems regarding the "grids", the behavior of the image and the effect that we needed to implement on the buttons :hover. If you want to help me, feel free to contact me :)
I noticed that you used a div with a class of button in which case the best option would be an a, because when a person clicks on a button written 'Get Started', he is not confirming a form, it will be redirected to another page, to Get Started.
to solve this issue in HTML do this:
/* <div id="getStarted1" class="button">Get Started</div> Remove this */
<a href="/">Get Started</a> /*use this*/
For the styles and hover effect in CSS, use this:
a{
display: block;
text-decoration: none;
text-align: center;
color: hsl(0, 0%, 95%);
background-color: hsl(31, 77%, 52%);
padding: 15px 35px;
margin-top: 80px;
border-radius: 25px;
border: 0;
}
a:hover{
opacity: 0.5;
}
Is it better to style a link into a button or add an anchor tag inside of a button element?
Good job here. It's a violation of the HTML5 specification to include either an anchor tag inside a button tag, or a button tag inside an anchor tag. Interactive elements are not permitted to be children of one another, as it introduces ambiguity with regard to user intent.
Some browsers (like Chrome) will support this practice and, I believe, give the outer tag precedence when a user clicks on the nested elements, but not all browsers support it to any degree, and because it's not in the spec no browser is ever going to be required to. You'd be severely restricting the efficiency and effectiveness of your web application's cross-browser compatibility if you do this.
Therefore, it's preferable to style your link into a button.
By far the best job I have ever done. I'm really happy to see where my studies are taking me. Feel free to judge! Thank you!
Hello, I love your work and I have a question for you.
How did you change the Fylo color to white so it can be displayed at the footer?
What type of element is <picture> tag please? Do I need to include it inside a <div> ? I'am confused
Hello, great job here. The <picture> tag gives web developers more flexibility in specifying image resources.
The most common use of the <picture> element will be for art direction in responsive designs. Instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to fill the browser viewport.
The <picture> element contains two tags: one or more <source> tags and one <img> tag.
The browser will look for the first <source> element where the media query matches the current viewport width, and then it will display the proper image (specified in the srcset attribute). The <img> element is required as the last child of the <picture> element, as a fallback option if none of the source tags matches.
The <picture> element works "similar" to <video> and <audio>. You set up different sources, and the first source that fits the preferences is the one being used.
For example
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
Looking at the example, at a minimum viewport width of 650px, the first image is displayed. At a minimum viewport width of 465px, the second image is displayed. Else the third image(fallback) is displayed.
Secondly, the picture tag can stand independently, the same as the image tag and so does not necessarily need to be placed in a div.
Read more about picture tags using the following links W3 - Schools and HTML Picture.