Create a semantic structure with a header, main content and footer. Decide between a grid or flexbox for your layout. The client's logo needs to be in the header and the main content needs to have a large promotional banner and three columns with text and images below it. The footer should have two columns. The first column must contain a smaller version of the logo and the second column should have copywriting information.
HTML and CSS in depth course of the Meta frontend professional certification training.
Mangata and Gallo is a jewelry store that specializes in special occasions like engagements, weddings and anniversaries. The jewelry company primarily operates online and has a small storefront in Austin, Texas with an atelier attached for browsing. Mangata & Gallo's selection of jewelry is known for its high-quality and classic look. The owner, an Austin local, is well known for her jewelry designs.
Mariana is the owner and the lead designer of Mangata and Gallo. After graduating from design school with a specialization in diamond cutting and metal smithing, Mariana opened a store in her hometown, Austin and started to grow her business online. Mariana has always managed every aspect of the business, from jewelry design to marketing to e-commerce. However, she recently hired several artisans to help craft her designs and a young employee to help manage the company website and social media accounts.
When viewing the home page in the browser:
- Is it clear that this is a home page for one of the four fictional clients?
- Is the correct company logo at the top of the page?
- Is there a horizontal navigation menu with four links below the logo?
- Does one of the links in the navigation menu link to the home page itself?
- Does the main content contain a large promotional banner at the top and three columns below it, each containing an image and some text?
- Does the page have a footer that is split into two columns?
- Does the left column of the footer contain a small version of the client logo and the right column copyright text?
When opening the HTML file in VS Code, does it contain:
- A header element for the logo?
- A nav element for the navigation menu?
- A main element for the content?
- A footer element for the footer?
- Appropriate usage of other semantic tags such as article and section in the content of the main element?
- Is the use of CSS styling effective?
- Is CSS used to create appropriate interactivity?
- Is it a grid or flexbox layout?
- Does it have the appropriate selectors to style elements?
- Does it specify any pseudo-classes to create interactivity on the home page?
- Are any animations or transition effects used? Do they improve the user experience or distract from it?
- Does the home page create adequate interaction and a pleasing visual experience that is fitting for the client and its customers?
- Are CSS styling and effects used effectively to create intentional engagement?
- What works well?