A web page designed to showcase a personally created logo.
This web page was created using only Notepad++, a simple text editor. I first inserted my image and text into the HTML document and then made sure my coding was accurate. I linked a pre-made CSS document to the HTML and then proceeded to change the coding to what I wanted. I changed the fonts to Paytone One and Slabo 13px, contrasting Google fonts that were very similar to the fonts in my logo. I added a link to Google fonts in the HTML file for each of the fonts I used, and then specified the fonts in the CSS. I also declared some backup fonts in case the viewer’s browser doesn’t support the specified fonts. I adjusted the padding around the logo so it had good white space. I also adjusted the padding between headings and paragraphs for good proximity. I used the colors from my logo as the colors for the web page. I found these colors by opening my logo in Adobe Photoshop and using the eyedropper tool. When I was done editing all the code, I used the HTML and CSS validators at the W3.org site.
Programs used: Notepad++, Adobe Photoshop
The Puget Sound Education Resource Library is for younger children and has items to supplement their education.
Those in the Puget Sound area that are involved with homeschooling, scouting, or other community groups that focus on children. Also, anyone looking for ways to supplement their child’s education.
Top Thing Learned:
CSS is a very powerful tool for styling web pages. It is important to use the correct codes and all the codes needed in order to accomplish what you want to do. I also learned how to use Google fonts for the text on my web page.
Color scheme and color hex(s):
Indigo – #292765
Violet – #92278d
Gold – #f9b624
Lime – #a4c639
Title Font Families & Category:
‘Paytone One’, sans-serif – Sans Serif
Copy Font Families & Category:
‘Paytone One’, sans-serif – San Serif
‘Slabo 13px’, serif – Slab Serif
Changes made to the CSS:
I added a gradient image to use as the background and specified it should repeat. I centered the logo. I changed the font families and colors to match my logo. I also widened the body to fit the title on one line and thickened the border around the body. I centered the title and adjusted the padding to center it on the background color which was also changed to match the logo. I added headings to the unordered list and removed the bullets. I also adjusted the padding around the headings, list items, paragraphs, and logo. I changed the active and visited link color to match the logo and removed the underline.