Report and project revisions

Tasks

Outback Nursery set up:

Create and organize files for the Outback Nursery redesign

Outback Nursery code:

Coding outback nursery home page to match your revised wireframes.

Design System:

For each page of the sidebar, a structure was added that includes a definition and examples, the pages created were:

• Images
• Interactive
• Navbars
• Breadcrumbs
• Pagination
• hero
• Carousel
• Footer
• cards
• Forms
• Accordion
• Lists

Testing

Testing activities were carried out on the Outback Nursery home page, the testing included:

• Quality Assurance Testing
• HTML and CSS code validation
• Performance testing
• Accessibility testing

Feedback

During the presentation, the following feedback was issued (instructor):

Git: Some very large commits - use smaller, task-based commits. Messages are formatted correctly.

Code: Missing namespacing.BEM not used consistently or correctly. I recommend that you do a thorough refactoring of your code to demonstrate that you understand namespacing and BEM

Interface: Fix vertical spacing of text on hero section. Change hero CTA to go to products, not about us. Update default colours on links. Make headings consistent in style. Remove home link from navbar. Fix accessibility on CTAs. Make order of sections match navbar order. Create a consistent container width for sections. Make social icons larger. Design system - add left padding to navigation. Create consistent container widths on all pages. Fix wide columns. Add mobile for design system.

In addition, here other feedback of classmates:

• Remove the link for the home page.
• Responsive Design System.
• Center the images.
• Spacing should be more consistent.
• Improve carousel text color.
• The use of the accordion is good.
• The images are good.
• Improve navbar padding.

Revisions

Based on the feedback received, the following was done:

• Vertical space was added to the hero paragraph, for which some classes were also added to the CSS file to increase the vertical space between lines of an element.

• The text of the hero's invoice was updated, now its text is “Check Our Products”

• The estyle.css file was updated so that all elements by default have a color #5564eb, this through the --clr-blue-light variable.

• A consistent style was added to all homepage titles, for example now all titles are lowercase and have the same font family.

• The “home” link was removed from the main menu of the website.

• Accessibility was fixed in the hompege CTAs, now they all have a more attractive and not so general text, in addition, consistent styles were placed in all the CTAs.

• The order of the sections was changed so that it coincides with the order of the navigation menu.

• Changes were made to the width of the sections to make them more consistent.

• Social media icons in the footer have been enlarged.

• Added letf padding to the Design System sidebar.

• All the links on the page design pages were updated so that when you click on “Desing-System” in the navigation bar it is correct.

• Consistent general containers were made for all pages of the system design.

• Responsive property applied throughout the design system.

Reflection

When carrying out this project, at times I felt very confused since it is the first time that I have carried out a web project that involves many parts and many topics, however I consider that I learned a lot about how to plan the code of a project. It is very important from the beginning to have a good planning of the structure of the code, of the names of the classes, names of variables and in general it is important to have a good planning from the beginning since later it is more difficult to organize and go back.

In general I am happy with the project and I would have liked to have been clearer about the BEM methodology.

Bonus Revisions

As additional work, I carried out a general review of the entire project, tried to find design problems and corrected them to try to have the best possible final product.

Review all screens in the project and try to make the entire project responsive.