for another time I will go deeper into the field of Javascript Logic
What challenges did you encounter, and how did you overcome them?The challenges I faced in this project were from the logic of data retrieval using javascript, and what I did was ask in the sharing and chat groups
What specific areas of your project would you like help with?Logic in javascript
The code looks well organized and understandable. It is neatly structured, with a logical separation of functions and elements, which makes it easy to read and maintain. The clear approach to managing time frames via JavaScript also adds convenience to the user.
Overall, the code looks neat and understandable, but there are a few areas that could be improved, especially for the mobile version. Lack of Padding: In the mobile version, the text card lacks padding, which causes the text to be too close to the edges, reducing readability. Responsiveness: The card does not adapt well to smaller screens. This could be due to fixed sizes or a lack of media queries to adjust dimensions and padding for the mobile version. Using relative units (like em or %) instead of fixed values (px) could improve flexibility. Media Queries and @media Rules: To enhance the code's responsiveness on mobile devices, it would be beneficial to add more @media rules, which can adjust sizes, padding, and possibly show/hide certain elements for different screen sizes.
Completing the JavaScript in a fairly concise manner. Some solutions I have seen had made two share buttons and containers for desktop/mobile however I felt this could be achieved with one which I had managed.
What challenges did you encounter, and how did you overcome them?Positioning the share container to align exactly with my container was difficult. However my accessing the developer tools and selecting the element I was able to mess around with the position of it inside of chrome (since the position was set to absolute). This allowed me to use trial and error to line it up perfectly.
Overall, the code is well-written and follows the basic principles of web development. There is a slight difference in design in the desktop version with the dropdown window, specifically regarding the arrow. Here is my implementation example:
<div class="share-button"> <div id="socialIcons" class="social-icons"> <p>Share</p> <a href="#" target="_blank"><img src="images/icon-facebook.svg" alt="Facebook"</a> <a href="#" target="_blank"><img src="images/icon-twitter.svg" alt="Twitter"></a> <a href="#" target="_blank"><img src="images/icon-pinterest.svg" alt="Pinterest"></a> </div>
<button id="shareArrow">
<img class="icon-share" src="images/icon-share.svg" alt="">
</button>
.social-icons {
display: none;
position: absolute;
top: -12rem;
right: -4.5rem;
transform: translateY(-50%);
background-color: hsl(217, 19%, 35%);
padding: 1.5rem;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 1rem;
}
.social-icons::before { content: ""; position: absolute; top: 98%; left: 57%; transform: translateX(-50%); border-width: 1rem 1rem 0 1rem; /* Triangle dimensions */ border-style: solid; border-color: hsl(217, 19%, 35%) transparent transparent transparent; }
interesting solution, looks good adaptability on a 900px wide monitor. Well thought out design and structure.
I encountered some difficulties arranging the cards in the desktop version.
This is a very interesting solution, and I appreciate the approach you've taken. I would love to see more examples like this to gain more experience. Thank you!
Could you please explain why you used a <span> tag in this case?
This is a very interesting solution for card placement. The chosen grid and responsiveness add structure to the design and make it user-friendly across different devices. However, it's worth paying attention to the fixed margins for images. In the CSS, the fixed margins for images (margin: 25px 0 0 200px; and margin: 30px 0 0 232px;) can cause issues with responsiveness. It would be better to use flexible values like percentages or rem for smoother scaling across various devices. Unoptimized CSS: There are many repeated styles for the article element. For instance, width, height, border-radius, and padding-left could be placed in a common class for all articles, which would reduce the code volume and make it easier to maintain. Lack of color variables: Color values (hsl(...)) are repeated multiple times in the code. Using CSS variables for colors would make it easier to change the color scheme in the future.
I couldn't make fonts works correctcly, i see it a litle pixelated. and seems not to match desing. i download fonts and import locally
Your code already has a good structure and functionality. With a few adjustments to the media queries and improvements to the attribution section, as well as considering accessibility, it will become even higher quality. Keep up the good work!
"This code is too simple and requires improvements to ensure correct functionality across different screens. One of the main drawbacks is the lack of media queries for adapting styles to various devices. In its current state, the page will not display properly on mobile devices, as the element sizes are statically defined without considering the screen width.
Additionally, it's worth noting the design inconsistencies. For instance, the use of inline styles for headings and text reduces flexibility and creates challenges for future style modifications. The font is chosen arbitrarily, and in the mobile version, it does not scale according to the screen size, making the text hard to read on smaller displays.
To enhance this code, I would add media queries to properly adapt elements for different screen sizes. Improving typography and the overall structure of the styles would also make them more universal and supportive of scaling."
The code looks good and well-structured. It uses modern approaches in layout, such as CSS variables for colors and typography, as well as adaptive styles with media queries for users with accessibility needs. The use of CSS Grid and Flexbox makes the code flexible and cross-browser compatible.
do desenvolvimento
What challenges did you encounter, and how did you overcome them?projeto fácil
What specific areas of your project would you like help with?gostaria de receber qualuer feedback
I think this code is well written and clean. Its structure makes it easier to understand and maintain. The use of CSS variables for controlling colors and typography enhances flexibility and consistency throughout the code. Additionally, the implementation of responsive design ensures that the layout displays correctly on different devices. I also appreciate the inclusion of fonts via @font-face, which adds a nice personal touch. Overall, this is an excellent example of quality code that adheres to modern web development standards.
The code is structured and readable. The use of CSS variables makes it more flexible and manageable. However, it is worth paying attention to the consistency in the use of indents and whitespace to improve the overall appearance of the code. The solution is consistent with the given project, although it is worth paying attention to details such as indents, sizes and styles to match the layout 100%. Some design improvements such as shadows or borders can make the card more attractive.
