Have you ever heard of HTML or CSS and not known what they are? To put it simply, HTML and CSS involve writing lines of code to build and customize web pages and web applications. In this post I will go over three examples of how I used HTML and CSS to customize this portfolio website.
The first example involves the yellow “Wendy” at the top of my home page (see image above). I wanted to have a pop of color in the text box, but the Elementor plug-in that I used to create my WordPress.org website would only let me choose one color of text for the “Hi, I’m Wendy” greeting. To solve this problem, I used a line of HTML code in the Title editor box to change the color of my name to yellow; this code can be seen in the above image on the top left. The color yellow that I wanted is represented by the text #ffc000 in the HTML code (this is called a “hex code”). How did I know which hex code to use for the exact color I desired? It’s simple! I used an online tool to determine this specific shade of yellow and then copied/pasted the associated hex code into the HTML.
My third example shows how I used CSS to solve a problem I was having in the footer section on several pages. In the image above, you can see the pink “Contact me” button, which turns from yellow to pink when you hover your mouse over it. The issue I originally had was that the pink was not a solid color and instead was translucent, resulting in the gray background showing through and dulling the bright pink button color. I knew that the solid pink would look much better to the user aesthetically, so I determined how to use CSS to change the opacity of the button color to 1, which creates a solid pink. You can see this CSS code in the image above to the bottom left in the Custom CSS editor window.
If you are interested in learning how to code for free, check out this blog post to learn about my favorite resources! To learn more about how I built this website, view this blog post about my tips for using WordPress.org.