I want to know more about the best practice for DOM manipulation, more specifically, the appending of HTML elements created using JS. I am used to create an element with javascript and change the innerHTML of that element. After that, I append it to the body or other element within the body. Howevet, I directly changed the innerHTML of the element DIreclty in this small project because it is on a small scale.
<main> and <footer> elements, you don't need it.<body> to zero<footer> to absolute and the bottom property to zero.footer {
left: 50%;
transform: translateX(-50%);
}
For mobile : Add text-align: center to the <footer>
I hope you find that helpful.
very quick project....i felt like i was doing a baby work 😂😂
Good job my friend.
<section> element like code below:<h1> to <h6>, in your code you jumped from <h1> to <h4>, try to replace <h4> by <h2> and if you need to descrease the font-size you can do that by css, please check code below.<main>
<img src="images/illustration-hero.svg" alt="hero dancing">
<article>
<div class="text">
<h1>Order Summary</h1>
<p>You can now listen to millions of songs, audiobooks, and podcasts on any
device anywhere you like!</p>
</div>
<div class="plans">
<div class="img-plan">
<img src="images/icon-music.svg" alt="">
<div class="price">
<h2>Annual plan</h2>
<p>$59.99/year</p>
</div>
</div>
<a href="#">Change</a>
</div>
<button>Proceed to Payment</button>
<a href="#" class="order">
Cancel Order
</a>
</article>
</main>
Which should I add to make this component better? Should I use framework to make this or just plain html/css?
<main>, <article> if you want to know how, please check this code below :<body>
<main>
<article class="container">
<img src="images/image-qr-code.png" alt=""></div>
<h1>Improve your front-end skills by buillding Projects</h1>
<p>Scan the QR code to Visit Frontend mentor and take your Coding to The next level</p>
</article>
</main>
</body>
I started the project in a very easy way and once the version for mobile devices was finished I had some problems to make the desktop site. Once the problems were solved, for some reason I destroyed the mobile version. But everything was solved and the project was finished.
Good job, Nicolas it almost match the design
<main>, article, figure, and button.<h1> Element to your page.I'm not really sure about my container centering method and I intend to implement this code in the future to make it better.
if you have any tips for me i would be grateful!
Good job it almost match the design.
position css property with transform property.
check this code to know how./* For vertical centering*/
position: absolute;
top: 50%;
transform: translateY(-50%);
/* For horizontal centering*/
position: absolute;
left: 50%;
transform: translateX(-50%);
/* For both*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
But first you need to reset margin of <div class="container"> to zero.
About accessibility:
Try to replace <div class="attribution"> element by <footer> element.
I hope this help you.
Does anyone have good reasoning for when to use flex or grid?
<img src="images/icon-cart.svg" alt="Add to Cart"> try to use dash between words in alt attribute
like this Add-to-Cart.Good job Eligijus, it almost match the design
<div class="container"> element by the <article> element and the <div class="attribution"> by <footer> element, and put all of that in <main> element like this<main>
<article>
<img src="./images/image-qr-code.png" alt="QR Image">
<h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next
level</p>
</article>
<footer>
Challenge by <a href="https://www.frontendmentor.io?ref=challenge"
target="_blank">Frontend Mentor</a>. Coded by
<a href="www.github.com/eligijuslinkevicius">Eligijus Linkevicius</a>.
</footer>
</main>
These elements above is called semantic elements.
I hope this helps you
How can i change image without using javascript when it comes to responsive design? I tried to use background-image and it wan't giving me desired result.
Try to add the two images to the page at the same time, but one of them should be display: none;(to be hidden) and the other should be display: inline(to be visible), if you are in desktop the desktop image is display: inline;
and if you in mobile the mobile image should be display: inline.
to make that check this css code below:
/*Small screens*/
@media (max-width: 767px) {
.mobile-img {
display: inline;
}
.desktop-img {
display: none;
}
}
/*Large screens*/
@media (min-width: 768px) {
.mobile-img {
display: none;
}
.desktop-img {
display: inline;
}
}