This was very difficult for me. I know it is pretty messy and cluttered, but I tried my best and i am at least proud that it works! As always any and all tips/feedback appreciated and welcome! :) Thank you!
Also if anyone can give me an example as to where to use a semantic tag in the html... I tried article and section, but they came up as issues in the code, so i removed them. Still really confused by semantic tags unfortunately... :/
I will give you a couple of code examples to help you understand what is semantic HTML and what is not.
<body>
<header>
<h1></h1>
<nav>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
</header>
<main>
<section>
<h2></h2>
<h3></h3>
<article></article>
<article></article>
<article></article>
</section>
<section>
<form action="">
<label for="">
<input type="text" name="" id="">
</label>
<label for="">
<input type="text" name="" id="">
</label>
<label for="">
<input type="text" name="" id="">
</label>
</form>
</section>
</main>
<aside>
<section>
<h2></h2>
<p></p>
<button></button>
</section>
</aside>
<footer>
<section>
<p><span></span></p>
</section>
</footer>
On the other hand, I can do the same thing just using the <div> tag. What do you think is better for the code reader? Read only ''divs'' or that the tags have some meaning?
I would appreciate any tips or feedback :)
Good job @Sneflenie I checked your code and it's ok. If you want to improve it, read more about semantic HTML tags and CSS BEM class notation. Semantic HTML tags BEM
I tried my best with this one.. It was more than a challenge for me to say the least, but I have definitely learned a lot through trial and error. Any feedback and tips are more than welcome! :)
I really liked the animations you used, I can tell you put a lot of effort into it. Good job :)
Hello everybody. Here is my solution for the challenge but i got some issues when i want to add filter to the photo. Stock design looks a bit darker than my solution. I still have a lot of things to learn about responsive web design. I'm open for suggestions. Thank y'all :)
Hi, great job EKREM, This topic can be interesting to you: CSS backdrop-filter
/* <filter-function> values */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);
Hello There, I have completed this great challenge, I have learned a lot, I would love to hear suggestions regarding clean code, and other things especially if I have overused the flexbox. Thanks in advance.
Hi PHOENIXDEV22’S, good job. I review your code and all is ok. You know how is selectors specificity, well I advise you to learn about that :) in advance I tell you that avoid using Tags, IDs and important! And only use classes. When you do that, the navigator spend less time to processing CSS file, for that reason the performance up. Other reason to use only classes is that the classes are easier to read by people.
¡Ayúdame mejorar y cuéntame si te gusta la solución final que le di a este desafío!
Hola Antonio muy buen trabajo. Me estuve fijando que al hacer el redimensionamiento de la pantalla entre 423px y 800px de ancho las card se achata. Esto lo puedes mejorar si pones el mediaquery a partir del ancho de 930px (para este reto en particular)
@media screen and (min-width: 930px) {
// aquí pon los estilos que quiere que tenga tu card cuando se esté viendo desde una pantalla de escritorio
}
Hi there :) Finished this one with Sass. I tried to add more smooth transition between mobile and desktop view. Hope it looks good. Any feedback on the layout and the code will be welcome.
Great job Rosi :). I would advise you use the BEM methodology in the classes and if you are working with Sass you can take advantage of nested classes using &, that allow you, for example: -if you have a div tag inside a main tag and the main tag have a class="father" then and following the BEM methodology your div tag class should be: class="father__son". To achieve this, you can nest your classes in the style.scss file: .father { sass code... &__son { sass code... } } Note: Is good practice having no more than 2 level nested classes. The @import in sass is deprecated, instead use @use and @forward.
