QR Code Webpage with HTML/CSS

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

The thing I feel proud of is being able to properly center all the info in the center of the page with the QR code and the text. It was really the first time I really tried to center a div. I was able to place the div class card that was going to contain the content and make sure that the width and height was on point. But when it came to place the other elements like the text and image of the QR code it was tricky since I used position and margin to move each part of the elements inside the parent div so it resembled the challenge's design. And also make sure that the font-size and color of each text and element coincide withe the one in the design. But in the end I was able to do it as close as posible to the design.

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

I remember two challenges that really stuck out to me:

• The div class attribution not being placed correctly under the div parent:

This challenge arise since I wanted to place the div class attribution under the div parent that contained the QR code itself.

 
      Challenge by
      Frontend Mentor. Coded by Carlos Sosa.
    

.attribution {
  font-size: 20px;
  text-align: center;
  margin-top: 190px;
  margin-left: 690px   ;
}
.attribution a {
  color: hsl(228, 45%, 44%);
}

At first, I just went to my styles.css file, wrote .attribution and .attribution a and used margin to locate it under the div and make it look good. However, I noticed that it wasn't working properly. I thought that I wrote something wrong but everything was working as intended. That is until I looked at the index.html file and noticed that there was a in the html file that contained the styling of the div attribution. After realizing that, I moved that line of code to the css file, merged it with the line of code I had and personalized it and that was it.

It was an easy fix, however I was surprised to find that the code I obtained from the challenge had that styles in the index since I was used to write css code exclusively in the css file only and I thought that wasn't really used nowadays. I'm aware you can do that and also write the styles of a element as a atribute, but I was surprised to see that.

That definitely teached me to read more closely what I was coding, especially if it was a code given to you by someone else.

-Applying media queries: I wanted to practice and apply media queries in order to see how the QR code page would look like if I saw it from diferent dimensions of cellphones with a max-width of 700px. The reason I struggled with it is because it took me some tries to not only put it correctly in the dimensions but also have to move every part of the QR code so that it reesemble the QR code in the desktop version of the webpage using postions and margins.

@media all and (max-width: 700px) {
    .card{
      position: relative;
      left: -200px;
      top: 380px;

      height: 94%;
      width: 40%;
    }

    #qr{
      height: 500px;
      top: -40px;
    }

    h1{
      position: relative;
      top: -77px;
      left: 69px;

      font-size: 34px;
      justify-content: center;

      width: 390px;
      height: 30px;
    }

    #scan{
      margin-left: 90px;
      margin-top: 3px;

      position: relative;
      top: -20px;
      left: -12px;

      font-size: 21px;
      justify-content: center;

      width: 450px;
    }

    .attribution{
      margin-top: 400px;
      margin-left: -353px;
    }

I didn't go beyond max-width of 700px since this was my first real attempt of using media query and I'm still slowly learning how to apply responsive web design.

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

I do have some questions I want to ask.

• Is there a better way to center a div in this case?

I already mention how I wanted to try out other ways to center a div properly in the webpage. I'm satisfied with the end result I obtained, but I still want to ask if there is any other way to center a div more effectively or how could I refine the way I did it here.

• What else is there to responsive design I should learn and apply?

This question is staighforward. I've being wanting to understand responsive web design since I really like designing the looks of a webpage using HTML and CSS and I'm aware that learning responsive web design is important since most people use phones. What I mean by this is what other concepts of responsive web design should have in mind and what else is required to really understand responsive web design besides learning the basics of it and applying it to a webpage.

I will be eager to see what things I learn from everyone and also thanks for reading my first solution on this website.