Prior to my decision to learn programming, I'd always been in traditional industries. Despite no major complaints about my current job, I felt left behind in this rapidly evolving tech world. Every day we use the internet, yet I knew nothing about the foundational knowledge that builds it, which made me feel uneasy and upset. But the absence of a teacher and industry experience led me to detours in my self-taught programming journey. In this thread, I will share a complete guide for a total beginner to learn HTML and CSS quickly (all learning resources mentioned in this thread are free!). The link below is a simple clone of the YouTube homepage I made after learning the content: . youtubeDemo If I can grasp these two important and fundamental tech stacks quickly, why can't you learn them in a short time? Pitfalls: Regarding learning resources: Today isn't an era of information scarcity, but an era of information explosion. Without spending a dime, we can find plenty of excellent learning resources on the web, be it articles or lengthy video tutorials. Yet, it can make us, as beginners, feel overwhelmed. For example, you may find hundreds of online courses, tutorials, and books for learning Python on the internet. The sheer number of choices may leave you not knowing where to start. I've lost myself in this ocean of information before. I tried to follow several courses at the same time, only to find that I had neither the time nor energy to complete them all. Until later, I realized a principle: Just like when programming, strategy and thinking are always more important than specific codes, clearly defining our long-term learning goals and roadmap is always more critical than any particular materials or tutorials. No matter how excellent or detailed the tutorials are, they are just tools, tools to achieve our goals and roadmaps. Without the North Star, we will lose our way. Regarding time and energy: As adults, we all have our work and families, responsibilities that cannot be neglected. So, we certainly don't have as much time and energy as students do to devote to learning all day. At the same time, I found that my learning speed for new things is not as fast as when I was young, which in turn requires me to spend more time and energy to understand and remember new knowledge. This sometimes makes me feel frustrated and even begins to doubt my decision. But as Haruki Murakami said, once you get through the storm, you won't be the same person. In the process of your persistent progress, all feelings of failure and doubts will eventually vanish. Regarding tech stack selection: The development of technology today is accelerating. Especially this year, the explosive leaps in the AIGC field and the endless emergence of new tech stacks have left many seasoned tech workers amazed. Some tech stacks that were once very popular suddenly become no longer popular. As a newcomer who hasn't even started, seeing these abstruse concepts and codes, I often feel confused about which tech stacks I should learn. I wonder if it would be a waste of time and energy after learning. It was not until I read a large number of blogs from tech experts that I realized a consensus among excellent tech workers: No matter how technology develops, how new tech stacks evolve, the basics are the most important. For example, even today, HTML, CSS, and Javascript are still the basis of all web applications. No matter what new framework or tech stack you learn, it's impossible without understanding these three basics. Learning strategy: After a long period of exploration and hesitation in the early stage, I finally clarified my future goal to become a full-stack developer, capable of developing web apps independently. Therefore, the learning roadmap was apparent. According to my target, I devised a learning strategy of starting with front-end, then back-end, and finally blockchain + artificial intelligence, basic before framework. HTML, CSS, and Javascript are all just the basics of front-end. The content of Javascript is relatively large, and as a programming language, its complexity and learning curve are much higher than HTML and CSS, so I put it behind. As for HTML and CSS, both are markup languages, relatively simple, three days are enough. I divided three days into six half-days, each half-day focused on one theme. In the first and second half-days, I focused on learning HTML, starting with basic tags, then learning how to layout, embed images, and links, etc. In the next two half-days, I focused on CSS, learning how to use it to beautify web pages, modify fonts, colors, and layouts, etc. On the last day, I devoted all the time to follow a quality tutorial on YouTube to do a small project - cloning the YouTube homepage, thus practicing all the knowledge I learned. Adult learning should follow the "Learn, Practice, Use, Create" stages. Obviously, 3 days is not enough to reach the Use and Create stages, but by truly creating some actual small projects, we can basically complete the Learn and Practice stages. Learning resources and process: Due to limited time, I couldn't choose lengthy video tutorials that take tens of hours. As a beginner, I also couldn't pick those seemingly short but demanding lots of prior knowledge tutorials or documents. Therefore, a balance needed to be considered. So on the first day, I spent some time quickly completing and on the htmlDog website. This part is straightforward, even for a novice with zero foundation. Still, after learning, I had an idea of what HTML is and what it can do.
With these basic concepts, the following steps were easy. For the rest of the day, I opened the and quickly went over the HTML-related content. I set aside the ones I didn't understand for the time being, focusing on mastering the usage of some common tags, and reinforcing the content I learned in the morning. the HTML Beginner Tutorial HTML Intermediate Tutorial w3school webpage On the second day, like the first day, I quickly completed and on the htmlDog website. It's also a simple introductory course suitable for beginners to understand the basic concepts. For the rest of the day, I again devoted to . If you have time, I recommend browsing the book "CSS in Depth" by Keith J. Grant. Reading it all will undoubtedly take a lot of time, but we only need to look at the first chapter for now. After reading the first chapter, you will have a deeper understanding of the underlying logic of CSS operation. the CSS Beginner Tutorial CSS Intermediate Tutorial w3school's CSS content The whole day and night of the third day, I mainly followed a quality tutorial on YouTube to complete my practice project. I have browsed countless HTML and CSS video tutorials online, but I can assure you that this is the best one I have seen. This guy is legendary, he's excellent at letting beginners and dummies like me quickly understand concepts and code and apply them to practice. is over 6 hours long, and it's not easy to complete it in one day. Even though the study of the past two days has given me a lot of basic knowledge and simple uses of HTML and CSS, I fought from early morning to late night on the third day to barely keep up with the whole tutorial. Without the foundation of the first two days of study, I'm sure I couldn't finish this tutorial in one day. This video Final suggestions: As a beginner, learn to reconcile with yourself and calmly accept your clumsiness at the beginning. Because this is very normal, it's just a regular process of learning new things, after all, most of us are not geniuses. If you haven't set a long-term learning goal (like I hope I can develop web apps independently in the future), you can first set a shorter and smaller target, such as writing a simple Python program (e.g., a weather forecast app). Then, you can research what kind of learning resources (books, courses, tutorials) will help you reach this goal. The advantage of this is that you can focus your attention, avoid being disturbed by irrelevant information, and you can apply your new knowledge in a practical project immediately. Value interaction with the community, but don't rely completely on others' help. Instead, make good use of tools to solve encountered problems. I've read many experience posts about learning to program, and they all emphasize integrating into the community and getting community help. However, when I truly encountered problems, I found that timely and effective help was not necessarily available from social networks or Q&A sites like Stack Overflow. In fact, most of the problems I encountered were solved through Google and ChatGPT, especially when we are pursuing efficiency in learning! If we harbor ideals, are willing to challenge ourselves, explore the unknown, then age, background, money, intelligence, nothing will become obstacles to us changing ourselves and growing continuously. Regardless of where we are, at what stage of life, we can all become better! That concludes my week of self-learning experience. I'm sincerely sharing it in the hope that it can be helpful to some extent for other self-learners. The path of self-learning is not easy, but as long as we stick to it and keep moving forward, I believe we can all achieve our goals. Stay hungry, stay foolish. Let's keep learning and growing!

The writer was physically present in relevant location(s) to this story. The location is also a prevalent aspect of this story be it news or otherwise.

Over 40, With No Technical Background, This is How I Learned HTML and CSS in 3 Days

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

$500M TVL Within A Week: Lessons from #Blur and #Blast🚀

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

104 Stories To Learn About Programming Top Story

$500M TVL Within A Week: Lessons from #Blur and #Blast🚀

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

104 Stories To Learn About Programming Top Story

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps