By working through the lessons in this course, you have learned the necessary skills and knowledge to develop a home page for a fictional client.

Using your new knowledge of HTML and CSS you need to 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.

In terms of styling, you should use your creativity to create the appropriate look and feel to capture the attention of the client’s target audience. You should use your knowledge about CSS selectors and effects to create the appropriate intentional engagement that would serve your client best.

More detailed criteria are covered in the Grading Criteria Overview below.

To choose a client, read more about the four fictional clients in the Subject reading.

Still have some questions? The reading About the graded assessment provides answers to typical questions. The videos about Selecting the subject, Positioning the elements, creating placeholders and Planning the user experience offer valuable guidance on how to approach the project.

Based in Tuscon, Arizona, Lucky Shrub is a medium-sized garden design firm that specializes in garden design and creation, maintenance and landscaping. The company also runs a small plant nursery that sells indoor and outdoor plants, making them a one-stop shop for clients to "transform any space into an oasis you can be proud of".

Lucky Shrub was started by a husband and wife team, Jason and Maria, who share a long-time love for plants. Jason is the garden architect. He creates and oversees all designs while managing his team of landscapers. Maria manages all the marketing for the company and oversees the nursery.

When you submit your assignment, other learners in the course will review and grade your work. They will be looking for the following:

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?

When viewing the home page in the browser:

• Is the use of CSS styling effective?
• Is CSS used to create appropriate interactivity?
• When opening the CSS file in VS code, ask yourself the following:
• 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?
• What advice can you give to improve the user experience, layout and visuals of the home page?
• You'll also need to give feedback on and grade the assignments of two other learners using the same criteria.