HTML & CSS for beginners: The building blocks of web development By: Amy Mansell April 17, 2025 Estimated reading time: 3 minutes. Web development starts with two fundamental technologies: HTML and CSS. If the internet were a house, HTML would be the framework—the bricks, wood, and foundation—while CSS would be the paint, furniture, and decor that make it visually appealing. Whether you're looking to build a simple webpage or lay the groundwork for a career in web development, understanding HTML and CSS is the essential first step. What are HTML & CSS? HTML (HyperText Markup Language) is the foundation of every webpage. It structures content using elements like headings, paragraphs, lists, and links. Without HTML, webpages would have no meaningful organization. CSS (Cascading Style Sheets), on the other hand, is responsible for styling. It defines colours, fonts, layout, and responsiveness, ensuring a polished and user-friendly experience. When combined, HTML and CSS bring webpages to life. A basic webpage might start with HTML for structure, followed by CSS to enhance its appearance. For example: html <!DOCTYPE html> <html> <head> <title>My First Webpage</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1>Welcome to My Website</h1> <p>This is a simple webpage created with HTML and styled with CSS.</p> </body> </html> And in the styles.css file: body { font-family: Arial, sans-serif; background-color: #f4f4f4; color: #333; text-align: center; } h1 { color: #0077cc; } Understanding HTML: The structure of a webpage HTML uses a system of elements enclosed in angle brackets (<>). These elements act as building blocks, defining the structure of a webpage. For instance: - <h1> to <h6> define headings, with <h1> being the largest and most important. - <p> defines paragraphs of text. - <a> creates hyperlinks, allowing users to navigate between pages. - <img> embeds images. - <div> and <section> group elements together for layout purposes. One crucial aspect of HTML is semantic markup. Semantic elements, such as <article>, <nav>, and <footer>, provide meaning to the content, improving accessibility and SEO. Consider this example: html <article> <h2>Latest News</h2> <p>Today's top story is about web development trends.</p> </article> Using semantic tags instead of generic <div> elements makes the content clearer to both search engines and assistive technologies. Understanding CSS: Styling your webpages CSS enhances the appearance of HTML elements by defining styles using selectors and properties. A CSS rule typically consists of a selector (the HTML element to be styled) and a set of properties and values. For example: css p { font-size: 16px; line-height: 1.5; color: #444; } CSS can be applied in three ways: - Inline CSS (inside an HTML element’s style attribute) is useful for quick changes but not recommended for large projects. - Internal CSS (inside a <style> tag within the HTML file) is useful for single-page styling. - External CSS (linked via a separate stylesheet) is the best practice for maintainability and scalability. The Box Model Understanding the CSS Box Model is key to mastering layout design. Every HTML element is essentially a rectangular box consisting of: - Content (the actual text or image inside an element) - Padding (space between content and border) - Border (the outline of the element) - Margin (space outside the border separating it from other elements) .box { width: 200px; padding: 20px; border: 2px solid #000; margin: 10px; } Positioning and layout techniques To create well-structured layouts, CSS offers several techniques: - Flexbox simplifies alignment and spacing between elements: css .container { display: flex; justify-content: space-between; align-items: center; } - CSS Grid allows for two-dimensional layouts with rows and columns: css .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } - Media queries make websites responsive for different screen sizes: css @media (max-width: 600px) { body { background-color: lightgray; } } How to start learning HTML & CSS There are many free and paid resources available to learn HTML and CSS. Some highly recommended options include: Lighthouse Labs’ HTML & CSS Free Course Interactive platforms like freeCodeCamp, Codecademy, and MDN Web Docs Hands-on practice by building small projects, such as personal blogs or portfolio websites Using browser developer tools (F12 or right-click → Inspect) to experiment with code in real time Next steps: Moving beyond HTML & CSS Once you’re comfortable with HTML and CSS, the next step is learning JavaScript to add interactivity to your webpages. Frameworks like Bootstrap or Tailwind CSS can also help you design professional-looking websites efficiently. Understanding hosting and domain management is crucial if you plan to publish your site online. For those serious about a career in web development, enrolling in a Web Development Bootcamp can fast-track your journey. A bootcamp provides structured learning, mentorship, and hands-on projects to build a portfolio. Become a job-ready developer! Classes start soon and there's room for you. Learn more Conclusion: Start building today! Mastering HTML and CSS is the foundation of becoming a web developer. Whether you’re creating your first webpage or exploring a new career path, starting with these core skills opens up endless possibilities. Take the first step today with Lighthouse Labs’ HTML & CSS Free Course and start coding your future!