Okay, so yesterday I tackled something kinda fun: setting up a basic website page mimicking a golf club’s social scene. It’s nothing fancy, just a bit of HTML and some CSS to make it look presentable. I’m calling it “Piper Glen Golf & Social Club” for now – might change the name later, who knows?
First things first, I fired up my trusty VS Code. Gotta have that code editor ready, you know? I created a new folder, named it “piper-glen-project” or something like that, and inside I made two files: and . Classic move, right?
Then I jumped into the file and started laying down the basic structure. We’re talking the <!DOCTYPE html>, <html>, <head>, and <body> tags. Nothing groundbreaking here. I added a <title> tag with “Piper Glen” inside so it shows up in the browser tab.
Next, I linked the file to the file using the <link> tag within the <head>. Super important, otherwise the styles won’t apply! I always mess that up at least once per project.
Okay, body time! I wanted a header, so I used the <header> tag. Inside that, I put a simple <h2> tag with the club’s name: “Piper Glen Golf & Social Club”. Below that, I added a <nav> tag and threw in some basic links: “Home”, “Events”, “Membership”, and “Contact”. Just used <a href="#"> for each one – no actual pages linked yet, just placeholders.
For the main content, I used the <main> tag. I figured a brief introduction was needed, so I added a <section> with a <h2> saying “Welcome to Piper Glen!” and a couple of <p> tags with some placeholder text about the club. You know, the usual “enjoy our beautiful course” and “join our friendly community” kinda stuff.
Events! Had to have events. I created another <section> for that. <h2> saying “Upcoming Events” followed by an unordered list (<ul>) with a few list items (<li>). Each list item had a little description of the event, like “Golf Tournament – July 15th” or “Social Mixer – August 5th”. Again, nothing fancy, just the structure for now.
Finally, I added a simple <footer> with a copyright notice. Just a <p> tag saying “© 2024 Piper Glen Golf & Social Club”. Done with the HTML structure for now!
Now for the fun part: CSS! I jumped into and started adding some basic styles. First, I used a CSS reset to normalize the styles across different browsers. You can find these online; I just grabbed one I usually use.
Then, I set a basic font family for the whole page. Something clean and readable, like “Arial” or “Helvetica”. I also set a default font size and line height.
I styled the <header> with a background color and some padding. Made the text white to contrast with the background. Centered the <h2> tag and gave the <nav> links some spacing and a different color on hover.
For the <main> section, I added some margin and padding to give the content some breathing room. I styled the <section> headings with a different font size and color to make them stand out.
The <ul> for the events got some basic styling too. Removed the bullet points and added some padding to the list items.
Finally, I styled the <footer> with a background color and some padding. Centered the text and made it a little smaller.
That’s pretty much it! I saved both files and opened in my browser. It looked… okay. Definitely needs more work, but it’s a good starting point. I might add some images and more detailed styling later. And actually link the pages together, haha.
Things I learned/remembered:
- Always link your CSS file correctly. Seriously, double-check!
- CSS resets are your friend.
- Placeholder text is a lifesaver.
So yeah, that’s my Piper Glen Golf & Social Club website project for today. It’s a work in progress, but it’s a start. Next time, maybe I’ll tackle some JavaScript to add some interactivity. We’ll see!
