top of page

Web Design Basics: Understanding HTML and CSS Building Blocks


 
 
INTRODUCTION

"How do people make these awesome websites?" Well, I've got good news - it's not as complicated as nailing the perfect BeReal post! Think of HTML and CSS like creating the perfect social media post. HTML is like writing your caption - it's the actual content and structure. CSS is like adding those filters and aesthetic vibes that make everything look chef's kiss perfect. Together, they're the dynamic duo that makes the internet look good!


Never written code before? If you can customize your phone settings or create a Spotify playlist, you can build a website! Whether you want to showcase your side hustle or start a blog about your plant babies, you're in the right place. Ready to become the main character of your web development story?


In this post we’ll take a look at the following:

  • Background

  • What is HTML/CSS?

  • How can you get started and where can you find resources to start?

  • Conclusion


BACKGROUND

In the middle of this year, I got chosen to work on a ASP.NET project and got assigned the role of Front-End developer. For those that don’t know what a Front-End Developer is, it’s the person responsible for creating the website user interface and make sure that users can interact with the website and its functions in a seamless manner. In laymen terms its everything the user either sees or interacts with when they visit the website.

Coming from a Mobile Development background and I did not know where to start or what I was doing, but here are a few things I’ve learnt along my journey and a couple of resources which helped me go from zero to hero. But first let me give you an introduction to HTML/CSS.


For those interested in finding out more about ASP.NET and what it is feel free to check out the resource I provided : https://dotnet.microsoft.com/en-us/apps/aspnet


WHAT IS HTML/CSS

HTML

HTML stands for Hyper Text Markup Language and is basically the building blocks of every webpage and provides our webpages we interact with on a daily basis structure. Every button, dropdown or even text that we read are markedup using HTML. For those who'd like to learn more about Markup Language, feel free to check out the link provided below:


Below is a sample of what HTML code looks like to give you a better idea:

Side note: The CSS is linked to the HTML using a <link> tag. To learn more about <link> tags in website development feel free to check out the link below:


CSS

Now let’s move on to CSS. CSS stands for Cascading Style Sheets and is responsible for all the color, styling choices like font weight, font size, etc. For those who have a creative mind and love colors and designing things, CSS will either be your best friend or your worst enemy.


Below is an example showing you how you would style the HTML code above:


By combining the HTML/CSS code above you get the following result:


Explanation:

  • The <h1> tag is the huge heading displaying “Welcome to my blog post example”

  • And the <p> tag is the small text below that displaying “This is a demo of my blog post”

  • Note how each of it is styled in the CSS section for it to make sense


Fun Fact: In 1993, computer scientist Tim Berners-Lee, working at CERN, invented HTML, which became the backbone of the World Wide Web (WWW). His creation spread quickly and connected people across the globe, earning him a spot on the list of Internet pioneers! 🌐🌐


GET STARTED

These days there are quite a few a resource’s out there on HTML/CSS as it’s been around since the dawn of the internet. But what I found has worked for me are the resources listed below:


freeCodeCamp

freeCodeCamp is really one of the reasons I accelerated my knowledge base on HTML/CSS and took me from knowing nothing to being an average Web Developer in the span of 3 months. Their course https://www.freecodecamp.org/learn/2022/responsive-web-design/ is known by many self-taught web developers and is recognized as one of the best. They provide you with coding challenges and explain to you what to do each step of the way and if you get stuck, they have a FORUM as well. Where you can ask questions or check if your question/problem hasn’t been answered already.


To learn more about https://www.freecodecamp.org/ feel free to check out the following blog post by Ashton Padiachy to help you get started on the platform with a step by step guide:


Side Note: You can complete their course in a much shorter period of time than 3 months, it’ll just depend on how much time you willing to put aside to doing coding challenges!!


w3schools

w3schools is another resource that has helped me accelerate and better the knowledge I already had after doing my freeCodeCamp Responsive Web Design Course. As I progressed and started bettering what I already knew and wanted to create more complex designs, w3schools always came through with an assist, giving me and showing me example code on how to achieve what I wanted to.


Side Note: w3schools provides tutorials as well on the fundamentals of HTML/CSS


If you’d like to check them out click the link below:


Stack Overflow

And last but not least stack overflow. I cannot stress this enough; stack overflow is really any developer's version of superman (or whichever superhero is your favorite). It has saved me so many times when getting stuck. I would advise any developer learning to code to create an account and start asking questions whenever they get stuck. It’s really a cool way of interacting with experienced developers as they give you industry standard insight, help you structure your code better as well and most important, solve the problem you stuck on.


P.S This is a must if you do not have an account already create one!!!!: https://stackoverflow.com/



All these resources I learnt from are pretty cool and help you accelerate your knowledge base from zero to somewhat of a hero. But none of it would matter if you don’t actually create projects, so while learning take that first step and start creating your own website about literally anything!!! And over time your skill level will increase until ultimately you become a hero when it comes to HTML/CSS. So happy coding!!!!!


Here’s a full list of all the resources:

CONCLUSION

In conclusion, On the road to learn HTML and CSS is both exciting and empowering, especially when you're starting from scratch. These core technologies are the very essence of web development, giving you the ability to build everything users see and interact with on a website. My own path from zero to hero as a Front-End Developer showed me that progress comes from consistent practice and making use of the best resources available.


Remember, the key is to keep pushing forward and start creating projects as you learn. Build your own website about anything that inspires you and watch your skills improve. So, dive in, experiment boldly, and turn your web design dreams into reality. Happy coding, and here’s to your future as an HTML/CSS hero! #HTML #CSS #WebDevelopment #FrontendDeveloper #CodingJourney #LearnToCode #WebDesign #CodeNewbie #freeCodeCamp #w3schools #StackOverflow #ZeroToHero #DeveloperTips







Recent Posts

See All

Comments


bottom of page