Skip to content
OverviewSolutions
7
Comments
87
RabbitMaid
@Agbortoko

All comments

  • RabbitMaidβ€’1,020
    @AgbortokoPosted over 1 year ago

    ** It already looks good enough, work now on the background and font**

    Also you can take note of the following

    • HTML5 elements such as <main>, <nav>, <header>, <footer>, <section>, <aside> act as landmarks, or special regions on the page to which screen readers and other assistive technologies can jump. By using landmark elements, you can dramatically improve the navigation experience on your site for users of assistive technology (Users with disabilities) .

    You can use the <div> for sub items within landmarks like <section>. In other words for containers or sections in your HTML you can use the <section> tag if you want to nest in sub items <div>.

    Landmarks such as the <section> may actually require that you specify a heading within. In other words if the section has no heading it may throw an error when checked by an accessibility tool.

    It is advisable that you place all your main site content in a landmark element <main> Here is an Accessibility Evaluation Tool to check your webpage for any errors or warnings related to landmarks.

    There exist an attribution <div> that comes with the frontendmentor starter kit. You will have to wrap this <div> in a <footer> tag

    Read

    I hope you find the above solution useful! πŸ˜„ Nevertheless, the solution you submitted is great! Happy coding!

    0
  • RabbitMaidβ€’1,020
    @AgbortokoPosted over 1 year ago

    Great Job!

    Just a little tip for you!

    • HTML5 elements such as <main>, <nav>, <header>, <footer>, <section>, <aside> act as landmarks, or special regions on the page to which screen readers and other assistive technologies can jump. By using landmark elements, you can dramatically improve the navigation experience on your site for users of assistive technology (Users with disabilities) .

    You can use the <div> for sub items within landmarks like <section>. In other words for containers or sections in your HTML you can use the <section> tag if you want to nest in sub items <div>.

    Landmarks such as the <section> may actually require that you specify a heading within. In other words if the section has no heading it may throw an error when checked by an accessibility tool.

    It is advisable that you place all your main site content in a landmark element <main> Here is an Accessibility Evaluation Tool to check your webpage for any errors or warnings related to landmarks.

    There exist an attribution <div> that comes with the frontendmentor starter kit. You will have to wrap this <div> in a <footer> tag

    Read

    • W3schools Accessibility Landmarks Notes for more information.

    • MDN Web docs notes for more information.

    • Also always remember to put that alternative text for your images. In other words always set the alt attribute. For this helps search engines understand what the image is all about. A short description will do.

     <img src="images/image-qr-code.png" alt="Short Image Description">

    I hope you find the above solution useful! πŸ˜„ Nevertheless, the solution you submitted is great! Happy coding!

    0
  • RabbitMaidβ€’1,020
    @AgbortokoPosted over 1 year ago

    Excellent Job checkout the notes below to make your work more perfect

    • HTML5 elements such as <main>, <nav>, <header>, <footer>, <section>, <aside> act as landmarks, or special regions on the page to which screen readers and other assistive technologies can jump. By using landmark elements, you can dramatically improve the navigation experience on your site for users of assistive technology (Users with disabilities) .

    You can use the <div> for sub items within landmarks like <section>. In other words for containers or sections in your HTML you can use the <section> tag if you want to nest in sub items <div>.

    Landmarks such as the <section> may actually require that you specify a heading within. In other words if the section has no heading it may throw an error when checked by an accessibility tool.

    It is advisable that you place all your main site content in a landmark element <main> Here is an Accessibility Evaluation Tool to check your webpage for any errors or warnings related to landmarks.

    There exist an attribution <div> that comes with the frontendmentor starter kit. You will have to wrap this <div> in a <footer> tag

    Read

    I hope you find the above solution useful! πŸ˜„ Nevertheless, the solution you submitted is great! Happy coding!

    Marked as helpful
    1
  • RabbitMaidβ€’1,020
    @AgbortokoPosted over 1 year ago

    Hello! Good job starting this exercise

    As it is your first try as you indicated, you should try to be patient all through! Do not hurry for this is going to not only give you experience but will also help you understand core concepts in web design.

    How to get the most out of frontend Mentor

    Below are some things you can note during the process of carrying out this exercise

    Firstly you need to understand more about css layouts :- MDN CSS Layout notes

    • Before the Flexbox Layout module, there were four layout modes:

      Block, for sections in a webpage Inline, for text Table, for two-dimensional table data Positioned, for explicit position of an element not counting the margin positioning (Still perfect in some cases)

    The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

    learn Flexbox here

    The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

    learn CSS Grid Layout here

    Also you could checkout the simple guide below that shows different ways of perfect centering in css

    How to

    • Also HTML5 elements such as <main>, <nav>, <header>, <footer>, <section>, <aside> act as landmarks, or special regions on the page to which screen readers and other assistive technologies can jump. By using landmark elements, you can dramatically improve the navigation experience on your site for users of assistive technology (Users with disabilities) .

    You can use the <div> for sub items within landmarks like <section>. In other words for containers or sections in your HTML you can use the <section> tag if you want to nest in sub items <div>.

    Landmarks such as the <section> may actually require that you specify a heading within. In other words if the section has no heading it may throw an error when checked by an accessibility tool.

    It is advisable that you place all your main site content in a landmark element <main> Here is an Accessibility Evaluation Tool to check your webpage for any errors or warnings related to landmarks.

    There exist an attribution <div> that comes with the frontendmentor starter kit. You will have to wrap this <div> in a <footer> tag

    Read

    I hope you find the above solution useful! πŸ˜„ Nevertheless, the solution you submitted is great! Happy coding!

    0
  • RabbitMaidβ€’1,020
    @AgbortokoPosted over 1 year ago
    • HTML5 elements such as <main>, <nav>, <header>, <footer>, <section>, <aside> act as landmarks, or special regions on the page to which screen readers and other assistive technologies can jump. By using landmark elements, you can dramatically improve the navigation experience on your site for users of assistive technology (Users with disabilities) .

    You can use the <div> for sub items within landmarks like <section>. In other words for containers or sections in your HTML you can use the <section> tag if you want to nest in sub items <div>.

    Landmarks such as the <section> may actually require that you specify a heading within. In other words if the section has no heading it may throw an error when checked by an accessibility tool.

    It is advisable that you place all your main site content in a landmark element <main> Here is an Accessibility Evaluation Tool to check your webpage for any errors or warnings related to landmarks.

    There exist an attribution <div> that comes with the frontendmentor starter kit. You will have to wrap this <div> in a <footer> tag

    Read

    I hope you find the above solution useful! πŸ˜„ Nevertheless, the solution you submitted is great! Happy coding!

    Marked as helpful
    0
  • RabbitMaidβ€’1,020
    @AgbortokoPosted over 1 year ago
    • HTML5 elements such as <main>, <nav>, <header>, <footer>, <section>, <aside> act as landmarks, or special regions on the page to which screen readers and other assistive technologies can jump. By using landmark elements, you can dramatically improve the navigation experience on your site for users of assistive technology (Users with disabilities) .

    You can use the <div> for sub items within landmarks like <section>. In other words for containers or sections in your HTML you can use the <section> tag if you want to nest in sub items <div>.

    Landmarks such as the <section> may actually require that you specify a heading within. In other words if the section has no heading it may throw an error when checked by an accessibility tool.

    It is advisable that you place all your main site content in a landmark element <main> Here is an Accessibility Evaluation Tool to check your webpage for any errors or warnings related to landmarks.

    There exist an attribution <div> that comes with the frontendmentor starter kit. You will have to wrap this <div> in a <footer> tag

    Read

    I hope you find the above solution useful! πŸ˜„ Nevertheless, the solution you submitted is great! Happy coding!

    0
  • RabbitMaidβ€’1,020
    @AgbortokoPosted over 1 year ago
    • HTML5 elements such as <main>, <nav>, <header>, <footer>, <section>, <aside> act as landmarks, or special regions on the page to which screen readers and other assistive technologies can jump. By using landmark elements, you can dramatically improve the navigation experience on your site for users of assistive technology (Users with disabilities) .

    You can use the <div> for sub items within landmarks like <section>. In other words for containers or sections in your HTML you can use the <section> tag if you want to nest in sub items <div>.

    Landmarks such as the <section> may actually require that you specify a heading within. In other words if the section has no heading it may throw an error when checked by an accessibility tool.

    It is advisable that you place all your main site content in a landmark element <main> Here is an Accessibility Evaluation Tool to check your webpage for any errors or warnings related to landmarks.

    There exist an attribution <div> that comes with the frontendmentor starter kit. You will have to wrap this <div> in a <footer> tag

    Read

    I hope you find the above solution useful! πŸ˜„ Nevertheless, the solution you submitted is great! Happy coding!

    1
  • RabbitMaidβ€’1,020
    @AgbortokoPosted over 1 year ago
    • HTML5 elements such as <main>, <nav>, <header>, <footer>, <section>, <aside> act as landmarks, or special regions on the page to which screen readers and other assistive technologies can jump. By using landmark elements, you can dramatically improve the navigation experience on your site for users of assistive technology (Users with disabilities) .

    You can use the <div> for sub items within landmarks like <section>. In other words for containers or sections in your HTML you can use the <section> tag if you want to nest in sub items <div>.

    Landmarks such as the <section> may actually require that you specify a heading within. In other words if the section has no heading it may throw an error when checked by an accessibility tool.

    It is advisable that you place all your main site content in a landmark element <main> Here is an Accessibility Evaluation Tool to check your webpage for any errors or warnings related to landmarks.

    There exist an attribution <div> that comes with the frontendmentor starter kit. You will have to wrap this <div> in a <footer> tag

    Read

    I hope you find the above solution useful! πŸ˜„ Nevertheless, the solution you submitted is great! Happy coding!

    Marked as helpful
    1
  • RabbitMaidβ€’1,020
    @AgbortokoPosted over 1 year ago
    • HTML5 elements such as <main>, <nav>, <header>, <footer>, <section>, <aside> act as landmarks, or special regions on the page to which screen readers and other assistive technologies can jump. By using landmark elements, you can dramatically improve the navigation experience on your site for users of assistive technology (Users with disabilities) .

    You can use the <div> for sub items within landmarks like <section>. In other words for containers or sections in your HTML you can use the <section> tag if you want to nest in sub items <div>.

    Landmarks such as the <section> may actually require that you specify a heading within. In other words if the section has no heading it may throw an error when checked by an accessibility tool.

    It is advisable that you place all your main site content in a landmark element <main> Here is an Accessibility Evaluation Tool to check your webpage for any errors or warnings related to landmarks.

    There exist an attribution <div> that comes with the frontendmentor starter kit. You will have to wrap this <div> in a <footer> tag

    Read

    I hope you find the above solution useful! πŸ˜„ Nevertheless, the solution you submitted is great! Happy coding!

    Marked as helpful
    0
  • RabbitMaidβ€’1,020
    @AgbortokoPosted over 1 year ago

    Hello there! Good job starting this challenge! Below are some things you can consider during this process

    Firstly you need to understand more about css layouts :- MDN CSS Layout notes

    • Before the Flexbox Layout module, there were four layout modes:

      Block, for sections in a webpage Inline, for text Table, for two-dimensional table data Positioned, for explicit position of an element not counting the margin positioning (Still perfect in some cases)

    The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

    learn Flexbox here

    The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

    learn CSS Grid Layout here

    Also you could checkout the simple guide below that shows different ways of perfect centering in css

    How to

    • Also HTML5 elements such as <main>, <nav>, <header>, <footer>, <section>, <aside> act as landmarks, or special regions on the page to which screen readers and other assistive technologies can jump. By using landmark elements, you can dramatically improve the navigation experience on your site for users of assistive technology (Users with disabilities) .

    You can use the <div> for sub items within landmarks like <section>. In other words for containers or sections in your HTML you can use the <section> tag if you want to nest in sub items <div>.

    Landmarks such as the <section> may actually require that you specify a heading within. In other words if the section has no heading it may throw an error when checked by an accessibility tool.

    It is advisable that you place all your main site content in a landmark element <main> Here is an Accessibility Evaluation Tool to check your webpage for any errors or warnings related to landmarks.

    There exist an attribution <div> that comes with the frontendmentor starter kit. You will have to wrap this <div> in a <footer> tag

    Read

    I hope you find the above solution useful! πŸ˜„ Nevertheless, the solution you submitted is great! Happy coding!

    0
  • RabbitMaidβ€’1,020
    @AgbortokoPosted over 1 year ago

    Keep up the good work till you're done

    Here is a little tip! Hope it helps

    • HTML5 elements such as <main>, <nav>, <header>, <footer>, <section>, <aside> act as landmarks, or special regions on the page to which screen readers and other assistive technologies can jump. By using landmark elements, you can dramatically improve the navigation experience on your site for users of assistive technology (Users with disabilities) .

    You can use the <div> for sub items within landmarks like <section>. In other words for containers or sections in your HTML you can use the <section> tag if you want to nest in sub items <div>.

    Landmarks such as the <section> may actually require that you specify a heading within. In other words if the section has no heading it may throw an error when checked by an accessibility tool.

    It is advisable that you place all your main site content in a landmark element <main> Here is an Accessibility Evaluation Tool to check your webpage for any errors or warnings related to landmarks.

    There exist an attribution <div> that comes with the frontendmentor starter kit. You will have to wrap this <div> in a <footer> tag

    Read

    I hope you find the above solution useful! πŸ˜„ Nevertheless, the solution you submitted is great! Happy coding!

    Marked as helpful
    0
  • RabbitMaidβ€’1,020
    @AgbortokoPosted over 1 year ago
    • HTML5 elements such as <main>, <nav>, <header>, <footer>, <section>, <aside> act as landmarks, or special regions on the page to which screen readers and other assistive technologies can jump. By using landmark elements, you can dramatically improve the navigation experience on your site for users of assistive technology (Users with disabilities) .

    You can use the <div> for sub items within landmarks like <section>. In other words for containers or sections in your HTML you can use the <section> tag if you want to nest in sub items <div>.

    Landmarks such as the <section> may actually require that you specify a heading within. In other words if the section has no heading it may throw an error when checked by an accessibility tool.

    It is advisable that you place all your main site content in a landmark element <main> Here is an Accessibility Evaluation Tool to check your webpage for any errors or warnings related to landmarks.

    There exist an attribution <div> that comes with the frontendmentor starter kit. You will have to wrap this <div> in a <footer> tag

    Read

    I hope you find the above solution useful! πŸ˜„ Nevertheless, the solution you submitted is great! Happy coding!

    0