All solutions

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

Very close to the final design. Learnt how to use gradients. Lot of practise with flexbox Great step forward in handling position of footer in this project, but still not the most clean styling.

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

• Flexbox: in the Summary section's skill boxes, struggled to keep the first 2 elements (icon and skill name) at the start and the last element (score) at the end without grouping the first 2 elements into a div, i.e. keeping them both as direct children of the flexbox. Achieved by giving 3rd element margin-left: auto, but ideally wanted to fix the issue using flexbox properties and knowhow
• Manipulating position of the card when its width and height were set as percentages. Its size obviously changes as I resize the browser window, which made it difficult to set the correct styling when it came to making the page responsive. Solved by switching to fixed height and width in pixels, but would like to learn how to keep relative measurements such as rem / percentages and still manage responsive styling
• Footer issues. Managed to keep it at the bottom and center even when scrolling. Di so by setting position to static and defining suitable padding to ensure it remains at the bottom at different viewing RWD breakpoints. But ran into an issue when exceeding the mobile-width breakpoint and entering desktop view -- the footer would jump to the top of the page. Still not sure why -- any ideas? Had to "force fix" by setting top padding

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

As mentioned above

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

Made an effort to condense code as much as possible

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

I managed to center the "main" element horizontally on the page but struggled to do so vertically. I tried the same approach as for horizontal centre alignment, i.e. specify give an exact height then set margins to auto, thinking it would work the same way but it didn't. When I set the vertical margin to auto it just removed all the vertical margins.

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

Couldn't find anything online regarding the vertical centring. Ended up having to define exact vertical margins to get it looking centred.

Any ideas, please share

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

This was my first serious independently coded html css project. I'm proud of the fact that I took time to plan out the project before I started which kept me focused and on track during the actual coding. Even just a simple sketch on paper worked well to put the bigger picture in view when I was entrenched in a coding problem. I also adapted and used the checklist provided by frontendmentor which really helped in the management side of the project. I believe having this structured, methodical approach allowed me to complete this project in under 2 days

Next time, I would think through the html structure and css styles more thoroughly before starting the markup and styling phases respectively. This is because I fell into a few pitfalls and inefficiencies which could have been avoided with better thought and planning. So I would definitely create a more detailed plan before starting any coding. Also, I plan to refresh my knowledge on css by going through the css section on W3 schools

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

1. Uploading to GitHub. I took a course but had forgotten a lot of it since I rarely used it in practise. Refreshed my knowledge on the key commands

2. Responsive design: The image had to latch onto the border of the container at 375px. My problem was I had initially kept the image inside the flexbox but this meant I couldn't get it to fill the padding of the container while inside a flexbox. So I took it out and placed it above the flexbox

3. Getting overwhelmed by all the different elements to style. Split the styling phase into phases -- first style elements individually going down the page (don't worry about DRY just yet); extract the universal and body styles; finally review and tidy up the styles: test them, group, delete

4. Responsive design. Needed a recap on the material

5. Tables. Hadn't worked with them before so had to learn

6. Adding the horizontal ruler lines in between the table rows. This was probably the most annoying issue to solve, and I still don't have a design that matches the briefing. After looking at tutorials on YT, I've discovered that it can be done by NOT using the table element directly, but constructing it out of divs and paragraphs where the paragraphs form the data cells and their wrapping div forms the row and is set as a flexbox to space out the cells. I haven't incorporated this into my code, however as I felt it would be quite an overhaul

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

• Do you have any other suggestions for getting the horizontal ruler lines inside the table? Is there a way to get those lines using the html table element, and ensure they are complete lines without a gap in the middle where a data cell ends?

• What suggestions, tips and best practises do you have for planning out the markup?

• How can I write clean css the first time round? Any ideas to help move me in that direction?