Looking to hire developers?
@ChristBM
@Sneflenie
Submitted
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... :/
@ChristBM
Posted
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?
Marked as helpful
@Sneflenie
Submitted
I would appreciate any tips or feedback :)
@ChristBM
Posted
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
Marked as helpful
@Sneflenie
Submitted
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! :)
@ChristBM
Posted
I really liked the animations you used, I can tell you put a lot of effort into it. Good job :)
@ekremilkan
Submitted
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 :)
@ChristBM
Posted
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%);
Marked as helpful
@PhoenixDev22
Submitted
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.
@ChristBM
Posted
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.
Marked as helpful
@Antonmarchitec
Submitted
¡Ayúdame mejorar y cuéntame si te gusta la solución final que le di a este desafÃo!
@ChristBM
Posted
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
}
Marked as helpful
@strosi
Submitted
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.
@ChristBM
Posted
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.
Marked as helpful
