Skip to content
OverviewSolutions
10
Comments
6
Carlos Henrique
@devriquesant

All comments

  • Carlos Henrique•200
    @devriquesant

    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 :)

  • Carlos Henrique•200
    @devriquesant

    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
  • Carlos Henrique•200
    @devriquesant

    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 :)

  • Carlos Henrique•200
    @devriquesant

    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
  • Carlos Henrique•200
    @devriquesant

    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
  • Carlos Henrique•200
    @devriquesant

    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 :)