All solutions

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

Most proud:

• worked with more JavaScript and refactoring code to be dry, reusable and single responsibility functions
• making it responsive on all devices

What I would do differently:

• work better on the css design and learn how to structure my css files

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

I didnt face much challenges from this project other than one of the colors are missing from the style guide and so I used a simple grey to replace it.

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

i would like help on:

• if there were better ways to refactor my javascipt or structure my html/css
• any accessibility code I could have implemented ( theres one instance i have left out a alt in the success page svg because its purely for looking good)
• anything i can improve on in general

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

Most proud:

• starting to refactor my logic to be mor reusable, follow dry principles and be readable

what i would do differently:

• figure out multiple ways in terms of the logic and then find the best solution from that to follow

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

challeneges i faced:

• Refactoring the solution into smaller funtions and how i overcame this is having the mindset of test driven development and making the functions and logic easier to test.

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

areas i would like help in:

• how to make my project more responsive
• possibly there was a better solution for this project
• any bad practises and standards i need to take out

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

Most proud:

• Using fetch to get the data from the json file
• creating an algorithm to get the data first before coding
• getting better and more familiar with grid

different next time:

• I will have a look at other solutions to this challenge to look at how i can optimise the code

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

challenge 1 and solution:

figuring how to grab the data and display it, i first created an algorithm step by step to see what needs to be done and then started coding the solution

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

I would like help on:

• how to make it more responsive from lower sizes to larger screen sizes whilst being smooth, would it be like one column, then two and then the four on the full desktop version

• possibly a better method to have used for the javascript

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

most proud:

• worked a lot more on javascript logic for the error state handling
• practised more with both my flex and grid skills
• managed to get most of the requirements done and close to design

what i would do differently next time:

• definitely spend more time on doing the javascript requirements before the css styling
• take all screen sizes into consideration when styling
• make a plan for the logic with pseudocode before starting to write the code

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

challenge 1 and solution: i went with mobile design first approach and at first failed to make it responsive for desktop version, how i solved this was through redoing the css and html structure and making a more responsive layout on mobile and expanding to larger screens

challenge 2 and solution: figuring out how to change the picture once we got to the desktop version without using a div and then just changing the background picture to the desktop one, how i solved this was through using the picture element and wrapping the default to the mobile img and then when the screen expands to 600px i have the source of the image of the desktop

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

specific problems i would be grateful for help in :

• i still have problems with creating responsive layouts with a mobile first approach and taking the larger screens in consideration, some advice on how i can make it look good for the mobile, tablet and laptop screen sizes

• any bad practises i implemented and some suggestion how to change that

• if my javascript logic is okay or was there a better way to achieve this

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

I am proud:

• I added javascript to my mobile and desktop design
• used the display none in css and figured out how it worked
• played around with positioning

next time i will:

• look more into javascript and events and find a better way to toggle the share popup

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

challenges:

• on the desktop version i havent figured out how to effectively toggle my profile content with the share popup and therefore i need to look into this and redo my project soon

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

• suggesting other methods i could have used for my pop up

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

Most proud:

• successfully created the grid layout on mobile and desktop
• a more smoother transition for responsiveness from smaller screen size to larger ones than the last project

what i would do differently:

• I am still experimenting with the different approaches on whether to start on mobile or desktop first so maybe possibly try desktop first next time and see it is more effective with less css code

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

challenge 1 and solution: trying to condense the cards layout from the mobile desktop to a more condensed version on desktop:

• I had used a media query and when the width was minimum 786px (larger than tablet) then the max width of the main container would drop to 70% and have no margin and the body would display flex and use justify center and align items to center the main container holding the cards, i would also drop the font sizes of the content

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

• any bad practises in the code that i need to change
• suggestions on better ways i could have approached this -any major design detail i may have missed to implement

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

most proud :

• worked with CSS grid and flexbox
• added media query for larger screens -used mobile first approach for the first time

what i would do differently:

• transition more smoothly when going from smaller screen sizes to larger ones

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

challenge and solution 1: how to code the design for the desktop version of the challenge solution: i learnt more and practised css grid on w3schools before attempting and also learn negative margin values

challenge and solution 2:

• how to create the box shadow around the cards: I had searched up the box shadow property and there was a site you can copy and paste from, once i found a good shadow that looked similiar to the one in thre design, i then used the dev tools to adjust the color and blur to get it closer to the design.

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

i would like help on:

• if there was a better way to layout the four cards on desktop and mobile
• any bad practises that i need to stop before going for my next project -how to layout the design better on mobile so it looks smoother when going from smaller screen sizes to larger ones
• anything else that you spot is not the right way

any feedback would be appreciated, thank you

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

im proud that its my first time i used a mobile first design approach and worked on responsiveness, i would definitely look more into different aspects of responsive design and how to refactor my code so the layout is responsive on all screen sizes

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

i found it hard from making my card component go from the mobile scree size to the desired design on desktop and all the screen sizes in between

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

i need help on wondering how to make my image responsive as on a tablet size it is not clear and on the large laptop size, my content seems to get smaller and all up in the container which isnt the desired design. it looks good on the small laptop screen size though around the 1000px mark.

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

i am proud that i used the table for the first time successfully, to be honest i know i didnt use the best methods to create this and therefore will optimise it for better visual, and also performance wise.

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

the height of the container isnt correct and i am still unable to match it to the design

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

if you could identify ways on how i can improve the html and css and best practises but also how to match it closer to the design, height of the container especially.

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

im most proud of getting the style as close to the design and also working with the designing of the list items

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

styling the list items but i used w3schools as a reference on how to complete it

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

just a general look to see if the html and css can be optimised to be better

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

I was able to use flexbox without using googling and also adding the hover state

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

possibly thinking about the structure of the html to design later but its improving

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

just to see if anything is bad practice