Intro
Hello everybody, welcome to my blog. This is my first real full project to become a front-end developer. I know that starting this career is tricky and requires a lot of dedication. Along the way, we will discuss all the topics we're gonna find (Frameworks, GitHub, resources...). First, let's talk about this project.
First, I wanted to create a blog using Nextjs, but after failing so much trying to render my markdown files into HTML, I've chosen to use Astro. Following Youtubers or reading articles I saw that markdown files are very popular for static sites (more specifically blogs). And Astro gives an amazing built-in implementation of markdown files(.md, .mdx).
This is the best way for me, and probably for you, to check my skills and my knowledge, and get used to finding the answers to my issues, doing things, creating content, and not following a tutorial. Tutorials are really good to check for specific topics, and if you follow a full tutorial (a full project of several hours) make sure to follow with the documentation opened, so you can try on your own before watching the solution.
I really want to grow with your support and your feedbacks, so you can grow with me, learning new things and creating more advanced sites or apps. I'm very excited about this challenge and this goal, and I hope you are too.
Let's jump into the project
What I use ?
Terminal
You will see a lot of different manners to use a terminal (the default one on your machine, IDE's integrated terminal, 3rd party terminal...). I prefer to use my default terminal because it does exactly the same thing so why do I need another one? If you're not familiar with the terminal (or Command-Line-Interface or CLI), I advise you to get used to working with it, because it's a fast and useful tool. Brad Traversy has a very nice video on this topic, here.
Visual Studio Code
For me the best code editor on the market, maybe the most popular one. From Microsoft, this free code editor gives you the possibility to work in the best condition. Very customizable and with an infinite number of extensions and settings, to let you work as you want and in the language that you want. Easy to install, easy to use and has a huge community around so you will always find the help you need. Check out the documentation. A lot of resources available regarding VScode (James Q Quick, codeSTACKr and much more).
Astro
Astro, is an amazing framework to build faster websites. Different from the other popular SPA (Single Page Application) frameworks like Reactjs or Vuejs, with his island architecture. Everything happens on the server as much as possible, as a MPA (Multiple Page Application). I let you discover the deep explanation of these concepts, here. Want to try? From your terminal in the folder of your choice, you just have to type:
npm create astro@latest
# or
yarn create astro
# or
pnpm create astro@latest
Then you start the application:
npm run dev
# or
yarn dev
Congratulation! you've just run your first Astro app.
Tailwindcss
A wonderful and popular CSS framework. I love CSS and Sass because I like to target my tags with descriptive names (you'll have to know CSS before jumping into a framework), but when you try tailwind you just love it because it saves you a lot of time and at the same time you can really customize everything. I admit that it can be a mess because your HTML tags can contain so many classes, but you get used to it and it works fine. What I love is how easy is to make your site responsive in just one line. See the exemple:
<main class='text-base md:text-xl lg:text-2xl'></main>
In this example, the text in my main element will start with a size of base (16px) on small screens. When my screen reaches the size md: (768px) my text grows to reach xl (20px), and finally at lg: (1024px) my font-size is 2xl(24px). How easy it is !!👌. Check their documentation.
What's next?
From now on, I'll post articles on specific topics and not-so-general ones so we can go deeper into them and be more precise. This first article was an introduction (of course it's the title), but I hope you've found it helpful anyway with the will to see more.
"Always code with love and passion"