@devPauloski
Latest solutions
Time Tracking Dashboard using SASS/SCSS and JS.
PSubmitted about 1 month agoI feel like my style files are so ugly and long. Does anyone have any resources to keep CSS short for responsive styles with tricks and hacks?
Newsletter Signup Form using JS and SASS/SCSS
#accessibility#sass/scssPSubmitted about 1 month agoI would like help with making my SCSS files better? Are there any responsive shortcuts that I could have done instead of using media queries?
Article Preview Component using JS and SASS/SCSS
#sass/scssPSubmitted about 2 months agoI feel like my SASS files are a little long? If there is some way to keep it short and concise while still keeping the styles, I would love to know!
Meet landing page using SASS/SCSS, as well as CSS grid.
#accessibility#sass/scssPSubmitted about 2 months ago
Latest comments
- P@imvan2
Looks great! Your code was easy to follow and your responsiveness to different screen sizes was good.
- @RickyPWebDevP@imvan2
Hey! This looks great on mobile and desktop. There are few things you add to it imo:
- having an 'active' or 'focus' for your 'Daily'/'Weekly'/'Monthly' buttons (I'd also check on the hover for it, too)
- missing tablet layout
- profile style is missing the bottom border radius
- i would also double check the height for the profile
- the cards bottom border can be seen. this can be solved with this: https://dev.to/rashidshamloo/css-fixing-background-color-bleed-in-rounded-corners-2kh4
- not sure if you have the figma files, but the cards and the ellipsis are missing a hover style (this may only be shown in figma designs)
- P@ganeshreddychimmulaWhat specific areas of your project would you like help with?
My enthusiasm for personal learning and skill development is being challenged by the incredible pace of AI progress. Playing with tools like the latest Gemini has left me feeling demotivated. Is this a common feeling, perhaps an overreaction, or just too soon to judge? Looking for advice or shared experiences.
P@imvan2Looks great. One thing I would advise is to use
.getElementById()instead of.querySelector(). The former is faster in performance for larger codebases if speed is what matters to you.To answer your AI question, it's a common feeling but I've noticed the code AI spits out isn't necessarily the "best" and I've had to revise it multiple times for it to be decent code, especially for more complex projects. I think the issue is the industry making it seem as if it's the greatest thing in the world and having junior devs whip up a full stack web app in less than 2 hours using AI without compromising on the code itself. If the code AI gives is unreadable (or sometimes even not possible), it's useless.
Marked as helpful - @Mnsa2024P@imvan2
Looks great! One thing I would mention is that I don't think your codebase includes semantic HTML, especially for the Share button.
- @KonamtiWhat are you most proud of, and what would you do differently next time?
I was able to fully code the whole design in less than 90mins and I started working on the responsiveness. I am actually proud of being able to code faster just by looking at the design of the project without the figma file.
What challenges did you encounter, and how did you overcome them?I had some challenge with placing the svg image at the top right corner of my first card in the grid-container but I later researched and found I could do that easily in my CSS using, background-image and background-postion-x: calc(); It was a fun discovery. I knew about the calc() value but I didn't know it could be applied to background image.
What specific areas of your project would you like help with?Still trying to fully understand the responsiveness of my images and flexbox.
P@imvan2This is great! Your layout is responsive to different screens and your code looks good. One thing I would add is that typically CSS files are named "style.css" or "styles.css" as the main CSS file.
Marked as helpful - @Bytehax21What are you most proud of, and what would you do differently next time?
Well nothing really idk why but I struggled with this container width alot that it kept becoming larger than the fixed width I setted.
What challenges did you encounter, and how did you overcome them?The container width kept becoming larger when I was inserting padding in it and the content inside was not being set center. So I just increased the Width.
What specific areas of your project would you like help with?How do I Center the blog card on the body like if I set a specific height corresponding to the body height it will ruin the blog card's element.
P@imvan2Great work on this!
For your question:
- How do I Center the blog card on the body like if I set a specific height corresponding to the body height it will ruin the blog card's element.
You need to remove
height: 100vh;in your body selector and instead addmin-height: 100vh;. This will allow the blog card to center. Then remove themargin: 219px auto;in .container and use CSS flexbox or CSS grid in the body tag to center the container.Also, unless you need to put semantic html in divs for styling purposes (like if you were doing
position: absolute), you really don't need the additional divs. For example, for your hero image, your html can be just<img class="hero" src="logo/Blog-Image.png" alt="" />instead of
<div class="image"><img src="logo/Blog Image.png" alt="></div>This reduces the amount of divs you use (which is great for accessibility). I would also remove the div surrounding your entire container - the div after main tag - and treat main tag as the container.
As for the container height itself, I would suggest putting it as
height: auto, instead of specifying a px. This allows the container to change in height by itself, making the container responsive to different screen sizes (meaning you can also remove the @media you have for smaller screens).Let me know if you want any clarifications on this!
Marked as helpful
