WebDev Bootcamp — Week 4
I finished week 4 of the six-week Web Development Bootcamp. Week 4 was about CSS selectors, responsive design and web accessibility. For our guest session, we had Parham Doustdar come and speak to us about how we can make the internet more inclusive.
Schedule
| Date | Description | Link |
|---|---|---|
| Jan 31 (Mon) | Learn More About CSS Pseudo Selectors By Building A Balance Sheet | freeCodeCamp |
| Feb 1 (Tue) | Learn Intermediate CSS by Building a Picasso Painting | freeCodeCamp |
| N/A | Learn Responsive Web Design by Building a Piano | freeCodeCamp |
| Feb 2 (Wed) | Project: Build a Technical Documentation Page Project | freeCodeCamp |
| Feb 4 (Fri) | Guest Session: Everyone matters - An Inclusive Approach to Design, Development and Testing | YouTube |
| Feb 5 (Sat) | Office Hours livestream for Q&A | YouTube |
Building a balance sheet
We learnt about how to create tables using HTML and more about pseudo selectors like :nth-of-type and :last-of-type, as well as attribute selectors, child combinators, general sibling combinators and adjacent sibling combinator.
See the Pen Balance Sheet #2 (freeCodeCamp) by fadilla-wahyudi (@fadilla-wahyudi) on CodePen.
Building a Picasso painting
For this lesson, we had to recreate a Picasso painting. It looks much better when viewed with a wide screen. We learnt about Font Awesome, z-index, learning how to position elements and creating different shapes.
See the Pen Picasso Painting (freeCodeCamp) by fadilla-wahyudi (@fadilla-wahyudi) on CodePen.
Building a piano
This lesson was about using media queries for achieve responsive design. The size of the piano changes when you change the width of the screen.
See the Pen Piano (freeCodeCamp) by fadilla-wahyudi (@fadilla-wahyudi) on CodePen.
Project: Building a technical documentation page
This project was about creating a technical documentation page and I did one on Python pandas. There were 15 user stories that the page needed to fulfill, including creating a navigation bar and making it responsive. To spice up the navigation menu for the mobile version, I sprinkled in a little bit of JavaScript. Not gonna lie, I was racking my brain trying to figure that out.
See the Pen [Project] Technical Documentation Page (freeCodeCamp) by fadilla-wahyudi (@fadilla-wahyudi) on CodePen.
Guest session: Everyone matters — An Inclusive Approach to Design, Development and Testing
On Friday, we were joined by Parham Doustdar, who is a manager and developer at Booking.com. He is blind and is a screen reader user. This was a Q&A session about how we can make the internet more accessible to everyone.
Here are some of the key messages that I got from the session:
What is the difference between WCAG and ADA?
- WCAG, which stands for Web Content Accessibility Guidelines, are guidelines about accessibility. ADA, on the other hand, is the Americans with Disability Act which applies to both physical and virtual spaces.
- The WCAG helps implement the ADA for virtual spaces.
Which screen reader software would you recommend for Windows?
- NV Access is an open-source software that you can use to test your web pages out for screen readers.
Can screen readers translate content to different languages?
- No, they can only turn data from the browser into speech or Braille.
Can screen readers describe images?
- Screen readers do not describe images, which is why providing alt text is important. Twitter and Facebook do have an automatic alt text generator but they are not accurate because we are still at the beginning of implementing AI.
- On top of that, AI cannot provide context the way a human can. For example, only a human could write the following image description: “A man in a suit standing next to the car he just bought”.
How do we check how accessible our web page is? What accessibility checker tools can we use?
- Accessibility checker tools give you minimal information compared to a human. It only gives you 25-30% of the issues. The best way to check is to do what a person with a disability does.
- Examples would be:
- Zoom the page to 170%-210%. When you’re zooming, does the page break? Does the paragraph get hyphenated in the right place? Do the icons stay small?
- When using a screen-reader, do the order of the components make sense? Are they recognised the correct way? For example, is a button recognised as a button?
- When assessing colour blindness accessibility, you can use browser extensions to modify your page to replicate colour blindness.
- Mouth wands are used for people with motor disabilities. Is your page easy to navigate through without a mouse?
What should be written in alt text?
- It should answer the question “why is this image here? what is it supposed to convey?”. If you have a graph showing the number of COVID cases per day, then an appropriate alt text would mention the trend that you see in the graph.
Leave a comment