My journey into front-end development is going very well, and each day boosts my confidence. Today, I stepped into the world of CSS, adding another layer of skills to my growing toolkit. CSS, or Cascading Style Sheets, is a fundamental technology used to style and layout web pages. Understanding how to effectively use CSS is crucial for creating visually appealing and responsive websites.
Introduction to CSS
On my third day, I learned the basics of adding CSS to HTML. There are three primary methods:
Inline CSS: Adding styles directly within HTML tags using the
styleattribute.Internal CSS: Placing CSS rules within a
<style>tag in the<head>section of the HTML document.External CSS: Creating a separate CSS file and linking it to the HTML document using the
<link>tag. I quickly realized that the third method is the best choice for maintaining cleaner and more manageable code.
Basic CSS Properties I Learned
Here are some basic CSS properties I learned:
Margin: Controls the space outside an element's border.
Padding: Controls the space inside an element's border.
Border: Defines the border around an element.
Color: Sets the color of text.
Font-Family: Specifies the font for text.
I also explored additional features such as:
Hover: Changes the style of an element when the mouse hovers over it.
Focus: Applies styles when an element gains focus.
I put my new CSS skills into practice by completing a small project. This hands-on experience helped solidify my understanding of how CSS works and how it can transform the appearance of a webpage. I also uploaded it to GitHub; the project link is here.
Project Assignment
As an assignment, I was tasked with replicating a design using the CSS techniques I had learned. I successfully completed this project and posted it on GitHub. You can check out the project here. See the attached picture for a preview of the project.
I recently shared my learning journey on LinkedIn, detailing my progress and projects. As part of an assignment, I replicated a design using CSS techniques I had learned. The project is now live on GitHub, where you can check it out here. Take a look at the attached picture for a preview of the project.
Every step in this journey is a valuable learning experience, and I'm eager to continue growing my skills in frontend development. Stay tuned for more updates as I delve deeper into this exciting field!