From Front Desk to Front End p.28 Dictionary App Project - HTML

Photo by Karolina Grabowska on Pexels.

Oh hello! Welcome! My name is Tauri and I'm a career changer with 10 years of experience in administration now open to front end development work! Atm I am building some independent projects to flex and continue to learn more, and soon I will be launching myself into the freelancing world! 🚀🌎✨

My ultimate dream is to contribute my skills and proactive energy to a company doing amazing things to help people, so every step is an inch closer!

All riiiight, time to code a new project!! This is a dictionary web app featuring APIs. Next up is projects built with React.js, but this simple interface only updates in one overall space so I'll be using vanilla JS for this one. This is a project I am building from scratch given to me from Frontend Mentor with a design comp in Figma.

First I have to lay down some HTML based on the design comp. This is a static version of my UI just to allow me to create proper formatting with my CSS, and all the actual text in the word and pronunciation div + the meaning and source areas will be pulled in from the API later.

Monday 4/3/23:

Got my boilerplate set up, linked in my style sheets, imported in the fonts. I had a lot of interview prep for my interview on Weds, plus applying and prospecting to do, so that's all I did today. 30 mins

Tuesday 4/4/23:

I did a lot of prep for my interview which is coming on Weds then felt kinda run down and that I might be coming down with something. I tend to fight off things without them developing into a sickness, but I also really listen to my body's need to rest so I got off the computer instead of carrying on into the night and laid about and did a steam and facial instead.

Wednesday 4/5/23:

4/5/23: Started to set up HTML elements for the navigation bar. And right away there's a learning experience from refreshing myself on how to set up a toggle! HTML is where accessibility begins, so when looking up toggles on W3 I was happy to learn about the <label> element and read more about it on MDN docs. I learned how associating it with any input allows for 1. screen readers to identify it and 2. an increased touch area, bc the <label> tag will defer to the input within it and this is advantageous for touch screens or anyone with mobility challenges. 30 mins

Thursday 4/6/23:

I put the label element around my search bar input as well.
Then I put in the HTML tags for the word, pronunciation, and part of speech.
I labeled the play button a <button> bc this will be doing more than just going to another page (which I'd name an anchor tag)- it will be reading the pronunciation of the aloud which is a function I'll be setting up in JS.
In the past I have created a horizontal line just by creating an empty div class then styling that with CSS.
But some further investigating on w3 schools revealed to me the <hr> element which is now semantic in HTML5 and usable across browsers so I'm going for that! 30 mins

Friday 4/7/23:

I laid down the rest of the HTML elements with headers and lists for the meaning areas. I mostly named the parts which will eventually be populated by the API "areas" in the class, and will probably go back and do this with the "word" and "pronunciation" div classes but I'm going to leave for now until I start pulling the parts of the API and toodle with how that'll function. 30 mins

So that was about 2 hours of HTML set-up, including some reading to make sure I was using the best options to be semantic, easy to read with text readers, easily clickable, etc. to make this as accessible as possible!

Look at this nice stack of HTML elements! Wiao.