@Aboubakr06
Latest solutions
Time Tracking Dashboard
Submitted 8 months agoI'm very keen to see other solutions. I suspect my code is overly-verbose from being new to many of these problems.
For positioning the colored strips overlapping the content, my properties became very pixel-perfect rather than intrinsic.
My JS also selects every timefield using its' own individual ID. So I have 15 lines of just .getElementById. I wonder if there's a more elegant way to map ID to variables.
Newsletter Sign-up Form
Submitted 9 months agoI'm not sure if I was supposed to HTML route to a success page. I simply put the form card in one div, the success card in another, and used buttons to toggle between displaying and hiding each other.
The portrait breakpoint is probably not as efficient as it could be. I did a lot of micro-managing container sizes. There is probably more room to size containers intrinsically to the content.
My naming conventions are a little all-over-the-place. JS functions have a mix of uppercamel and camel. And across CSS and JS, a mix of underscores, hyphens, and camel. I'm sure I'll get into a good system as I get more familiar working across both languages.
Article Preview Component
Submitted 9 months agoI'm still very unsure how best to handle SVGs in a modular way. I wanted to keep the icons in external files, and tried a few src and object properties to embed them, but could not get CSS to modify the embed. I eventually gave up: copy-and-pasted SVG paths straight into the HTML, and select svg from there.
Looking at Stack Overflow, it seems like many are struggling with the same issue. There seems to be a lack of established best practice for modular SVG work without long-winded JS work-arounds. So, not really sure.
Four Card Feature
Submitted 10 months agoIn general I feel a bit torn between chasing pixel perfection and using progressive enhancement principles. It was jarring to study Every Layout, and immediately move on to these design recreation exercises. I guess each approach has their place across different projects, and the nuance will get clearer with more experience.
Product Review
Submitted about 1 year agoIt felt like I spent a lot of lines fine-tuning margins. I possibly could get the layout in a more elegant way.
Latest comments
- @tris6
Great use of looping to populate the fields! I need to study your JS logic, how to achieve that number of lines.
Using fixed widths rather than vw would likely look better at more container widths.
- @mahbt@tris6
Impeccable code! JS is efficient. CSS has fantastic use of min-/max- properties and sizing with relative units.
- P@loiccape@tris6
Really efficient code, especially with the use of pseudo-selectors.
End result itself looks great! Only fault I can see is the alignment of the icons in the share bar.
Marked as helpful - @SherzodToshpulatov@tris6
Nice! I'm studying your CSS because the methods are quite different to mine.
Looks like the background color and card gap is a little off.
- @lucasgabriel2806@tris6
Nice efficient code! I'm studying your use of selectors and properties to do this in only 120 lines.
I've read in a few places it's good to only have one <H1> in a page. Might be something to watch out for.
There's also room to match the box sizing and title formatting more closely. But as a learning experience I can understand there's not much to be gained from this detail.
- @z-mnWhat specific areas of your project would you like help with?
Any form of feedback as to where I can improve would be appreciated.
@tris6Great code organization and nice use of reusable skin classes! And thanks for introducing me to place-content property. (Where this been all my life? I've been using two lines like a sucker!)
Just a little flag that your H1 is a little smaller, thinner and spacier than the design. But, I do prefer your look to the mockup, so not neccessarily a bad thing.
Marked as helpful
