Click on a screenshot to view the completed project.
Check out my code for these projects and more HERE.
I wasn't satisfied with the unpolished version of the drum kit that was supposed to be completed in this lesson. I knew there must be a more efficient way to load the sounds ahead of time and to avoid creating a new audio object whenever a sound was played. So here I simplify my code and got help from AI to learn how to preload sounds. It works noticibly faster in rendering sounds.
Here I use JS queries, event listeners for keypresses and clicks, and a switch to call various drum sounds when the user clicks the corresponding drum.
After a week or two to train up on JavaScript, I'm ready to begin applying it to the web. I made a dice game where two players compete to roll the highest and added a button to run it for extra credit. Just to show I haven't forgotten how to use HTML and CSS, I used things like flexbox and a custom font to make the page a little less boring. Give it a try!
This project showcases my knowledge of the combination of HTML and CSS. I redesigned Phishtopia to reflect my progress with a major update of the entire page.
I quickly created a hotel home page. I put something together but honestly didn't showcase what I learned. There should be more contrast in the title, serif and sans-serif should be mixed in title and subheading, and additional pages could have been added on. The purpose of my negligence is to show that in 20 minutes, I can make something decent enough to get started with an idea.
Click the image to visit my hotel site
I created a landing page for a dog dating app using Bootstrap. The page includes several sections which precisely replicates the goal image primarily using bootstrap for modified snippets and examples. Things are starting to come together to look like a real page.
My task here was to replicate Mondrian's artwork using grid, almost exclusively and from scratch.
Matching the goal visually and functionally, I made a three-part table using flexbox. This table includes item title, price, description, a button, and background. The table is adaptive to screen size and switches to a single column on mobile.
Given the specs of how the website should be laid out -- using only floats, widths, and block/inline-block displays (no flexbox, grid, or bootstrap) -- I managed to construct their site with a media query to be responsive to display size and stack the content accordingly
Following strict guidelines, I solved the puzzle of creating the flag of Laos using only CSS to style divs (boxes). Basically, I sized, positioned, shaped, and colored rectangles before sizing and positioning the text to create the flag.
Using HTML and CSS, I made a classic-style original meme with a custom font, borders, aligned and transformed text, margins, sizing, and a background.
Created a style.css file where I formatted html text color, font weight, and image height & width using class, tag, and element selectors.
Using html, this page showcases my knowledge on referencing images, creating hyperlinks, and structuring a simple webpage.
I learned to insert an image and made an unordered list.
I use different headers and a paragraph element to format my text to different sizes in an orderly fashion.
