pchan2/team-brendan-pricing-plan

Team-Brendan-Pricing-Plan

This group project is to recreate the attached Pricing Plan. Semantic HTML and CSS are used to give the poster structure and style and element positioning.

team-brendan-pricing-plan's Issues

Fix CSS validation errors

The W3C Validator CSS seems to report 2 errors. Please fix them and report back to the team @CourseraDSstudent .

https://jigsaw.w3.org/css-validator/validator

Optimize images

The Lighthouse Performance index is at 98%. Let's bump it up a bit by compressing all the image through the TinyPNG free online service.

@alialouies make sure to include the performance gain after the compression (in percentage) in order to have a clear idea of the optimization level.

Merge the two margin rules into a single line

Team-Brendan-Pricing-Plan/style.css

Line 14 in 2dfc11a

margin: 0 auto;

We really need just one line of code here instead of 2. Use the margin property to include all the values in a single shot.

@CourseraDSstudent

Remove redundant words such as image from the img alt content

Usually, there’s no need to include words like “image”, “icon”, or “picture” in the alt text.

Team-Brendan-Pricing-Plan/index.html

Line 19 in 2dfc11a

<img src="/Pricing-Plans--Balloons--Personal-01.jpg" alt="An image of a balloon">

Study and bookmark the following link to learn more.

Source

Assigned to: @alialouies (please inform the rest of the team about this important A11Y aspect)

Remove redundant or unnecessary elements

Team-Brendan-Pricing-Plan/index.html

Line 29 in 2dfc11a

<p>$</p>

Clear up the space from unnecessary HTML elements. Do we really need the p tags here?

Assigned to: @Mulungo

Add a README.md file describing what this repository is all about.

Let's make this repository a little bit more descriptive. Add the mockup image image along with what the code is trying to achieve. I have assignemd @pchan2 for this one. Just mentioning the rest of the team here: @alialouies @Mulungo @CourseraDSstudent

Fix A11Y issues

The Lighthouse auditing tools shows that the mockup was not designed with accessibility in mind. Let's fix that.

Background and foreground colors do not have a sufficient contrast ratio.

Combine two background properties into one

Team-Brendan-Pricing-Plan/style.css

Line 16 in 2dfc11a

background-color: #BEDDF9;

Why not using the background shorthand property?

https://developer.mozilla.org/en-US/docs/Web/CSS/background

@CourseraDSstudent