All comments

Hugo8814• 150
@Hugo8814
Submitted about 1 year ago
any feed back is welcome, thanks
my solution
2
Carlos Henrique• 200
@devriquesant
Posted about 1 year ago
Hello Hugo8814

Congratulations for completing this challenge!!

✏️ Here are some tips and suggestions for this and your future projects ;) ✏️

1. 📱 Build a responsive web page:

The use of px unit to dimension your components in the page gives it a appearance of static.

To build a more responsive one, you should start to use relative length units to adequate the page components to a device screen.

In your case, using px to dimension the mobile version of your web page will create the same view in all devices, but keep in mind that they have different sizes, so content could not appear entirely.

To deeper details, take a look at it

2. 🚀 CSS Layout:

It's common in a web page you see every kind of elements such as images, titles, paragraphs and etc... they are disposed in different manners all over the page

Using CSS Layouts you can distribute theses elements in your page and do it according to what you want to do

Center a element?

You can magin:auto an element or do a display:flex, with center alignment, in the parent element!!

Dispose in a cols and rows?

You can do it using display:grid!!

That are a lot of options to be explored, other than positioning your elements based on a px.

Here is a good way to start

Overall your project is great and keep coding, I'm sure you will discover new things and become even better

Here, take a star for achieving it: 🌟 <- it's a glowing star if you're seeing a rectangle :)
0
Phoebe• 30
@Lord-Nickelbottoms
Submitted about 1 year ago
Question about best practices:

When should each unit (em, rem, %, vh/vw and px) be used?

Why does auto work on some properties and not on others? Does it depend on the element being a block element and inline?

Everything about Aria stuff when it comes to accessibility

Thanks <3
QR component viewer using vanilla HTML and CSS
1
Carlos Henrique• 200
@devriquesant
Posted about 1 year ago
Hello Lord-Nickelbottoms

Congratulations for completing this challenge!!

✏️ After answering your questions, I want to give you some tips and suggestions for this and your future projects ;) ✏️

1. 🚀 Contain your "main" content in a "main" tag:

<main> is a semantic element from HTML which provides accessibility and organization for your web page;

semantic elements provides detailed info about the contents in your page.

Others semantic elements includes: <header>, <footer>, <figure>, <figcaption> ...

To implement this, you should exchange the <div class="card"> for <main> and wrap all the necessary and main content of your page

2. 🌐 Building an accessible web page:

There are a lot of users of all kinds around the world! in order to make everyone able to use the program you just made you could provide some accessibility. But how?

There are a lot of ways to make it, There are the semantic elements and also the "Aria stuff" that you've said.

2.1. Aria Stuff:

Aria properties are used to give additional info about the semantic and accessibility of a webpage content to assistive technology users.

There are a lot of aria properties as: aria-label, aria-hidden, aria-expanded, and each one of them creates an exclusive feature to meet with the needs of these users.

2.2. Semantic elements:

aria properties are good but should not be overused.

They don't override the good practice of using semantic HTML elements

For this, get used to write semantic elements in your HTML file to give more accuracy of the things you do and want to give to your users.

2.3. 👍 Your good practices 👍:

In your project I see you you've used the alt attribute for accessiblity on the <img> tag

Also used an arial-label that with the help of a screen reader, will describe the element to the user.

These are real good practices, as they help users to understand what is your page and what is does have!

3. 📱 Building a responsive web page:

The use of px unit, to dimension your components in the page, gives it a appearance of static.

To build a more responsive one, you should start to use relative length units to adequate the page components to a device screen.

To deeper details, take a look at it

3.1. The units:

em and rem: These units are used to define the font-size, margin and the fill of elements, but em is relative to its parent element and rem to the <html> root element

%: is used to set a value relative to the parent element, unless the value you set as auto has the position set as absolute.

vw, vh, vmin and vmax: vw and vh are units set relative to the viewport's width and height. 1vw and 1vh is 1% of its correspondent viewport. vmin and vmax is viewport's smaller dimension and larger dimension

px: as already said, gives a appearance of static, as the webpage has a kind of rule the set the metric in the page sized in pixels, so exchanging between devices, a button element of width 100px will remain with 100px in all devices.

3.2. Auto:

Yes, not all properties can be set as auto, and the type of display the element can affect it.

Simply, the auto key-word will tell the browser to calculate the property based on its parent.

If a element has a display:block, width and height as auto will fill all the the available space.

If a element has a display:inline, width cannot be set explicitly as it's calculated based on the element content, and height with auto value will take the default height.

Sorry about all this stuff, really big, isn't it?

By the way, your project is really good and keep coding, I'm sure you will discover new things and become even better

Here, take a star for achieving it: 🌟 <- it's a glowing star if you're seeing a rectangle :)
Marked as helpful
1
Ayoola Emmanuel• 10
@Ayoola-Emmanuel
Submitted about 1 year ago
Please, I can't seem to get the media query right. Can anyone help?
QR Code Component
1
Carlos Henrique• 200
@devriquesant
Posted about 1 year ago
Hello Ayoola-Emmanuel

Congratulations for completing this challenge!!

✏️ Here is a possible answser to your question, but before, here are some tips and suggestions for this and your future projects ;) ✏️

1. 🚀 Contain your "main" content in a "main" tag:

<main> is a semantic element from HTML which provides accessibility and organization for your web page;

semantic elements provides detailed info about the contents in your page.

Others semantic elements includes: <header>, <footer>, <figure>, <figcaption> ...

To implement this, you should exchange the <div class="book"> for <main> and wrap all the necessary and main content of your page

Start practising it and you will be more familiarized to do it in future projects.

2. 📱 Build a responsive web page:

The use of px unit to dimension your components in the page gives it a appearance of static.

To build a more responsive one, you should start to use relative length units to adequate the page components to a device screen.

That's why your media query is not working!!!

You made it work in the screen dimension in a certain range, but there is a lack of use of these relative units, as vw or vh, that makes the web page more responsive, try it with few components like a div and then expore to more components! :)

To deeper details, take a look at it

Overall you did a good job!! Keep coding!! I'm sure you will discover new things and become even better

Here, take a star for achieving it: 🌟 <- it's a glowing star if you're seeing a rectangle :)
0
Pauullamm• 20
@Pauullamm
Submitted about 1 year ago
Not sure how to position the attribution div such that it does not overlap with the result summary when the window changes size...

I also feel like my use of divs may have been excessive, as it's starting to feel a bit messy with all the different class names
Results Summary Component
1
Carlos Henrique• 200
@devriquesant
Posted about 1 year ago
Hello pauullamm

Congratulations for completing this challenge!!

✏️ Here are some tips and suggestions for this and your future projects ;) ✏️

1. 🚀 Contain your "main" content in a "main" tag:

<div> do is a joker element and can be to a general container, but it does not provide, alone, a semantic value.

<main> is a semantic element from HTML which provides accessibility and organization for your web page;

Semantic elements provides detailed info about the contents in your page.

Others semantic elements includes: <header>, <footer>, <figure>, <figcaption> ...

To implement this, you should exchange the <div class="outerouterContainer"> for <main> and wrap all the necessary and main content of your page.

1.1. ✅ Use the right attributes:

I noticed you used fixed position attribute to keep the contents in your page.

position: fixed; maintains the element fixed in a certain position of the page and it won't move.

🧪 As a experiment you should try putting the body height with 100000px and see what happens as you scroll down 🧪

As your content is right there on the screen and it's needed to be responsive with the screen, position is not necessary to be set, but you can adjust with the display property and the values you give to them.

2. 📱 Build a responsive web page:

Use px unit to dimension your components in the page gives it a appearance of static.

To build a more responsive one, you should start to use relative length units to adequate the page components to a device screen.

To deeper details, take a look at it

❓ THE PROBLEM ❓

The div.attribution element won't fit the right and will be still overlaping the main content if it doesn't have a container to set it in the right place.

This can be done by using <footer> element and extend it to the screen width and set the div.attribution in the center. (It is just a pobbile solution) :)

Overall you did great with this project, keep coding! I'm sure you will discover new things and become even better

Here, take a star for achieving it: 🌟 <- it's a glowing star if you're seeing a rectangle :)
Marked as helpful
0
Rodrigo Beckmann• 20
@rodrigobeckmann
Submitted about 1 year ago
How i can do it better? not sure if this will work perfect in any situation.
qr code componenet using html and css
2
Carlos Henrique• 200
@devriquesant
Posted about 1 year ago
Hello @rodrigobeckmann

Congratulations for completing this challenge!!

✏️ Here are some tips and suggestions for this and your future projects ;) ✏️

1. 🚀 Contain your "main" content in a "main" tag:

<main> is a semantic element from HTML which provides accessibility and organization for your web page;

semantic elements provides detailed info about the contents in your page.

Others semantic elements includes: <header>, <footer>, <figure>, <figcaption> ...

To implement this, you should exchange the <div class="main"> for <main> and wrap all the necessary and main content of your page

2. 📱 Build a responsive web page:

Use px unit to dimension your components in the page makes it a appearance of static.

To build a more responsive one, you should start to use relative length units to adequate the page components to a device screen.

To deeper details, take a look at it

3. 🌐 Build an accessible web page:

There are a lot of users of all kinds around the world! in order to make everyone able to use the program you just made you could provide some accessibility. But how?

The <img> tag has the alt property which helps screen readers to get all the content and info in your page.

It’s simple, just add an alt based on description of the image as: <img src=”cat.jpg” alt=”A cute cat”>

Overall your project is great and keep coding, I'm sure you will discover new things and become even better

Here, take a star for achieving it: 🌟 <- it's a glowing star if you're seeing a rectangle :)
Marked as helpful
0
Tenxhy• 10
@Tenxhy
Submitted about 1 year ago
Why the text goes to the next line creating 3 lines when I see the page full screen but when the page is smaller it remains 2 lines?
QR Code with description page using CSS FlexBox
1
Carlos Henrique• 200
@devriquesant
Posted about 1 year ago
Hello Tenxhy

Congratulations for completing this challenge!!

After answering your question, I want to give you some tips and suggestions for your next projects ;)

1. 🚀 Contain your "main" content in a "main" tag:

<main> is a semantic element from HTML which provides accessibility and organization for your web page;

semantic elements provides detailed info about the contents in your page.

Others semantic elements includes: <header>, <footer>, <figure>, <figcaption> ...

To implement this, you should exchange the <div class="main"> for <main>

2. ⚡️ Split the concerns:

You used the element inside your html file, that's fine as you wrote a small quantity of CSS rules, but it's good to start practising to split it into a different file as the projects become bigger.

3. 📱 Build a responsive web page:

I see in your project you used the px unit to dimension your components in the page.

To build a more responsive one, you should start to use relative length units to adequate the page components to a device screen.

4. 🎯 Right use of relative length units: - (here's the answer)

As you mentioned:

When fullscreen: the text goes to the next line creating 3 lines; When smaller: it remains 2 lines;

That happens because of the use of the padding on .writings class, it's written like this:

.writings { padding: 0 2vw; }

The vw unit is equivalent to 1% of the viewport's width.

As you put 2vw (2% of view's width) for padding, it will become larger as the screen increases.

Increasing the padding means less space on its element, thus making the text inside break a line and going to the next one.

Solution:

As you used in this project a absolute length unit in this case px, you should define the padding also with px not with vw. 20px should be fine :)

Suggestion (again)

But it would be nicer if you implement everything with relative length unit 😄

Overall your project is great and keep coding, I'm sure you will discover new things and become better and better

Here, take a star for achieving it: 🌟 <- it's a glowing star if you're seeing a rectangle :)
1

Carlos Henrique

All comments

my solution

QR component viewer using vanilla HTML and CSS

QR Code Component

Results Summary Component

qr code componenet using html and css

QR Code with description page using CSS FlexBox