I am a Front End Developer and a student (and enrollment counselor) with Skillcrush, the online coding and design school with a heart! I am open for employment with a company, and working on adding to my skillset every day! This blog is chronicling my most recent projects, so thank you for reading!
I haven't been actively applying for jobs and networking since mid-May, y'all. I'm really happy with my Enrollment Counselor position at Skillcrush, so I have the luxury of enjoying that for the moment while I do some more projects and build more skills. I was starting to garner some attention from my outreach, and there's so much that can only really be learned on the job, but for my personal journey I have the luxury of leaning into some middle-ground projects and classes before launching into the job, so why not! As I discussed in previous posts, I started with a class on Accessibility.
Then this past month me and a group of other Skillcrushers finished up the volunteer project for House of Light, an organization the provides services for people who are blind and visually impaired! I was dedicating all of my free time to this project and honestly found it difficult to find time to focus on my blog, so you just get to see it at the finish line lol!
houseoflightllc.org. Me, another developer, and 2 designers were given the logo and brand colors and fonts.
For this project I:
- Built the hero area of the landing page
- Used Bootstrap to build the navigation featuring drop down menus
- Built the footer
- Homepage sections minus the footer
- Indicated to the design team when there was not good contrast in particular sections, such as the tagline over the hero image and we had to choose a lighter gold for the brand colors than were given to us to create better contrast between any lettering
- added skip links to all the pages for the convenience of people using screen readers to skip over the nav to skip directly to the content
- Found free alternatives that were open for publishing bc the fonts given to us were exclusive to Mac users for their own use
- Overwrote Bootstrap's default styles with our own using Sass, otherwise used Bootstrap's grid system as is for all pages
- Pivoted when writing ALL of our styles in Sass caused slow compilation times when mapping over Bootstrap Sass files, so we moved our custom styles to CSS and only saved the overwrite of default styles in Sass
- Built the Services pages with Bootstrap cards
- Built the Ghana Project page with modals to show pictures from the gallery in full
- Built the Products page with a Bootstrap table
- Built the FAQ and Careers page
- Converted our previous use of Fonticons to SVGs for better accessibility, as detailed in the Thu and Fri notes in this blog
- I could NOT update the forms with HTML labels for better accessibility to screenreaders unfortunately. Our client built the forms with a software called Dubsado which is a Content Management System so that anyone who entered a form had an account created for them within the system. We could style the forms with CSS, but not access the HTML so sadly my screen reader says "edit blank" to me when tabbing over an input instead of "edit Name" etc. We sent this to her in an email with final considerations and gave her some alternatives to Dubsado so we'll see what she'd like to do.
Dedicated to reviewing the website to the client and determining what final additions need to be made, mostly small changes but she also requested modals to show the full pictures in the gallery for the page about the Ghana Project. The modals on Bootstrap are for text only so I customized to show the images, and recognized the slow loading times here so took the time to compress all of the images above several hundred kb- shoulda done at the beginning but glad looking at the website in mobile cued me in that this needed to be done.
Continued to make edits based on the final meeting and listened to “Code is for Humans” by Kyle as well as went over the intro to the class. My main take away from "Code is for Humans" is that your code needs to be really understandable to humans otherwise it's not going to last bc someone is going to want to rewrite it later when they don't understand what you did and why. So more readability makes for longer lasting code!
While reading more about ‘aria-labelledby’ ‘aria-describedby
andaria-label` on MDN docs, I was directed to watch Death to Icon Fonts from Seren Davies who highlighted why they are bad for dyslexic people, and many others!
- Updating your font on a website may break the icon font and now all they see is a block
- Many screen readers skip over them entirely or create misrepresentative text like “star favorite” which makes it confusing to know if the star is an icon font or is part of the actual text
- Opera the browser does not support icon fonts She suggested these resources:
Changed the fonticons to SVGs from icomoon.io following the CodePen examples and directions on the site so I could set them up correctly, and this allowed me to edit them very similarly to CSS (with just a reference to “currentColor” for the stroke and fill of the SVG so I could indicate the color of the icon later)!
My partner for the project shared with me this project for the BEM way of organizing and naming your HTML/CSS classes, and this would’ve been awesome to know as we produced the project! 😂 We just submitted the live website to her with some final considerations for her to consider and get back to us on, and once she does I may go through an overhaul of the classes bc systemization makes for greater readability and Code if for Humans, after all!
I went through the beginning Kyle Simpson's intro to JS class on Frontend Masters cursorily going over values, operations, types, variables, expressions vs statements, if & else, loops and functions.
I'll share some detailed notes next week.