What are you most proud of, and what would you do differently next time?
Glad I did the HTML/CSS relatively fast
I thought about using ASCII codes for a password algorithm and managed to make it work
I refactored the functions to pure, and split the code to be somewhat modular
Would probably choose a different method or look into a library, if this was something other than a demo project
What challenges did you encounter, and how did you overcome them?
Creating the range input was a challenge, due to the browser defaults - I managed to find a resource that explains well how to remove the browser defaults and create your own.
Styling the svg images was difficult due to how they resize
Creating the 4 password categories took a lot of trial and error, to cover as many cases as I could
What specific areas of your project would you like help with?
I think there could be some more refactoring done to the code.
General comments
Pretty good approach to the challenge. The user experience is good, there's a few minor UI aspects and the logic for too weak, weak,medium and strong passwords was a little difficult to figure out as a user. The HTML and CSS are pretty solid with just a few minor aspects i can think about. The JS was pretty difficult as a challenge, and feel like there's perhaps some room for improvement in the implementation, however you managed to get the user experience correctly.
Specific feedback
UI aspects
On first load of the screen you don't have the placeholder present in the password box
The slider is default to 10 when it should be for 0
The checkbox's should have background of green and larger than they currently are
The space between the colours is a bit too close than the design
The copy icon when clicked should display 'COPIED' afterwards - little hard for the user to know if its successfully copied without it
HTML
Consider using main rather than a <div class="container-wrapper"> - more semantic.
Consider using BEM or another methodology for class names, however the names are not bad - plus using utilities.
CSS
Try to use relative units for font-sizes, padding, margins (REM) for example rather than px, better experience for responsive design.
The classes names too weak, weak, all have the same properties, can consolidate these into one.
I haven't checked all the measurements in the breakpoints, but i had to change many different properties from the switch from mobile to tablet sizes - so there's perhaps some things to considere here.
JS
The clipboard function looks pretty decent
The biggest parts to consider are the generating password and generating strength functions, there's a lot of if statements which usually is a sign there is some refactoring to do.
2.1 I suspect you've complicated logic for the strength of the password (I was pretty simple, increasing strength by adding one of the checked boxes)
2.2 Instead of using charcode, have you considered just using a string with the numbers, letters and choosing from them randomly ? The way that i did it is that i choose randomly from the checked list and then randomly again in the specific checked box characters/numbers/symbols.
The overall experience is pretty decent, the major UX works as expected apart from the tips, it looks like you need to use the input field for numbers before it works. The HTML and CSS are pretty solid thought.
HTML
Pretty good semantic HTML, used forms where i didn't so interesting to see!
CSS
The icons in the input field don't have the padding - i couldn't figure how to do this but thought you should know!
Nice use of CSS grid on the buttons, i hadn't thought about this, used flex and it was a bit more tricky.
The applications isn't quite centered as it is in the design, probably worth adding align-items and justify-content center to the main element
JS
For a bonus you could try adding in the functionality for the tip % otherwise no comments, pretty solid JS.
Generally a good piece of work, nice responsiveness between mobile and desktop views, something i forgot about when completing my solution. There's a few minor UI aspects that could've been corrected. The HTML and CSS are relatively good. The JS i think there's some room for improvement in terms of conciseness, but looks like solid in terms of output on the screen.
Specific feedback
UI
On clicking on daily,weekly, monthly i see you haven't highlighted the hrs part of the cards,
HTML
Some of the class names are a bit non descriptive, perhaps think about using a methodlogy like BEM
Add in the hr's text to the cards as per the design (i can see why you left it out, makes the JS trickier)
CSS
I noticed that the dashboard isn't placed centrally within the page, you probably don't need to use grid for this on the main/body elements. Grid is better used for aligning complicated parts in 2 dimensions. Not to say i'm not so sure why place-items is not currently centering for you though, looks like there may be a problem with main element inheriting the place-items grid.
Noticed you've got some padding on the body element that might be contributing to it not centering properly
Couple of places you're using hex values instead of hsl, just a very minor point.
JS
Consider using fetch and live-server to serve your html in VSCode, you've dumped the data into the js file.
The approach of removing and adding classes is probably a little redundant for a simple change in textContent for some elements.
2.1 Consider an approach to change the textContent of the time and last week time elements for each card instead of recreating large amount of the card html.
General feedback
Pretty good job at this, the html, css and js are structured well generally and the user experience is nice. There are a few minor aspects to the UX and UI from the designs to take into account.
Specific Feedback
HTML
Use <main>, <article>/<section> tag elements for more semantic HTML. In just a small component it may seem a little odd to do this though, certainly feels that way to me when I do these challenges.
Consider using a methodology like BEM for the class names, they're a little non-descript as they are currently.
Instead of using CSS to change the desktop image, you can use the <picture> element instead with a media query.
CSS
Decent setup and use of variables
Throughout the css you used very specific % for width which probably reflects the need to use max-width in addition to width%.
On desktop view you can see the article title is not quite what the design is - check the fontweight, letter spacing and line height.
Similar to last point when you click on desktop view you can see the share element is not quite in the right place as per the design. Check the article preview description for fontweight, letter spacing and line height. They can be pretty particular about these typography aspects you may not have considered.
The name of the author is a little too large, try h4 instead of h3.
On mobile view the title is a little too large and font-weight a little too heavy, it should stretch to only 3 lines use h3 instead and check the typography styles for letter spacing and line height.
Similarly check the typography styles, the letter spacing, as it goes over 4 lines and not 3.
The image in desktop should be overflowing slightly, you can see there's no grey strip on desktop view, its overflowing. I didn't manage to find a way to do this, but just thought i'd let you know about it!
HTML
You're using main inside an article element, which should be the other way around, the main should go directly below the body.
I'm not sure article is the correct element given that this is a component, i used sections but probably not the best at knowing this myself!
Otherwise looks pretty good, a lot more efficient than mine.
CSS
You could use a reset for the specific elements together instead of using margin:0 on every h1,h2, h3 including other styles. For example you could use * { margin: 0}
Generally good looking CSS to me! Interesting use of filter, not sure I would've been able to come up with this.
JS
User experience looks good to me, you caught the edge cases around if you've clicked it in desktop or mobile and then resize it.
The JS is nice a clean and minimal, much more succinct than mine.
Summary: Overall a pretty decent job, only minor UI details changes. The HTML only has some minor changes i'd make, the CSS is strong and the JS is concise and succinct.
What are you most proud of, and what would you do differently next time?
What´s up guys? 🤗
I faced the challenge of changing the background-image, I had never gone this far as I'm still a junior, but it was a pleasure to make it work after many attempts!
What challenges did you encounter, and how did you overcome them?
As I said, I had some challenges with the background image, but I also had some problems with my lines of code, it had a lot of redundant effects but I tried to reduce it as much as possible afterwards.
What specific areas of your project would you like help with?
I would like feedback on how my lines of code are, if there is anything I can improve, in terms of how my solution looks on the website as well, maybe there is something I haven't seen and what I am doing with my footer, cause this is wrong💚
Nice HTML structure, I completely forgot about the different assets for different screen sizes so when i saw the picture tags it made me think of something i hadn't done.
The CSS looks well structured, efficient use of CSS, by comparison I had so many different margins in the different media queries, so great to compare where i could've been more efficient. I felt the design itself was so inconsistent in terms of spacing, just gave up trying to be systematic.
For the footer overlay you could do a absolute positioned overlay using ::before and slighty reduced opacity and using z-index.
Some minor UI aspects
A comment is the hero images are not overflowing, i couldn't get this to work either on my solution but just if you weren't aware of that in the design!
The desktop hero images are slightly different in terms of height, so you could apply a specific margin for both hero images.
Try to reduce the number of div's in the markup, they're non-semantic, use main, article, section
Try to be a bit more mindful with your classes - check out BEM, makes it easier to implement CSS when you split the HTML into quickly noticable classes.
CSS
Try to setup your CSS with CSS variables rather than using precise px units for different parts of your CSS it will force you to be more consistent with the design
The heart of this challenge is to try your hand at CSS Grid in desktop view as its tricky to set up the cards without it - you've managed to do this so well done but the styling compared to the design are slightly off and you could probably achieve near the design using grid a lot easier.
Using grid for mobile is probably not the best choice - flexbox is great for doing layout in one axis like mobile. Use grid for larger layout concerns and when you need to layout something in both x and y directions.
I would adjust your boxshadows to be more blurred
The icon margin is off in the cards should be 40px
Try to refrain from using px for everything, px are great for when you really need a fixed container - mostly you want max-width rather than a specific fixed container size. REM works well for font-sizes, padding and margins, using CSS variables will help you keep your spacing consistent which is important in UI
The header title should be h1 not h2 and should have atleast 64px of space between subheading and the cards
The card heading and descriptions spacing is little too large and the description font weight is a little too much
The cards themselves are a little too short in both width and height in desktop mode
The fontweight in your heading is too much should be around 200
The space between the heading title and the top of the view port is too large, look at the design to re-arrange this.
The fontweight of the card headers are too much reduce that done a touch in line with the design
A lot of the CSS feedback is nit picky about the UI which are lesser concerns. Do try to attempt to do the desktop cards in CSS grid though as it'll exposure you to grid.
Also worth thinking about when flexbox is useful to use and when CSS grid is more useful. i've provided a little bit on this but worth searching the web around this.
Generally a good approach, think react was a bit of an overkill in creating the component. Grid system works well, think you applied a decent media query that was minimal. You made precise changes to the UI to reflect the design.
Nice HTML structure and design looks almost identical! Nicely done getting the card to work in smaller desktop versions, i couldn't get this to work.
CSS - mostly good, you could use REM for font-sizes, padding and margins rather than pixels, you could add these as variables to the root to make it more consistent.
You have 3 seperate media queries that @media screen and (max-width: 376px) which seems a little unnecessary to seperate them out.
What are you most proud of, and what would you do differently next time?
Neste projeto eu usei a extensão PerfecPixel para tentar deixar o meu projeto o mais parecido possível com o design fornecido
What challenges did you encounter, and how did you overcome them?
Eu tive um pequeno problema com os items da lista, eles não queriam ocupar toda largura da linha, para resolver esse problema eu apliquei 'width: 100%;' tanto na ul quanto na div em que ul esta
What specific areas of your project would you like help with?
Eu gostaria de saber se teria outra forma de resolver o problema de com os items da lista que eu mencionei. Também aceito qualquer feedbacks sobre outros pontos a serem melhorados.
What are you most proud of, and what would you do differently next time?
This was fairly simple and straightforward task following the other newbie challenges. I picked it up because I wanted to learn to work with Figma files.
What challenges did you encounter, and how did you overcome them?
Incidentally the biggest issue appeared with the Figma and using the correct values for components in my project. I had the correct setup, then got confused and changed it and couldn't get back to the desired version.
What specific areas of your project would you like help with?
I noticed that the image in the mobile version is supposed to be cutout of the overall image, however despite the fact I tried to use object-fit: cover; attribute that was supposed to solve it, it doesn't seem to work. Any suggestions would be appreciated.
