Looking to hire developers?
@develoba
Submitted
It is quite a simple project; however, I found myself struggling with the change of active states between desktop size and mobile. I think it could be improved with a better structure on my html tag's classes.
Feel free to give me any advice on my code, I would really appreciate!
Happy coding!
Submitted
I practiced more on my JS skills and learned how to remove the active classes when another button is clicked.
I don't have any question about this challenge; however, I know I need improvement on my CSS structure and resposiveness, as well as improving my scripts. Feel free to leave any advice!
Submitted
First JavaScript challenge. I manipulated the DOM to make the rating interactive. I did'nt have any complications on that; however, if you see any improvement on my script, feel free to comment!
Submitted
I enjoyed making this challenge and practiced flexbox and grid. I did not have any complications in this page; hoiwever, feel free to check my code and make any comment about it!
Happy coding!
Submitted
Very fun challenge! I used absolute positioning and ::after and ::before pseudoelements to make the progress bar. Can it be done in a better way and more responsive?
For the rest of the challenge, I simply used flexbox to align elements.
Feel free to comment about my code or any improvement that can be made!
Submitted
I really enjoyed making this landing page. I tried to use most semantic HTML and tried to keep it clean. However, mi CSS could be improved since I repeated styles in many sections, so I think I should join those.
I wanted to make something different and tried to practice my CSS animation skills by making a "marquee" animation with the section of the companies images.
Feel free to leave me your opinion about this and my code!
Submitted
I didn't have any problem. Although, in the design it look like there are some borders on the summary components but only on the corners. I didn't know how to make them.
Submitted
I did not added JavaScript functionalities to interact with the menu button. I will add it when I learn more about JS.
About the rest, I mostly used CSS grid for the different sections of the page, adjusting it when the view change it size.
Submitted
I did not have any trouble to code this challenge. I used mobile-first workflow and applied both flexbox and grid for different elements
If you have any improval recommendations please comment!
Submitted
For this project, I practiced my knowledge of BEM methodology, I tried to follow a clean CSS structure with section comments and used semantic HTML tags.
For the challenge, I firstly designed it for mobile flow, using flexbox for that; and then adjusted the design for desktop using CSS grid. I also tried for the first time using clamp() to adjust the width and make it more responsive.
Feel free to make any suggestions about this or any part of the code. Thanks and happy coding!
Submitted
I used CSS Flexbox for mobile design and CSS Grid for desktop design and I did not have any complications.
I think I applied well background images since I learned it on a previous challenge.
I am not sure about the overall size, since I did not used Figma design.
If you have any suggestions to improve my code, please feel free to comment!
Submitted
The main difficulty I found in this challenge is to apply the two background images. After thinking, reading some other developer's code and some documentation, I came out with the solution of adding two div containers for each image and add them with an absolute position.
I would like to know if there is another possible solution for this.
The code I used to add these images is the following:
<body>
<div class="bg-img top-img"></div>
<div class="bg-img bottom-img"></div>
.
.
.
</body>
.bg-img {
width: 250px;
height: 450px;
position: absolute;
z-index: -1;
}
.top-img {
background: url('./images/bg-pattern-top.svg');
background-position: 100% 100%;
top: 0;
}
.bottom-img {
background-image: url('./images/bg-pattern-bottom.svg');
bottom: 0;
right: 0;
}
Please feel free to post any suggestions to improve any part of my code!
Submitted
I did not have any main issues to code this challenge. I practiced the use of pseudo classes in this challenge. For this, I used pseudo element ::before to add the icon of each card, and I used pseudo elements to select each card and apply separated styles.
However, I tried to keep clean CSS rules and repeat styles as little as possible. Please leave any comment to improve my code!
Submitted
The most difficult part for me was to make the image responsive for different screen size. After looking how to do it and after reading some code of other developers I made it; however, I am not sure which is the best way to do that.
Feel free to make any suggestions about this or other parts of my code!
Submitted
I practiced the use of CSS grid for the three elements of the card. When the view is for mobile, I didn't applied grid, since the three elements are in a single column. However, when the size is for tablet and desktop, the grid applies and the first element takes the full row.
I didn't find any complications on coding this card. However, if you think the code could be improved, feel free to leave a comment!
Submitted
I didn't have a lot of difficulties for this project. However, I wanted to focus on writing clean code and HTML structure, while having good accessibility.
For this to be achieved, I used semantic HTML tags like main, footer and article and tried not to use much div boxes. However, for the part of the plan price, I had to use several div to wrap the elements and apply flexbox to the image and text, and then to both the image+text and anchor tag. Do you have any thoughts about how to do this part with best practices?
I also tried to follow a BEM methodology to name the classes.
For the CSS part, I focus on using rem units so that the design could be responsive. Is it better practice to use rem or em units?
Also, I am not sure about how is the best practice to make the card component bigger and responsive, just by adjusting its width using % or rem, or is it better to use another property?
I will keep on doing some challenges and keep on learning. If you have any suggestions, I would really appreciate it.
Submitted
I think I did right the challenge, but I was'nt sure about how to implement the hover effect on the main image, with the blue background when hovering and the eye icon appears.
After some thinking and stak overflow research, I figured out this:
The code of this part is the following:
<figure class="card__figure">
<img src="images/image-equilibrium.jpg" alt="nft image" class="card__img">
<figcaption class="offscreen">NFT image</figcaption>
<img src="./images/icon-view.svg" class="card__view">
</figure>
img{
display: block;
width: 100%;
}
.card__figure {
position: relative;
background-color: var(--hover-color);
border-radius: 10px;
overflow: hidden;
}
.card__view {
height: 80px;
width: auto;
position: absolute;
top: -100px;
left: calc(50% - 40px);
z-index: 1;
}
.card__img:hover {
opacity: .5;
cursor: pointer;
transition: .2s;
}
.card__img:hover ~ .card__view {
top: calc(50% - 40px);
}
Do you think it's acceptable? What other ways can be valid?
Submitted
Submitted
