The About me page consists of various different HTML elements mostly taught from the Fundamentals of Web Programming. There is a lot of hyperlinked text using href as well as the use of an unordered list in the "Things I like" section. To utilize the img tag in html, there is a section with "relevant media" with images related to the things I like, some resized to fit the page. There are several images under the third layer of heading with a caption for each, the beach one is even hyperlinked to a Google Maps location using inline nesting. For some however, different elements are used. Where there are Youtube embeds, Iframes are used based on the default settings Youtube provides when you copy their embed links. As for the yummy foods tier list, that is using table elements, which is very likely going to be updated by me in the near future since tables are more common in CSS.
EDIT: I added a css doc and linked it to the html doc with basic, intermediate, and some advanced techniques from HTML Dog. It contains body formatting so that the text is white, there's a custom background that's edited to be blurred and have less contrast, and the font was changed to Helvetica. Hyperlinks were changed to an aqua color for visibility, the table got colored white and was centered (more additions in the future), and each heading was changed to have a purple background, white text, and custom font size, padding, and margins based on the heading level. I also added a header that can take you back to the main page or the description of the site the user is currently on.
The top 10 funniest dogs site was built using bootstrap CSS taught by W3Schools, using elements such as blockquotes and containers to format the page in a specific way. I used the grid system to outline how each dog was laid out, and it allowed me to neatly execute a simple title-image-caption-quote format to present each dog using the row and column classes. Other than that, it uses the same HTML/CSS techniques from the about me page. I was even able to edit the CSS to change the color of the blockquote footer so it was more easily visible. The same header from the about me page to go back to the home page or site description is also there.
Very much based on this reactjs tutorial to get an idea of how react works. It goes through the very basics of things like rendering, states, and event handlers to create a fully functional tic tac toe game. Learning about states and how to set them was a key part in getting it to work and it shows with every edit made following the tutorial.
Primarily based on this typescript tutorial which introduces classes and interfaces to basically be able to output "Hello Jane User" into a browser window utilizing those two concepts. I took this a step further with some help from this video, particularly the querySelectors. I was basically able to give the user the option to input any name and not just Jane User to be greeted, as the querySelectors were put into an eventHandler triggered by the submit button. When the submit button is pressed, the Hello *user* text appears below, and the name can be updated by changing or adding names into the text boxes and hitting submit again.
At first, this was a part of a hooks tutorial where you made a react app that told you how many times you clicked a button here. However, I expanded this by adding a timer using setInterval and made it so that it calculated how many clicks you did per second in a 15 second window. I added a lot more functionality to this after looking at Dr. Bart's TA trainer and was able to separate a lot of it into components. There are two interfaces: result and score. Result is raw data of the time interval (originally there were going to be multiple options) and the amount of clicks, and score is the data of the user inputted name and their cps. When the timer ends, a modal pops up that asks you for a name, and after you save changes, it sorts all the scores and puts it on the leaderboard where previous scores may be rearranged into the top 5. All of this was made in react and typescript using components that returned JSX elements to put into app.tsx, state hooks were used a lot to trigger things to start like the timer or hide elements until a certain event happened like the modal popping up when the timer stops, and effect hooks were used to check when the timer needed to stop. Bootstrap was also used for modals, tables, and buttons that are disabled based on their state.