How I Spent The Past Few Weeks as a Beginner Web Developer

The past few weeks have been busy with learning. I started by working on a basic linktree style link site. My goal was to create my own version of this one from w3schools:

The Issue

I created my first version with the CSS inside <style></style> tags on the index.html page. This worked perfectly. Then, I moved the css into it's own file called styles.css in the root directory. Unfortunately, this broke the link between my css file and the html site somehow.

Stuck, I tried creating a folder called mycss and putting the css there. This didn't do it either. I cleared cache from devtools using `Cmd + Option + I. Nothing. So I did what any self respecting beginner would do, and joined a Discord server for learning HTML.

An engineer named Tokdev helped me out, and I continued to work on my file setup. Eventually, my site went from this:

to this:

The Resolution

I worked a little more on aligning everything, and you can see the completed link site here. The site is HTML and some CSS only since we had only covered HTML in The Odin Project so far.

🛠️ What I Did In The Past Few Weeks

• Joined the Learn HTML discord
• Reviewed links and paths using Steve Griffin's video and this game - Thanks Tokdev!
• Completed The Odin Projects HTML Foundations course, and successfully completed all projects! You can view my final project, a HTML recipes page called Odin-Recipes here.
• Begin TOP's CSS Foundations course, and practice CSS by creating a few projects.

🧠 What I Learned In The Past Few Weeks

• How to create a gradient using CSS. I want to learn more about this, but it was fun setting up a basic gradient for my link site.
• Some semantic HTML tags like <h1>and <p>.
• How to push my project to Github repository.
• How to write commit messages in Github so I understand changes made to my code.
• How to create a live demo of my project using Github Pages.
• How to screenshot an entire site without losing context or readability Thanks to Reddit.
• How to mimic this free Magnific image by creating a radial gradient background image.

📆 Upcoming Plans

Next week, I will work some more on understanding CSS and positioning using the box model, and then begin working through The Odin Project's Flexbox unit. I hope to finish their Javascript Basics course by the end of this month.