All solutions

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

I am most proud of successfully implementing CSS Flexbox and Grid in this project. This was a significant milestone for me, demonstrating that I could effectively use these powerful layout systems to create a complex and responsive design. It was rewarding to see the design come to life and function as intended across different screen sizes.

Next time, I would try to plan out my CSS structure more thoroughly from the beginning. While I was able to achieve the desired result, I found that I had to backtrack and refactor some of my code partway through the project. If I had spent more time planning my CSS classes and structure from the start, I could have potentially saved time and made the development process smoother.

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

One of the challenges I encountered was ensuring that the landing page was fully responsive. This required careful planning and testing to ensure that the layout and elements adapted well to various screen sizes. To overcome this, I utilized CSS Flexbox and Grid to create a flexible layout that could accommodate a range of devices. Additionally, I regularly tested my design on different screens to catch any potential issues early on.

Another challenge was organizing my CSS in a way that made it easy to manage and update. Initially, my CSS became a bit disorganized as I kept adding more styles, which made it difficult to navigate and understand. To resolve this, I refactored my code, grouping similar styles together and commenting my code clearly. This made my CSS more readable and maintainable, improving my workflow for the remainder of the project.

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

I would like help with refining my understanding of CSS Flexbox and Grid. While I have made significant progress, I believe there is always more to learn. I would also appreciate any advice on how to structure my CSS more effectively from the beginning to streamline the development process. Finally, I would value any tips on best practices for web accessibility to ensure my websites are usable for all visitors.

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

I am proud to overcome the challenges I initially faced while learning CSS Grid. Despite finding the syntax and logic complex at first, I was able to grasp it through persistent practice and the use of online resources. This experience has boosted my confidence in my ability to tackle new concepts and technologies.

If I were to do anything differently next time, I would probably invest more time early on in understanding the fundamentals of the concept I'm learning. This would likely make the learning process smoother and more effi

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

When I first started learning CSS Grid, I faced numerous challenges. The concept of grid lines, grid tracks, and grid areas was completely new to me, and the complex syntax was initially hard to grasp. This left me feeling confused and frustrated.

To overcome these challenges, I decided to start with the basics. I took the time to learn each CSS Grid property individually, such as grid-template-columns, grid-template-rows, grid-gap, grid-line, grid-area, and others. This approach helped me understand the function of each property and how they interacted with each other to form a complete grid layout.

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

• Maybe there's a better way of doing the desktop view. If someone can improve the structure below, please let me know.

'''@media (min-width: 80rem)

.grid-container {
  width: 1260px;
  grid-template-columns: 1fr;
  margin: auto;
  margin-top: 250px;

  .daniel {
    width: 540px;
    height: 280px;
    grid-column: 1 / 3;
    grid-row: 1;
  }

  .jonathan {
    width: 255px;
    height: 280px;
    grid-column: 3 / 4;
    grid-row: 1;
  }

  .kira {
    width: 220px;
    height: 650px;
    grid-column: 4;
    grid-row: 1 / 3;
  }

  .jeanette {
    width: 255px;
    height: 280px;
    grid-column: 1;
    grid-row: 2;
  }

  .patrick {
    width: 540px;
    height: 280px;
    grid-column: 2 / 4;
    grid-row: 2;
  }

  .cards:first-child {
    background-position-x: 400px;
    background-size: 125px;
  }
}

'''

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

I had a hard time making the desktop layout, and I have to read the flex box documentation several times to understand it.

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

When I initially started using flexbox, I encountered a few challenges. The most notable were understanding the difference between justify-content and align-items, and figuring out when to use flex-direction: column versus flex-direction: row.

I addressed these challenges by doing a lot of practice and experimentation. I also found it helpful to use online resources.

One trick I found particularly useful was to remember that justify-content affects the horizontal alignment and align-items affects the vertical alignment when flex-direction is row, but this gets reversed when flex-direction is column. Having this rule of thumb helped me a lot in understanding how to align items using flexbox.

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

• I had to eyeball the position of the cards in desktop view. Maybe someone had a better solution?

  .team-builder {
    align-self: self-start;
    transform: translateX(52%);
    margin: 0 auto;
  }

  .karma {
    align-self: self-end;
    transform: translateX(-55%);
    margin: 0 auto;
  }
  .supervisor {
    align-self: center;
    transform: translateX(50%);
  }
  .calculator {
    align-self: center;
    transform: translateX(-50%);
  }
}

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

• Learned about SASS and how to use variables and functions

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

• I was having a hard time doing the desktop view using Flexbox. I used CSS grid instead by watching videos online.

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

• CSS Grid
• SASS

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

• Learned more about semantic html, list and table elements

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

• I'm having a hard time styling the table element. I had to read the documentation and read some codes of other developers

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

• I'd like to use bootstrap, but haven't fully grasp the idea. Kinda overwhelming for me.

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

• This time I tried css pseudo class nth-child(). I thought it's hard, it's actually fun.

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

• Since I don't have access on figma resources. I had to eyeball everything.

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

• How to shorten my css code and make more simple

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

• I get to know more about flexbox and apply it correctly in this challenge.

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

• I thought margin and padding are easy as ABC, but it's not. I have to read the documentation again.

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

• More on flexbox
• Margin and Padding

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

• I get to know more about flexbox and apply it correctly in this challenge.

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

• I thought margin and padding are easy as ABC, but it's not. I have to read the documentation again.

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

-More on flexbox -Margin and Padding

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

I'm no expert. I don't know, I'm proud maybe that I was able to finish the challenge. It took almost half a day to finish it. I hope I can do it a bit faster next time.

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

I was having a hard time using the flex and arranging the elements. I'm having trouble also with rem and em units. I need to read back the documentation back and forth and experementing.

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

CSS, flex