It all started last year during my first semester in university when I studied the course "Introduction to Computing". In that course, we were introduced to the world of computers, MS Office, and what changed everything, HTML. My first semester started in the midst of the pandemic, therefore our classes were being conducted online therefore we couldn't do much practical work. Our course instructor only taught us the basics of HTML like some important tags or how to create a simple form and we weren't introduced to the magical world of CSS.
I remember that our third assignment of the course was to create a simple CV using just HTML. It was then that my brother introduced me to CSS. He taught me how to "style" something. Even though our course instructor prohibited the use of CSS, God knows why, everyone still used it. Actually, most of my fellows just copied the code from the internet and didn't even know that they were using CSS. Not like our course instructor wasn't good, but online learning was still a relatively new concept back then and had a lot more problems than now.
But since my brother introduced me to CSS, I got intrigued and searched it up. Later on, I completed my assignment using CSS too. After the semester ended, seeing my interest in designing sparkling pretty webpages, my brother sent me two links and told me to open them in the same order.
HTML from W3Schools
CSS from W3Schools
I was so amazed by what I saw and of course, wanted to learn more and more. So, my bro advised me to explore HTML first and then dive into CSS. That's what I did! Following W3Schools, I learned HTML and then CSS. In January, I built my first website using these two and it was actually terrible😂 But, I wasn't ashamed at all and ended up building another two. I didn't upload my first either second project on GitHub or rather I just can't, you know? The second one can still be shown to the public, so here you go:
As you guys might have already noticed, I tried to copy a template but everything went very wrong. That was the time I came to know about how horrifying divs were! I couldn't really position them as I wanted.
This project actually became my nightmare. I thought I was really bad at this making websites thing and should just stop. But thankfully, this was just a phase. Almost a week later, I tried again. This time I was armed very well for battle. I hadn't realized the importance of Google or StackOverflow back then but this time I was prepared. My googling became a lot better and in 2 days, I had positioned all divs however I wanted😎
Actually, at that time I was watching a TV Series, "Sherlock", and became a big fan. Therefore, my project was influenced by it. See for yourself:
I uploaded this one on GitHub because it looked really good. Here's the code: Sherlock Website Homepage
Disclaimer: It isn't responsive at all👀
Diving deep in the world of World Development
In my second semester, C++ haunted me so I couldn't give any time to Web development or Python at all. But in summer 2021, I finally got some free time and got back in the game! Here's what I did:
HTML from W3schools.
Then CSS from W3schools.
Later on, completed freeCodeCamp's Responsive Web Design Course.
Bootstrap and Sass from W3schools.
Learned JavaScript through freeCodeCamp's JavaScript Algorithms and Data Structures course.
freeCodeCamp's Front end libraries certification (helps revising Bootstrap and Sass also helps in learning the basics of React and Redux)
I have to say, W3Schools and FreeCodeCamp are my besties😂 I refreshed all my concepts and learned a lot of new concepts too. Also made some CSS animations this time. I'm really proud of how this penguin turned out!
I made this one and some others following the tutorial on FreeCodeCamp's Responsive Web Design Course. Also completed all the projects of these courses all by myself😎 I recently made some forms and published a tutorial on how to make a responsive complaint form, which you can check out here. Yep, I finally learned how to use media queries and frameworks like Bootstrap to make my projects responsive!
Note: If you want to follow what I did, then take care of the given sequence!
Some links you might find useful
🌸 W3schools:
🌸 A guide to Sass for beginners by yours truly;
🌸 FreeCodeCamp courses:
But I soon figured that just HTML, CSS, and JavaScript weren't enough for me. I wanted to learn more. So I searched about what else I could do and came across two terms: "Front-end Web Developer" and "Full-stack Web Developer". These two terms seemed really appealing to me so I dived in a bit deep to understand what they truly meant. I came across roadmaps on how to be either one of them. If you are a beginner in Web Development, you might not know the roadmaps so here you go:
Front-end Web Developer Roadmap
✨Learn how the internet works
✨ Learn HTML
✨ Learn CSS
✨ Learn JavaScript basics
✨ Learn the basic usage of git
✨ Time to go back to CSS. Learn any framework like SCSS, Tailwind or Bootstrap
✨ Move back to JavaScript. Delve in a bit deep now.
✨ Learn the what and how of APIs
✨ Learn JavaScript frameworks like React, Angular, Vue etc.
✨ Now's the time to deploy. Learn how it works.
Full-stack Web Developer Roadmap
It's actually quite similar to the Front-end developer roadmap but with some changes. I'll even mention the same points again so that people who are only gonna follow this one don't get confused.
✨Learn how the internet works
✨ Learn HTML
✨ Learn CSS
✨ Learn JavaScript basics
✨ Learn the basic usage of git
✨ Time to go back to CSS. Learn any framework like SCSS, Tailwind, or Bootstrap
✨ Move back to JavaScript. Delve in a bit deep now.
✨ Learn the what and how of APIs
✨ Learn JavaScript frameworks like React, Angular, Vue etc.
✨ Now's the time to deploy. Learn how it works.
✨ Choose a tech stack (I'll mention some of the famous ones below).
✨ Learn database (SQL + noSQL)
✨Learn version control in detail
✨Learn how to use the command line
✨ Know about various Operating Systems
Hope that if any beginner is reading this article, you now fully understand these two terms. Honestly speaking, I'm not even a front-end web developer yet. With physical classes, everything has been so hectic lately but I'm not abandoning web dev this time even with Data Structures almost killing me. I'm following these roadmaps and plan on becoming a full-stack web developer by the end of 2021!
Let's connect!
✨ Github