Ecem Gokdogan

@ecemgo

All comments

Ezequiel Córdova Sotomayor• 870
@3eze3
Submitted about 1 year ago
I really liked this project, and I also wanted to experiment with some perspective effect when displaying the letter, you know if you have any suggestions and how to improve my code you can tell me by commenting, happy coding.
Interactive Card Rating (Scss/Js) 🧡
#accessibility#jss#sass/scss
3
Ecem Gokdogan• 9,380
@ecemgo
Posted about 1 year ago
The animation is awesome! 🤩
3
Andrewwangari• 110
@Andrewwangari
Submitted about 1 year ago
I redid this solution because I have now come to terms with responsiveness , I loved the outcome.
Flexbox , Box-model Bootstrap
3
Ecem Gokdogan• 9,380
@ecemgo
Posted about 1 year ago
Some recommendations regarding your code that could be of interest to you.

If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body

You can add the recommended color for the screen to the body

body { background: hsl(212, 45%, 89%); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; }

If you use max-width, the card will be responsive

You'd better update padding to give a gap between the content and the border of the card

.box3 { /* padding: auto; */ padding: 15px; /* border: 1px solid hsl(212, 35%, 85%); */ border-radius: 10px; /* width: 300px; */ max-width: 300px; /* height: 500px; */ background-color: hsl(0, 0%, 100%); }

In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img

img { /* width: 300px; */ width: 100%; border-radius: 5%; /* padding: 10px; */ }

You'd better update the padding of the p

p { /* padding: 20px; */ padding: 10px; }

You don't need to define .box2 and you can remove it

/* .box2 { border: 1px solid hsl(212, 35%, 85%); margin: 150px auto; width: 1500px; height: 700px; display: flex; align-items: center; justify-content: center; background-color: hsl(219, 71%, 75%); } */

Finally, the solution will be responsive if you follow the steps above

Hope I am helpful. :)
0
Jonah Ssegawa• 240
@devjhex
Submitted about 1 year ago
Qr code component using basic CSS
#bem#sass/scss
1
Ecem Gokdogan• 9,380
@ecemgo
Posted about 1 year ago
Some recommendations regarding your code that could be of interest to you.

If you use max-width, the card will be responsive and you can reduce the width a bit

You don't need to use margin if you use flexbox in the body

.qrComponent { /* width: 370px; */ max-width: 300px; /* margin-top: 3rem; */ /* margin-inline: auto; */ }

After updating like above, you don't need to use media queries for this solution because the solution will be responsive if you follow the steps above

Hope I am helpful. :)
Marked as helpful
0
Rafael Nunes• 30
@RafaelNunesg
Submitted about 1 year ago
all feedback is welcome thank you in advance.
qr-code-component-main solution using HTML and css
3
Ecem Gokdogan• 9,380
@ecemgo
Posted about 1 year ago
Some recommendations regarding your code that could be of interest to you.

If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body

body { background: hsl(212, 45%, 89%); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; }

If you use max-width, the card will be responsive and you can reduce the width a bit

You'd better update padding to give a gap between the content and the border of the card

.container { padding: 16px; /* margin: 6% auto 38% auto; */ max-width: 300px; /* width: 348px; */ /* height: 545px; */ }

In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img

img { width: 100%; /* width: 316px; */ /* margin: 16px 0px 16px 16px; */ border-radius: 8px; }

You'd better update the margin of the texts

h2 { /* margin: 10px 36px 10px 36px; */ margin: 20px 10px; }

p { /* margin: 10px 36px 10px 36px; */ margin: 10px 0 30px; }

Finally, the solution will be responsive if you follow the steps above

Hope I am helpful. :)
Marked as helpful
1

@emilioQuilodran

Submitted about 1 year ago

the only problem I had was the assets, I couldnt find a backgropund image similar. please your feedback is super important to me.

bye!!!

responsive qrcode using sass

Ecem Gokdogan• 9,380

@ecemgo

Posted about 1 year ago

Some recommendations regarding your code that could be of interest to you.

When you download the starter, there is a style-guide.md in the folder. You can use that reference for color, font-size, font-family etc.

If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body
For the background, you can use the recommended color in the body

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: hsl(212, 45%, 89%);
}

If you use max-width, the card will be responsive and you can increase the width a bit
You'd better update padding to give a gap between the content and the border of the card
You can add text-align: center to center texts

.main .card {
  /* width: 240px; */
  max-width: 300px;
  border-radius: 10px;
  margin: 0 auto;
  background-color: white;
  /* padding: 10px; */
  padding: 15px;
  text-align: center;
}

You can add font-size to the .card-title and update it in the card-text

.main .card .card-title {
  font-size: 20px;
}

.main .card .card-text {
  font-weight: 300;
  /* font-size: 12px; */
  font-size: 16px;
}

You don't need to use .main and .main .block and you can remove them

/* .main {
  position: relative;
  background-color: #DFDBE5;
  background-image: url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M82.42 180h-1.415L0 98.995v-2.827L6.167 90 0 83.833V81.004L81.005 0h2.827L90 6.167 96.167 0H98.996L180 81.005v2.827L173.833 90 180 96.167V98.996L98.995 180h-2.827L90 173.833 83.833 180H82.42zm0-1.414L1.413 97.58 8.994 90l-7.58-7.58L82.42 1.413 90 8.994l7.58-7.58 81.006 81.005-7.58 7.58 7.58 7.58-81.005 81.006-7.58-7.58-7.58 7.58zM175.196 0h-25.832c1.033 2.924 2.616 5.59 4.625 7.868C152.145 9.682 151 12.208 151 15c0 5.523 4.477 10 10 10 1.657 0 3 1.343 3 3v4h16V0h-4.803c.51.883.803 1.907.803 3 0 3.314-2.686 6-6 6s-6-2.686-6-6c0-1.093.292-2.117.803-3h10.394-13.685C161.18.938 161 1.948 161 3v4c-4.418 0-8 3.582-8 8s3.582 8 8 8c2.76 0 5 2.24 5 5v2h4v-4h2v4h4v-4h2v4h2V0h-4.803zm-15.783 0c-.27.954-.414 1.96-.414 3v2.2c-1.25.254-2.414.74-3.447 1.412-1.716-1.93-3.098-4.164-4.054-6.612h7.914zM180 17h-3l2.143-10H180v10zm-30.635 163c-.884-2.502-1.365-5.195-1.365-8 0-13.255 10.748-24 23.99-24H180v32h-30.635zm12.147 0c.5-1.416 1.345-2.67 2.434-3.66l-1.345-1.48c-1.498 1.364-2.62 3.136-3.186 5.14H151.5c-.97-2.48-1.5-5.177-1.5-8 0-12.15 9.84-22 22-22h8v30h-18.488zm13.685 0c-1.037-1.793-2.976-3-5.197-3-2.22 0-4.16 1.207-5.197 3h10.394zM0 148h8.01C21.26 148 32 158.742 32 172c0 2.805-.48 5.498-1.366 8H0v-32zm0 2h8c12.15 0 22 9.847 22 22 0 2.822-.53 5.52-1.5 8h-7.914c-.567-2.004-1.688-3.776-3.187-5.14l-1.346 1.48c1.09.99 1.933 2.244 2.434 3.66H0v-30zm15.197 30c-1.037-1.793-2.976-3-5.197-3-2.22 0-4.16 1.207-5.197 3h10.394zM0 32h16v-4c0-1.657 1.343-3 3-3 5.523 0 10-4.477 10-10 0-2.794-1.145-5.32-2.992-7.134C28.018 5.586 29.6 2.924 30.634 0H0v32zm0-2h2v-4h2v4h4v-4h2v4h4v-2c0-2.76 2.24-5 5-5 4.418 0 8-3.582 8-8s-3.582-8-8-8V3c0-1.052-.18-2.062-.512-3H0v30zM28.5 0c-.954 2.448-2.335 4.683-4.05 6.613-1.035-.672-2.2-1.16-3.45-1.413V3c0-1.04-.144-2.046-.414-3H28.5zM0 17h3L.857 7H0v10zM15.197 0c.51.883.803 1.907.803 3 0 3.314-2.686 6-6 6S4 6.314 4 3c0-1.093.292-2.117.803-3h10.394zM109 115c-1.657 0-3 1.343-3 3v4H74v-4c0-1.657-1.343-3-3-3-5.523 0-10-4.477-10-10 0-2.793 1.145-5.318 2.99-7.132C60.262 93.638 58 88.084 58 82c0-13.255 10.748-24 23.99-24h16.02C111.26 58 122 68.742 122 82c0 6.082-2.263 11.636-5.992 15.866C117.855 99.68 119 102.206 119 105c0 5.523-4.477 10-10 10zm0-2c-2.76 0-5 2.24-5 5v2h-4v-4h-2v4h-4v-4h-2v4h-4v-4h-2v4h-4v-4h-2v4h-4v-2c0-2.76-2.24-5-5-5-4.418 0-8-3.582-8-8s3.582-8 8-8v-4c0-2.64 1.136-5.013 2.946-6.66L72.6 84.86C70.39 86.874 69 89.775 69 93v2.2c-1.25.254-2.414.74-3.447 1.412C62.098 92.727 60 87.61 60 82c0-12.15 9.84-22 22-22h16c12.15 0 22 9.847 22 22 0 5.61-2.097 10.728-5.55 14.613-1.035-.672-2.2-1.16-3.45-1.413V93c0-3.226-1.39-6.127-3.6-8.14l-1.346 1.48C107.864 87.987 109 90.36 109 93v4c4.418 0 8 3.582 8 8s-3.582 8-8 8zM90.857 97L93 107h-6l2.143-10h1.714zM80 99c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm20 0c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6z' fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
  width: 100%;
  height: 100vh;
  padding-top: 5%;
} */

/* .main .block {
  box-shadow: 0 10px 20px #bbbbbb;
  background-color: rgb(148, 188, 214);
  width: 75%;
  margin: 0 auto;
  padding: 5% 0;
  text-align: center;
} */

Finally, you can remove media queries because the solution will be responsive if you follow the steps above

Hope I am helpful. :)

Marked as helpful

Rodrigo Oliveira Silva• 10

@RodrigooliveiraBRPR

Submitted about 1 year ago

HTML CSS

Ecem Gokdogan• 9,380

@ecemgo

Posted about 1 year ago

Some recommendations regarding your code that could be of interest to you.

HTML

The html structure should be like that:

<body>
  <main class="card">
   <img src="images/image-qr-code.png" alt="image-qr-code">
    <h1>Improve your front-end skills by building projects</h1>
    <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
  </main>
   <footer class="atribuition"Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="https://github.com/RodrigooliveiraBRPR">Rodrigo De Oliveira Silva</a>.
  </div>
</body>

If you want to use the recommended font-family for this project, you can add the following between the <head> tags in HTML file:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet">

CSS

After adding them to the HTML, you can add this font-family to the body
If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body

body {
  background-color: hsl(212, 45%, 89%);
  min-height: 100vh;
  align-items: center;
  font-size: 15px;
  /* font-family: "Marck Script", cursiva; */
  /* font-family: "Outfit", sem serifa; */
  /* display: flexbox; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: "Outfit", sans-serif;
}

If you use max-width, the card will be responsive

.card {
  max-width: 300px;
}

In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img

img {
  /* width: 96%; */
  width: 100%;
  border-radius: 20px;
}

You'd better update texts in this way:

h1 {
  color: hsl(218, 44%, 22%);
  margin: 20px 0;
  font-size: 20px;
  line-height: 1.3;
}

p {
  color: hsl(220, 15%, 55%);
  margin-bottom: 20px;
  line-height: 1.3;
}

You don't need to define .container and text and you can remove it

/* .container {
  max-width: 350px;
  margin: 0 auto;
} */

/* text {
  padding: 22px 10px;
} */

Finally, if you follow the steps above, the solution will be responsive.

Hope I am helpful. :)

Tufan Chandra Pandu• 10
@Tufanpondu
Submitted about 1 year ago
if I have a nested div then how can I fix both the outer div and inner div .because when I zoom out on web browser then my inner div is go out side of my outer div. how to fix it.
QR Code
1
Ecem Gokdogan• 9,380
@ecemgo
Posted about 1 year ago
Some recommendations regarding your code that could be of interest to you.

If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body

body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; background-color: hsl(212, 45%, 89%); }

When you use flexbox in the body, you don't need to use flexbox in the .inner to center the card

If you use max-width, the card will be responsive and you can increase the width a bit

You'd better add padding to give a gap between the content and the border of the card

.inner { /* height: 380px; */ /* width: 230px; */ max-width: 300px; background-color: hsl(0, 0%, 100%); border-radius: 14px; /* display: inline; */ /* align-items: center; */ /* justify-content: center; */ padding: 15px; }

In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img

.inner img { /* width: 210px; */ width: 100%; border-radius: 14px; /* margin: 10px 10px 10px; */ }

You'd better update font-size of texts

.inner h1 { /* font-size: 0.9rem; */ font-size: 1.4rem; text-align: center; padding: 10px 0; }

.inner p { font-size: small; text-align: center; padding: 10px; /* margin: 10px; */ margin-bottom: 20px; color: gray; }

You don't need to use .hero and .outer and you can remove them

/* .hero { height: 100vh; max-width: 1440px; background-color: hsl(175, 43%, 50%); display: flex; align-items: center; justify-content: center; } */ /* .outer{ display: flex; position: relative; height: 80vh; width:90vw; background-color: hsl(212, 45%, 89%); align-items: center; justify-content: space-between; } */

Finally, you can remove media queries because the solution will be responsive if you follow the steps above

Hope I am helpful. :)
0
Alex• 110
@JackNotro
Submitted about 1 year ago
QR Code Challenge Solution
#contentful#web-components
2
Ecem Gokdogan• 9,380
@ecemgo
Posted about 1 year ago
Some recommendations regarding your code that could be of interest to you.

If you use max-width, the card will be responsive and you can reduce the width a bit

.container { /* width: 400px; */ max-width: 300px; }

Then, you'd better reduce the font-size of texts but it's up to you.

Hope I am helpful. :)
Marked as helpful
1
Fidel A Hernandez Jr• 130
@FHernandez08
Submitted about 1 year ago
One of my main difficulties was using the media queries and making the proper adjustments based on the width of the screens being viewed in.

I think the only area of the code that I'm unsure of would be the media queries so if you are reviewing this, please I would like to have feedback on what I can improve on. Especially over the media queries on css.
QR Code Responsive Website
3
Ecem Gokdogan• 9,380
@ecemgo
Posted about 1 year ago
Some recommendations regarding your code that could be of interest to you.

You can add body to the CSS. Additionally, if you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body

body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; background-color: hsl(212, 45%, 89%); }

When you use flexbox in the body, you don't need to use flexbox and margin in the .qr-code to center the card

If you use max-width, the card will be responsive and you can reduce the width a bit

You'd better update padding to give a gap between the content and the border of the card

You add text-align: center here to center the texts

.qr-code { /* width: 450px; */ /* height: 700px; */ /* margin-top: 30%; */ /* margin-bottom: 25%; */ max-width: 300px; padding: 15px; text-align: center; }

In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img

img { border-radius: 20px; /* height: 400px; */ /* width: 400px; */ /* margin-top: 25px; */ width: 100%; }

You'd better update font-size of texts

.bold-text { font-weight: 700; /* font-size: 30px; */ font-size: 20px; } .min-text { font-weight: 300; /* font-size: 20px; */ font-size: 16px; }

You don't need to use .container and p and you can remove them

/* .container { display: grid; justify-content: center; text-align: center; font-family: "Montserrat", sans-serif; background-color: hsl(212, 45%, 89%); min-height: 100%; min-width: 1024px; width: 100%; height: auto; position: fixed; top: 0; left: 0; } */ /* p { text-align: center; margin: 40px; } */

Finally, you can remove media queries because the solution will be responsive if you follow the steps above

Hope I am helpful. :)
0
Abbaz• 80
@abbashcs18
Submitted about 1 year ago
QR-Component-using-CSS-Flexbox
2
Ecem Gokdogan• 9,380
@ecemgo
Posted about 1 year ago
Some recommendations regarding your code that could be of interest to you.

You don't need to use .container and you can remove it. You'd better add the background color for the screen to the body, thus you don't lose the color.

/* .container { display: flex; height: 700px; justify-content: center; align-items: center; background-color: var(--light-gray); width: 1440px; box-shadow: 5px 10px 50px rgba(0, 0, 0, 0.3); } */

body{ background-color: var(--light-gray); }

You don't need to use justify-items: center for the .card

If you use max-width, the card will be responsive

.card { /* width: 300px; */ max-width: 300px; /* justify-items: center; */ }

In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img

.card > img { /* width: 300px; */ width: 100%; }

Finally, you don't need to use media queries because the solution will be responsive if you follow the steps above.

Hope I am helpful. :)
1
Vishakha Roy• 80
@VishRoy
Submitted about 1 year ago
QR code challenge
3
Ecem Gokdogan• 9,380
@ecemgo
Posted about 1 year ago
Some recommendations regarding your code that could be of interest to you.

If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body

body{ display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; }

When you use flexbox in the body, you don't need to use flexbox and margin-top in the main to center the card

If you use max-width, the card will be responsive

main { /* width: 18%; */ max-width: 300px; /* margin-top: 100px; */ }

In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img

img { width: 100%; /* height: 250px; */ /* width: 250px; */ border-radius: 10px; }

Finally, if you follow the steps above, the solution will be responsive.

Hope I am helpful. :)
Marked as helpful
1
ABDULAZIZ NOREDIN QADMOR• 60
@azeezqad
Submitted about 1 year ago
QR code component challenge on Frontend Mento
1
Ecem Gokdogan• 9,380
@ecemgo
Posted about 1 year ago
Some recommendations regarding your code that could be of interest to you.

HTML

You'd better update the <main> structure in the html to prevent the deterioration

<main> <img src="./images/image-qr-code.png" alt="QR code image"> <h1> Improve your front-end skills by building projects </h1> <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p> </main>

CSS

If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body

body{ display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; }

When you use flexbox in the body, you don't need to use flexbox and margin in the main to center the card

If you use max-width, the card will be responsive and you can reduce the width a bit

main{ /* width: 350px; */ max-width: 300px; /* margin: 200px auto 20px auto; */ }

In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img

img{ border-radius: 8px; width: 100%; }

You'd better update texts in this way

h1{ /* font-size: 28px; */ font-size: 20px; font-weight: bold; color: var(--dark-blue); }

p{ /* font-size: 20px; */ font-size: 16px; color: var(--grayish-blue); }

Finally, if you follow the steps above, the solution will be responsive.

Hope I am helpful. :)
Marked as helpful
0
devAelo• 30
@devAelo
Submitted about 1 year ago
Can you give me some feedback i'm a beginner thank you!
Qr code components solution
4
Ecem Gokdogan• 9,380
@ecemgo
Posted about 1 year ago
Some recommendations regarding your code that could be of interest to you.

If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body

You can use the recommended background color for the screen

body { /* background-color: whitesmoke; */ font-family: 'Outfit', sans-serif; background-color: hsl(212, 45%, 89%); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; }

If you use max-width, the card will be responsive and you can reduce the width a bit

.card { /* max-width: 350px; */ max-width: 300px; }

You don't need to use the styles below for the img

.image { /* margin-top: 0px; */ /* text-align: center; */ /* display: block; */ }

Also, you don't need to use .container in order to center the card and you can remove it

/* .container { display: flex; align-items: center; justify-content: center; padding-top:100px; } */

Finally, you don't need to use media queries because the solution will be responsive if you follow the steps above. I recommend you don't use the styles that don't work.

Hope I am helpful. :)
Marked as helpful
0
Ayakhaled0197• 180
@Ayakhaled0197
Submitted about 1 year ago
challenge solved successfully using some HTML & css , check it out
#express#accessibility
2
Ecem Gokdogan• 9,380
@ecemgo
Posted about 1 year ago
Some recommendations regarding your code that could be of interest to you.

In order to fix the accessibility issues:

You need to replace <div class="box"> with the <main class="box"> tag. You'd better use Semantic HTML, and you can also reach more information about it from Using Semantic HTML Tags Correctly.

Each main content needs to include at least h1 element so you should use one <h1> element in the <main> tag. You can replace your <h2>Improve your front-end skills by building projects</h2> element with the <h1>Improve your frontend skills by building projects</h1> element.

After committing the changes on GitHub and you need to deploy it as a live site. Finally, you should click generate a new report on this solution page to clear the warnings.

Hope I am helpful. :)
Marked as helpful
0
chanchala-amar• 160
@chanchala-amar
Submitted about 1 year ago
Mobile first responsive page using CSS grid
2
Ecem Gokdogan• 9,380
@ecemgo
Posted about 1 year ago
Some recommendations regarding your code that could be of interest to you.

HTML

In order to fix the accessibility issues:

You need to replace <div class="container"> with the <main class="container"> tag. You'd better use Semantic HTML, and you can also reach more information about it from Using Semantic HTML Tags Correctly.

Each main content needs to include at least h1 element so you should use one <h1> element in the <main> tag. You can replace your <p class="headline-text">Improve your frontend skills by buiding projects</p> element with the <h1 class="headline-text">Improve your frontend skills by buiding projects</h1> element.

The <img> tag should include alt ="" attribute. You can apply like this:

<img src="./images/image-qr-code.png" class="qr-code-img" alt="qr-code"/>

After committing the changes on GitHub and you need to deploy it as a live site. Finally, you should click generate a new report on this solution page to clear the warnings.

CSS

In order to center texts, you'd better add text-align: center to the .container

.container{ text-align: center; }

Hope I am helpful. :)
Marked as helpful
0
akdhiman358• 30
@akdhiman358
Submitted about 1 year ago
I learned a new thing about flexBox by building this project. Sometimes your justify-content/align-items don't work in flex container, then you should try giving height or width to the container in order to fix this.
Used simple css rules and flexbox to complete this project.
1
Ecem Gokdogan• 9,380
@ecemgo
Posted about 1 year ago
Some recommendations regarding your code that could be of interest to you.

HTML

In order to fix the accessibility issues:

You need to replace <div class="container"> with the <main class="container"> tag. You'd better use Semantic HTML, and you can also reach more information about it from Using Semantic HTML Tags Correctly.

Each main content needs to include at least h1 element so you should use one <h1> element in the <main> tag. You can replace your <p class="heading">Improve your frontend skills by buiding projects</p> element with the <h1 class="heading">Improve your frontend skills by buiding projects</h1> element.

After committing the changes on GitHub and you need to deploy it as a live site. Finally, you should click generate a new report on this solution page to clear the warnings.

CSS

If you want, you can use this recommended background color in the body

body { /* background-color: rgb(206, 231, 253); */ background-color: hsl(212, 45%, 89%); }

Hope I am helpful. :)
Marked as helpful
1
Dominic Ewe• 10
@sneakynicky
Submitted about 1 year ago
I had difficulty in trying to figure out how to tackle the solution. Overall I think I did it okay, but the solution I thought of seems to be fairly hacky probably because I am inexperienced.

How should I go about learning CSS concepts, applying and using them to solve real world problems? What are some best practices I should also implement throughout my learning?
QR-Code-Component Challenge
5
Ecem Gokdogan• 9,380
@ecemgo
Posted about 1 year ago
Some recommendations regarding your code that could be of interest to you.

If you use max-width, the card will be responsive and you can increase the width a bit

You'd better update padding to give a gap between the content and the border of the card

You don't need to use flexbox here. If the styles don't work, I recommend you don't use them

.card { /* width: 220px; */ /* height: 350px; */ max-width: 300px; /* padding: .5em; */ padding: 15px; /* display: flex; */ /* flex-direction: column; */ }

In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img

img { width: 100%; /* width: 200px; */ /* height: 200px; */ border-radius: 10px; /* margin-top: .25rem; */ }

You'd better update and add font-size and margin for the texts

p.header { font-size: 20px; margin: 10px 0; }

p.content-text { /* font-size: 12px; */ font-size: 16px; margin-bottom: 20px; }

You don't need to use .card--title and .card--text and you can remove them

/* .card--title { padding: .5em; } */ /* .card--text { padding: 0 .5em; } */

Finally, if you follow the steps above, the solution will be responsive.

Hope I am helpful. :)
1
ytsai4• 20
@ytsai4
Submitted about 1 year ago
QR code component solution using Flexbox
3
Ecem Gokdogan• 9,380
@ecemgo
Posted about 1 year ago
Some recommendations regarding your code that could be of interest to you.

In order to fix the accessibility issues:

You need to replace <div class="container"> with the <main class="container"> tag and <div class="attribution"> with the <footer class="attribution"> tag. You'd better use Semantic HTML, and you can also reach more information about it from Using Semantic HTML Tags Correctly.

Each main content needs to include at least h1 element so you should use one <h1> element in the <main> tag. You can replace your <p class="title">Improve your frontend skills by buiding projects</p> element with the <h1 class="title">Improve your frontend skills by buiding projects</h1> element.

After committing the changes on GitHub and you need to deploy it as a live site. Finally, you should click generate a new report on this solution page to clear the warnings.

Hope I am helpful. :)
0
Sam-52• 20
@Sam-52
Submitted about 1 year ago
This is my first solotion and first project. I do not know if this is the best way to fix this problem. I think location of the paragraph text below is not good enough. Any feedback is welcome.
Desktop Solotion for QR Code Challenge
#foundation
2
Ecem Gokdogan• 9,380
@ecemgo
Posted about 1 year ago
Some recommendations regarding your code that could be of interest to you.

If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body

body { background-color: hsl(212, 45%, 89%); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; }

When you use flexbox in the body, you don't need to use top, left and position in the .image to center the card

If you use max-width, the card will be responsive

.image { max-width: 300px; /* width: 305px; */ /* position: relative; */ /* top: 20vh; */ /* left: 80vh; */ }

In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img

.image img { width: 100%; /* width: 305px; */ /* height: fit-content; */ }

Finally, the solution will be responsive if you follow the steps above.

Hope I am helpful. :)
Marked as helpful
0
SaadiCodes• 10
@SaadiCodes
Submitted about 1 year ago
QR Code Project Using Flexbox
1
Ecem Gokdogan• 9,380
@ecemgo
Posted about 1 year ago
Some recommendations regarding your code that could be of interest to you.

If you use max-width, the card will be responsive and you can reduce the width a bit

You'd better add padding to give a gap between the content and the border of the card

You can update border-radius if you want

.container { /* border-radius: 2rem; */ border-radius: 5%; /* width: 433px; */ max-width: 300px; padding: 15px; }

In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img

img { /* width: 400px; */ width: 100%; border-radius: 10px; }

You don't need to use flexbox for h1 you can remove it. I recommend you don't use the styles that don't work.

h1 { /* display: flex; */ /* align-self: center; */ font-size: 20px; }

You don't need to use .content and you can remove it

/* .content { display: flex; flex-direction: column; align-items: center; margin: 15px; } */

Finally, the solution will be responsive if you follow the steps above.

Hope I am helpful. :)
Marked as helpful
1
500288• 70
@500288
Submitted about 1 year ago
All comments are welcome thank you in advance
qr responsive page using box model, media query and flex
1
Ecem Gokdogan• 9,380
@ecemgo
Posted about 1 year ago
Some recommendations regarding your code that could be of interest to you.

If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body

body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; }

If you use max-width, the card will be responsive and you can increase the width a bit

You'd better add text-align: center to center texts

.container { /* width: 250px; */ /* height: auto; */ max-width: 300px; text-align: center; }

You'd better update the texts in this way:

h3 { color: hsl(218, 44%, 22%); font-weight: 700; /* padding-left: 20px; */ font-size: 20px; }

p { font-size: 15px; color: hsl(220, 15%, 55%); /* padding: 2px; */ /* text-align: center; */ padding-bottom: 20px; }

You don't need to use .maincon and you can remove it

/* .maincon { height: 100vh; display: grid; place-items: center; } */

Finally, you can remove the media queries because the solution will be responsive if you follow the steps above.

Hope I am helpful. :)
Marked as helpful
0

salemsaada• 10

@salemsaada

Submitted about 1 year ago

first web qr page

Ecem Gokdogan• 9,380

@ecemgo

Posted about 1 year ago

Some recommendations regarding your code that could be of interest to you.

HTML

You'd better update the html structure in this way:

<body>
  <main>
    <img src="image-qr-code.png" alt="QR image"/>
    <h1> Improve your front-end skills by building projects</h1>
    <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
  </main>
  <footer>
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">Salem Saada</a>.</font>
  </footer>
</body>

CSS

If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body

body{
   background-color:hsl(212, 45%, 89%);
   font-family: calibri ;
   display: flex;
   flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

I recommend you use main or a class name you will give instead of using div. Otherwise, it might cause some problems in the style.
You'd better update padding to give a gap between the content and the border of the card

main {  
  max-width: 300px; 
  margin: 0 auto;
  text-align: center;  
  background-color: white; 
  border-radius: 5%;
  padding: 15px; 
  /* padding: 1%; */
  /* margin-top: 30px; */
}

In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img

img{
   width: 100%;
   border-radius: 5%;
}

You'd better add these styles for texts

h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 1rem 0;
}

p {
  color: gray;
  margin-bottom: 2rem;
}

Finally, if you follow the steps above, the solution will be responsive.

Hope I am helpful. :)

Marked as helpful

Gabriel Carlos• 80
@gabrielcarlos-dev
Submitted about 1 year ago
QR CODE
2
Ecem Gokdogan• 9,380
@ecemgo
Posted about 1 year ago
Some recommendations regarding your code that could be of interest to you.

The background color is awesome, I'll use it for the dark mode. :)

If you use max-width, the card will be responsive and you can reduce the width a bit

You'd better update padding to give a gap between the content and the border of the card

.card { /* display: block; */ /* max-width: 329px; */ max-width: 300px; padding: 15px; }

You'd better update the img in this way

.container-img img { /* height: 100%; */ /* object-fit: cover; */ /* border-top-left-radius: 10px; */ /* border-bottom-left-radius: 10px; */ width: 100%; border-radius: 10px; }

You'd better update h1 in this way:

.container-content h1 { /* font-size: x-large; */ /* padding-bottom: 1rem; */ /* padding-bottom: 1rem; */ padding: 1rem 0; font-size: 1.3rem; }

You can add padding-bottom to give a gap between p and the bottom of the card

.container-content p { color: hsl(220, 15%, 55%); font-size: 14px; padding-bottom: 2rem; }

Finally, you don't need to use media queries and you can remove them because the solution will be responsive if you follow the steps above.

Hope I am helpful. :)
0
oo2smh• 100
@oo2smh
Submitted about 1 year ago
💡 Lessons

Basic alignment (centering everything using Flexbox)

Naming troubles (Tried my hand at BEM)

Differentiated between wrappers (decorative, background) vs containers (layout)

box-shadow Subtlety is king!

QR Code [Flexbox, Inline CSS,
1
Ecem Gokdogan• 9,380
@ecemgo
Posted about 1 year ago
Some recommendations regarding your code that could be of interest to you.

If you use max-width, the card will be responsive and you can reduce the width a bit

.container { /* max-width: 320px; */ max-width: 300px; }

In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add max-width: 100% to the img

img { /* max-width: 80%; */ max-width: 100%; }

You'd better add font-size and margin to the h1

h1 { font-size: 1.2rem; margin: 1rem 0; }

Finally, you don't need to use media queries for this solution because the solution will be responsive if you follow the steps above.

/* @media(max-width: 355px) { h1 { font-size: 1.2em; } } */

Hope I am helpful. :)
Marked as helpful
1

Ecem Gokdogan

All comments

Interactive Card Rating (Scss/Js) 🧡

Flexbox , Box-model Bootstrap

Qr code component using basic CSS

qr-code-component-main solution using HTML and css

responsive qrcode using sass

HTML CSS

QR Code

QR Code Challenge Solution

QR Code Responsive Website

QR-Component-using-CSS-Flexbox

QR code challenge

QR code component challenge on Frontend Mento

Qr code components solution

challenge solved successfully using some HTML & css , check it out

Mobile first responsive page using CSS grid

Used simple css rules and flexbox to complete this project.

QR-Code-Component Challenge

QR code component solution using Flexbox

Desktop Solotion for QR Code Challenge

QR Code Project Using Flexbox

qr responsive page using box model, media query and flex

first web qr page

QR CODE

QR Code [Flexbox, Inline CSS,