All solutions

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

What I'm most proud of for this challenge is being able to apply CSS Flexbox as a solution to this challenge. I now have a better understanding how Flexbox works and that it should be used on container elements and will affect only the child elements directly inside that parent element. Any elements that are grandchildren will not be affected by Flexbox.

What I would do differently next time would be to design the HTML framework and CSS naming schema to be more efficient and understandable. Developing an effective HTML framework to design CSS rules around is a lot more important when I had to start creating container elements just to be able to position images on top of each other.

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

The main challenge I had with this project was applying the :hover effect over the NFT image and having both images and the background color stay inside the container.

I was able to overcome this by creating two div elements. The first div element to serve as a container for both images and a div container. I was able to use the position attribute to place both images and the div container classified as overlay to be inside the parent div classified as container.

Then I set the opacity of the overlay to 0 and the display attribute of the hover-img to none to make them invisible. Then using the :hover rule, I set the display of the hover-img to block to be visible and the opacity of the overlay to .5 to make the cyan color appear.

.container {
    position: relative;
    width: 100%;
    max-width: 320px;
}

.container:hover .hover-img {
    display: block; 
}

.hover-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-color: hsla(178, 100%, 50%);
    border-radius: 1em;
}

.container:hover .overlay {
    opacity: .5;
  }

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

If there is help I would like with this project it would be to have a better understanding of the position attributes and if there is a better solution to achieve the same effect of creating the overlay over the NFT image because surrounding an entire div element with an element does not seem like the best solution.

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

What I'm most proud of from this challenge is developing a better understanding of the CSS background attributes. Creating the wave effect was a real challenge that I originally didn't understand how people could take an image and make a wave effect.

If there is something I could do differently next time is that I still haven't figured out how to make containers be responsive but still have them and their child elements maintain their shape and position inside the parent element and not force the parent element to stretch.

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

The challenges I encountered were as follows. The first challenge was using the CSS background attributes to create a wave effect. I was able to accomplish this by setting the background-repeat attribute to no-repeat and the background-size attribute to reduce the height of the SVG image to 50%.

    background-image: url(./images/pattern-background-mobile.svg);
    background-repeat: no-repeat;
    background-size: 100% 50%;
    background-color: hsl(225, 100%, 94%);

The next challenge I faced was making the image of the person match the size of the container element. However, I decided to make them non-responsive as the image of the person would not be restrained by the container element. So, I set the container element and the image to a set the max-width to 375px.

The final challenge was making the controlling the position of the musical note image, the two paragraph elements and the link element be positioned as such. Using CSS Flexbox, I was able to use the justify-content attribute with the space-evenly value to space them evenly inside the container element. The same with using align-items and centering them. However, to get the two paragraph elements to stack on top of each other, I put them into their own div container so that flexbox would treat them as one block element instead of two separate block elements.

.plan {
    background-color: hsl(225, 100%, 98%);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 1em;
    margin: 1em;
    div{
        margin-right: 2em;
    }
    .annual {
        font-weight: 700;
        color: hsl(223, 47%, 23%);
    }
    .price {
        color: hsl(224, 23%, 55%)
    }
}

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

The area I would like help with this challenge would be being able to have a container element control the size of an image so that they both would always be the same size.

I would of also like to know how to make the container and the child elements remain in a fixed position when the screen size is scaling up and down without having to set a hard size.

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

What I'm most proud of is that I'm starting to develop a better understanding of CSS Grid and that grids involve using a parent child relationship so you need to use two HTML container elements for CSS Grid to work.

If I could do something different this time, it would be to spend more time planning what the framework of the HTML elements to create CSS classes that would categorize the elements to make the stylesheet and html document readable on the backend.

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

The main challenges I encountered was how to use CSS Grid and CSS Flexbox together to handle margin and padding between the HTML elements.

When it came to grouping the portrait, the name and sub-title and having them organized I had to use a mix between CSS Grid and Flexbox to align the elements together. While this did place the elements together, I'm certain there is a better solution as dealing with the built-in margins and padding of paragraph elements to come closer together and being able to place them in a very specific spot makes designing the CSS rules very difficult.

.person {
    display: flex;
    align-items: center;
}

.personname p {
    margin: 0 0 5px 1rem;
}

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

If there is one area I still would like help with each project is to know, when should I start limiting the size of objects for each project.

While I strive to match the mobile and desktop design pictures, I still struggle dealing with padding, margins and how to group HTML elements together and not take up the entire block. Sizing container elements so that it matches the challenge still elude me as I try to be a perfectionist.

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

What I'm most proud of from this challenge is that I'm starting to understand to make a responsive website will involve using both CSS Grid and CSS Flexbox.

Learning that you can use grid-template-areas and use periods to take up space on the grid is a neat trick for being able to place elements in a cross formation like in this challenge.

    main{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(4, 1fr);
        grid-template-areas: 
            ".team-builder."
            "supervisor team-builder calculator"
            "supervisor karma calculator"
            ". karma .";
        gap: 2rem;
    }    

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

The main challenge I encountered was learning how to implement both CSS Grid and CSS Flexbox at the same time. Having to design custom CSS rules for both mobile and desktop really makes designing and using HTML elements extremely complicated that you feel like you need to create multiple or elements to solve the challenge as both Grid and Flex involves being able to use attributes for a parent-child relationship.

The way I overcame this was to use Grid for the webpage design and use Flexbox for the content. This is the practice I would like to move forward with to develop my knowledge of both Grid and Flexbox.

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

The area I would like help from with this project is understanding how to stop the text and images from being responsive using CSS.

I know I try and make an exact match of each challenge, but I can't stop the text from being responsive when the window size increases or decreases as seen in the mobile-design and desktop-design pictures.

I would also like help with figuring how to figure out how big or small containers should be for each challenge. Because either I make them responsive or set a specific size and I don't know what's the best practice.

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

My main takeaway from this challenge was understanding the importance of CSS rules and their priority. Having to make multiple sets of CSS rules with the @media rule is required to design a layout for desktop and mobile.

If I could do something different, it would be to learn more about responsive web design. While I was able to make the mobile design match the requirements. I was not able to make the desktop design fully responsive when the resolution started to become smaller than a certain width as it would be cut off instead of adjust as needed.

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

The first challenge I encountered was making sure that based on resolution size that only the desktop or mobile image would be visible. Not only did it require using @media and (min-width) and (max-width) CSS rules. I had to disable both images from being seen and then have them be visible within the nested @media CSS rules.

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

What I need help with this project is to understand how to make every element in the HTML framework responsive.

I still have trouble understanding what I should be doing to have the text or images inside an HTML element be responsive as the resolution of the webpage increases or decreases in resolution.

Using div elements as containers and then using flexbox for each div element can't be the only solution. Because I don't know how to set a maximum size and then have it and the elements shrink when the resolution gets smaller. My designs always takes up the entire webpage unless I set a specific width and height in pixels but that removes the ability of the design to be responsive.

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

What I'm most proud of for this challenge was being able to quickly structure the framework for the HTML file. I'm able to quickly know which elements to use to create ordered and unordered lists and know when to use a table. It didn't take much time for me to structure the text with the appropriate html tags.

If I could do something different, it would be to build a better understanding of responsive web design and understand the CSS attributes for each html element. I'm still having trouble ensuring that the desktop width matches the design document and while I understand flexbox, adjusting the margins and padding for all the html elements makes it hard to know if I'm creating an exact replica of the challenge.

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

One main challenge I had was making the image take up the same width as the rest of the webpage when the width of the webpage was at 375 pixels.

The challenge was making two sets of CSS rules using the @media rule and adjusting the body and main properties to have the appropriate margin and padding when the webpage surpassed 375 pixels so the image will have a border radius and white section.

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

I would like help with knowing how to figure out how to use margin and padding so that the desktop design matches the design document while being responsive. I don't know how to make the width of the main element be an exact match to the design document.

The other issue I had with this project was the colors for the style guide. There were eight colors for this challenge, and I could only determine four colors. Even using a color picker did not match the hsl values as provided by the style guide.

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

I'm most proud of being able to complete this challenge faster than my previous challenges which makes me feel confident that I'm starting to understand the fundamentals of CSS.

If I could do something different it would be to try and use a CSS framework to test myself. While using custom CSS rules is nice for small projects, a framework would likely result in true responsive web design while learning the syntax that web developers use.

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

My big challenge for this challenge was using CSS rules to make the appearance of boxes using the div element using margin and padding. Being the first challenge to make multiple boxes for each social link, I struggled to understand the difference between margin and padding. After doing some research, I understand now that to not have each div element merge on top of each other, you want your margin to be bigger than the padding. The padding controls the size of the box while the margin determines the distance between each block element.

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

If there was an area I would like help with this project it is learning how to better match the height and width of the project to match the solution.

Going based off of just a picture to determine the height and width of the solution without any dimensions cited of what the dimensions of the body should be just leaves me guessing what the height and width should be and if I should be using absolute sizing like px or relative sizing like em.

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

I'm most proud of learning how to nest div elements and use the attribute padding to create boxes to contain text elements.

I'm also proud of starting to use flex to align images and text elements.

If I could do something different, I'd like to figure out if there is a better solution to add a consistent margin instead of having to set a margin and padding to each element using a class.

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

My main challenge was figuring out how to use margin and padding to create a webpage to have responsive design between desktop and mobile.

I was able to overcome this by using the main element as the box and then use each div element as their own box for the image and text elements and setting each their own class in CSS. This made spacing out each element a lot easier than having everything in a single div element.

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

The area of the project I would like help with is how to better understand the position: absolute attribute and the display attribute.

I've yet to come across a decent CSS guide on best practices on how to properly place each element using CSS because the position attribute also being reliant on top, left, and transform seems like a suboptimal solution in order for the element like a card to be in the middle of a webpage.

I'd also like to learn how to get the text to match the font to the solution. I followed the styleguide.md yet the font they want doesn't match the font-weight that they recommend. Should I be using something else besides and ?

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

What I'm most proud of is that I was able to learn how to use CSS to create a box around the image and text elements. If I could do something different is that I would create a dedicated CSS file to link to the HTML document as the amount of properties required for this exercise made it difficult to read in VS Code.

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

The main challenge I encountered was learning how to use CSS to create a padded box and align the box, image, and text into the center of the browser. Thanks to W3Schools I was able to learn how important the padding attribute was to be able to create a complete white border around the image and text by using the example they had on their website about CSS borders.

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

While I'm still new to applying HTML and CSS. I'd like help with learning best practices and workflow to solve these problems. I found myself jumping around between the code trying to figure out a solution.

I took the advice to focus on the HTML structure first, but the core of this problem was focused on CSS and already have an in-depth knowledge of CSS attributes to manipulate the text size and borders to match the desktop and mobile image.