All solutions

What are you most proud of, and what would you do differently next time?

Second attempt - the breakpoints are a bit more seamless. I feel the overall result is more robust and closer to the design.

What challenges did you encounter, and how did you overcome them?

The active mobile layout got me - but with the help of relative and absolute positioning I got things looking reasonably ok . I think ?

What specific areas of your project would you like help with?

Not walking away feeling super smug about this one. Reckon I've got substantial bloat in the css. Not sure how to refactor it. The HTML semantics were another thing that in hindsight needed to be more concise. I'll be sticking this on discord for some sage advice.

What are you most proud of, and what would you do differently next time?

It's far from perfect, but was proud to get most of it by researching and for the most part, getting it done . Really enjoyed the design difference between the mob and larger screens social pop-ups. Not sure how I'd do it differently next time - as I don't have the knowledge to assess.

What challenges did you encounter, and how did you overcome them?

As mentioned - it's far from perfect. The svgs spooked me a bit - not sure If they were implemented properly - the image and padding was for me a headache - am still not 100% happy with how that worked out with responsiveness on the larger screens. Also I haven't really understood the positioning for the pop-up for largers screen sizes - it's doesn't behave in responsive way.

What specific areas of your project would you like help with?

In terms of the responsiveness I'd like to develop a less ramshackle approach for margins - paddings and the proper way to position the hidden social pop-ups for screen sizes -plus the right way to use svgs and svgs for as active icons. I'm seeing this as a first draft - am definitely going onto discord to get more advice.

What are you most proud of, and what would you do differently next time?

It felt good just to 'keep my hand in ' and reinforce the little I know so far. Not sure what I'd do differently next time - Grid perhaps ? - really don't know.

What challenges did you encounter, and how did you overcome them?

I spent a lot of time mucking around with the padding and margins - managed to get what I think is a reasonable responsiveness but after way too much tweaking 😵‍💫.

What specific areas of your project would you like help with?

I still need to understand how to set up more global configurations for margins and padding so I'm not continually adjusting individual elements for responsiveness . Any thoughts or links would be more than welcome.

What are you most proud of, and what would you do differently next time?

More focused on the responsive aspect this time around. To be honest - not sure how'd I'd do it differently next time - as my knowledge/experience is not really advanced enough see other possibilities

What challenges did you encounter, and how did you overcome them?

I did the html markup - thinking desktop 1st then the css mobile 1st for styling ( as recommended by Kevin Powell ). Thinking Mobile 1st felt weird - just not used to it i guess. Had some breaks that I didn't expect with the responsiveness, this was due to some padding and margins that were applied too locally - so more containers ( perhaps too many ?) and flex appeared to to the trick.

What specific areas of your project would you like help with?

Wasn't crazy about the image set up. I had issues with the bottom breaking when resizing from it's parent container - I made it stick to the bottom of the parent container by adding height:100%. I keep on hearing that adding height is a bad idea for responsive design - so I'm not feeling great about this being the best solution.

What are you most proud of, and what would you do differently next time?

Getting it to work responsively on a small screen and tablet was pretty cool. Next time I'll try it with grid.

What challenges did you encounter, and how did you overcome them?

The whole responsive layout via flex was a challenge - this was the best configuration I could come up with for now - once I learn more, I'm sure I'll become aware of better solutions with flexbox or indeed grid.

What specific areas of your project would you like help with?

Pretty sure I'm not leveraging flexbox enough with this challenge. I need to really look into shrink - grow - basis and wrap a lot more. Any clues on what I've done wrong or tips on how to improve it would be more than appreciated. :)

What are you most proud of, and what would you do differently next time?

Again, like the more recent challenges - just getting through it was good. This time I did a laptop media query - which I suspect I should be doing for all the challenges anyway. Attempted Css Grid for the first time - scary but amazing . I attempted BEM markup - made the css a lot easier and clearer.

What challenges did you encounter, and how did you overcome them?

The challenge was 40% knowing what I'm doing - 40% looking things up and 20% flying blind ( i.e. guess work ! ). I totally wimped out with the mob and laptop layout - I wanted to continue with grid but was having issues trying to resize a specific single grid item to avoid unwanted space. I'm sure they'd be a way of doing it with one line of code but as I don't enough about grid I took the quick and dirty option and reverted back to flex and flex-direction:column.

What specific areas of your project would you like help with?

As alluded to in previous question - the Css Grid knowledge is along way from where it needs to be - also I'm sure there's a lot improvements I could make with the bem markup.

What are you most proud of, and what would you do differently next time?

Felt good just being able to do it without getting really stuck. This was my first time with grid so a little intimidating but managed to make it behave as expected. Had a lot of fun. Not sure if I know enough to determine what other options are out there for doing that particular challenge differently.

What challenges did you encounter, and how did you overcome them?

The positioning of the cards was a slight hurdle. Got the second column ( the one containing 2 cards ) working by placing the 2 cards in a single containing and grid did the rest. I could be wrong - but I'm assuming that's the most obvious way to do that ?

What specific areas of your project would you like help with?

Seem to be stuck doing desktop first - for some reason I feel more comfortable that way. Not sure if I shouldn't be doing more mobile first challenges. I'll force myself.

What are you most proud of, and what would you do differently next time?

Understanding what I was doing this time around was a buzz and also using more semantic html.

What challenges did you encounter, and how did you overcome them?

Used the transform: (translate ) css property / values on my first submission for the avatar author section but used flex this time around - found it a more elegant solution. The svg resizing for the mobile bugged me and I have yet to figure it out.

What specific areas of your project would you like help with?

As mentioned the svg resize for the mobile - it needs to have more height. Thinking perhaps I don't have enough wriggle room due to my flex , margin or padding settings or perhaps it was the html. Whatever it is , it's got me stumped.

What are you most proud of, and what would you do differently next time?

Was happy about cleaning up the css and making the html a little bit more semantic. Next time I'd probably try doing bem markup.

What challenges did you encounter, and how did you overcome them?

The cart icon in the button was an issue till I saw a great Kevin Powell tutorial doing exactly this challenge https://www.youtube.com/watch?v=B2WL6KkqhLQ&t=2969s.

What specific areas of your project would you like help with?

This was my second attempt and I wanted to refine my approach with flex and make that work - rather than just copying Kevin Powell's tutorial - that's so I could reinforce things on my level instead of being bombarded with too much new information. I think overall I need to be more up to speed with semantic markup so I can think the right way from the start of a project in terms of structure and styling.

What are you most proud of, and what would you do differently next time?

Was happy to understand and use css variables ( not sure if that wasn't overkill for a project that small though ? ) and getting the background svgs to display as shown.

What challenges did you encounter, and how did you overcome them?

The background needed a bit of research to understand how to do it but not too tricky or hard get info on. Initially the background was a mess as I was using percentages to position the svgs so the spheres moved when resizing - not a good look. The solution was using the key words right, left, bottom, top along with viewport width declarations in the background-position property.

What specific areas of your project would you like help with?

I think using more semantic html and also keen to fully understand and use bem mark-up . It seems a much better way of doing things.

What are you most proud of, and what would you do differently next time?

Was really torn between doing floats as opposed to flexbox. Perhaps Grid was a viable option but need to learn more about it.

What challenges did you encounter, and how did you overcome them?

Too much tweaking margins with negative values which makes me think there's a better way of doing things. The transform: translate property was a great help for positioning some elements. Also the transform: scale was super handy for the logo svg. Also a big shout out to yas-avocad who give me a tip about max-width - which I really needed to understand. That really helped.

What specific areas of your project would you like help with?

The fact that I'm using too many negative values means I'm doing it wrong but I don't know where. Time to research - I guess.

What are you most proud of, and what would you do differently next time?

I think it turned out okay - don't currently know enough to assess how I'd do it differently - perhaps use Javascript for the overlay .

What challenges did you encounter, and how did you overcome them?

The overlay was the main issue - not sure if I should say this - but checked out W3Schools and they had the exact solution for an overlay with icon using just HTML and CSS.

What specific areas of your project would you like help with?

In this particular challenge I reckon the class naming could have been clearer , but generally speaking , other options for creating more concise code.

What are you most proud of, and what would you do differently next time?

Think it turned out close to the design. Suspect the error message could have been done better - but was limited with my current knowledge of Javascript.

What challenges did you encounter, and how did you overcome them?

Getting the error message display behaving properly for both desktop and mobile was a minor hurdle. Could get either the desktop error message or the mob error message working but not both until I put this if statement in the js.file.

if (window.matchMedia('screen and (max-width: 375px)').matches) { blueBtn.style.marginTop = "2rem"; } This approach seemed to work

What specific areas of your project would you like help with?

For any javascript solution I come up with - there's invariably loads more elegant solutions . At this stage - it's trial and error - research - memory and hopefully some tips from well meaning people who know more than I do.

What are you most proud of, and what would you do differently next time?

Again just getting through it and making it look and function a little like the design was a big deal. Wasn't sure if flexbox was the best option - maybe floats or grid next time - don't know enough to make a sound judgement. Not yet anyway.

What challenges did you encounter, and how did you overcome them?

Every step was a challenge but I found by googling and doing some research - all the information is out there to help get through it.

What specific areas of your project would you like help with?

There was way too much tweaking with the mobile - think I was on the wrong track with the initial code for responsiveness. I tend to do desktop first. Lots of padding and margin settings that felt really hacky.

What are you most proud of, and what would you do differently next time?

I'm sure there's probably a million ways I could have done this better - but I just don't know enough to know ! ( especially with javascript ). I'm just proud I got through it 😵‍💫.

What challenges did you encounter, and how did you overcome them?

Maybe it's my screen or failing eyesight but I had to tweak the specified colors to look more like the previews. Biggest challenge was the javascript. Doing projects like this has been a wake up call that I have a long way to go with javascript.

What specific areas of your project would you like help with?

Hands down the javascript .

What are you most proud of, and what would you do differently next time?

Happy I seem to be understanding flex a liitle bit better.

What challenges did you encounter, and how did you overcome them?

Unless I've done something totally wrong ? - I don't think I had any real challenges with this one 🤞

What specific areas of your project would you like help with?

Again, unless I've misunderstood something - I think that one was okay :)

What are you most proud of, and what would you do differently next time?

Happy I got through the Javascript stuff - seemed logical. Think I'd like to get into or SASS for the CSS next time.

What challenges did you encounter, and how did you overcome them?

The Javascript was pretty much the challenge - I did some research and did what I thought was the clearest and simplest path to get the result.

What specific areas of your project would you like help with?

I think Javascript or more specifically Javascript in DOM manipulation is definitely a hurdle to overcome. There seems to be myriad approaches for any given task. Looking forward to understanding SASS more - if any one can recommend a good place to start - I'd be grateful.

What are you most proud of, and what would you do differently next time?

I think it turned out pretty close to the design - had a lot of fun doing it. It's just great to actually do things rather than being stuck in tutorial hell.

What challenges did you encounter, and how did you overcome them?

Tried to use flexbox as much as possible - still not entirely at home with it - but starting to make a bit more sense.

What specific areas of your project would you like help with?

The JSON file spooked me. I feel that accessing the JSON object data via javascript with some DOM manipulation was probably the way to go - but I side stepped this particular solution to really focus on HTML and CSS and just went ahead and hard coded the results. The HTML semantics also need some work.

What are you most proud of, and what would you do differently next time?

Reckon I got pretty close to the design brief. Think maybe mobile first next time ? but really not experienced enough to have a strong opinion either way.

What challenges did you encounter, and how did you overcome them?

Trying to make the html more semantic and the amount of adjusting for the mobile view particularly with margins and padding.

What specific areas of your project would you like help with?

I think that a lot of my code is a bit hacky - still need to understand more about what I'm doing - but having a lot of fun learning 🙂 👍

What are you most proud of, and what would you do differently next time?

Was happy about cleaning up the css and making the html a little bit more semantic. Next time I'd probably try doing bem markup.

What challenges did you encounter, and how did you overcome them?

The cart icon in the button was an issue till I saw a great Kevin Powell tutorial doing exactly this challenge https://www.youtube.com/watch?v=B2WL6KkqhLQ&t=2969s.

What specific areas of your project would you like help with?

This was my second attempt and I wanted to refine my approach with flex and make that work - rather than just copying Kevin Powell's tutorial - that's so I could reinforce things on my level instead of being bombarded with too much new information. I think overall I need to be more up to speed with semantic markup so I can think the right way from the start of a project in terms of structure and styling.

What are you most proud of, and what would you do differently next time?

Focused more on the mobile size.

What challenges did you encounter, and how did you overcome them?

Changing the image for mobile size and generally reworking the margins and padding. Found the horizontal scrolling annoying but used overflow-x: hidden; to solve it.

What specific areas of your project would you like help with?

Pretty much the same as the others - i.e. a more concise and elegant way of doing the mark up with more semantic meaning and ditto for the CSS.

What are you most proud of, and what would you do differently next time?

Was a bit more confident with flex after second attempt felt like I had more control doing the mobile version

What challenges did you encounter, and how did you overcome them?

Tending to go Desktop to Mobile. In the mobile I was struggling with the positioning of buttons in mobile till I realised I forgot to add align-items: center on the parent container. Oops !

What specific areas of your project would you like help with?

Am trying to be more pro with the css vars and :root value -properties - not sure if it's too much for a small project but reckon it's a good habit to develop. Any advice on boiler plate css would be welcome.

What are you most proud of, and what would you do differently next time?

Doing this challenge again gave me the opportunity to do better semantic html and streamline a lot of the css.

What challenges did you encounter, and how did you overcome them?

With styled numbers in the ordered list I used a 3rd party bit of code.

What specific areas of your project would you like help with?

Possibly styling the numbers in the ordered list without the 3rd party code.

What are you most proud of, and what would you do differently next time?

Understanding what I was doing this time around was a buzz and also using more semantic html.

What challenges did you encounter, and how did you overcome them?

Used the transform: (translate ) css property / values on my first submission for the avatar author section but used flex this time around - found it a more elegant solution. The svg resizing for the mobile bugged me and I have yet to figure it out.

What specific areas of your project would you like help with?

As mentioned the svg resize for the mobile - it needs to have more height. Thinking perhaps I don't have enough wriggle room due to my flex , margin or padding settings or perhaps it was the html. Whatever it is , it's got me stumped.