We just published a course on the freeCodeCamp.org Spanish YouTube channel that will teach you Tailwind CSS. You will go from the basics to actually building your own real-world projects. By the end of the course, you will be able to design and implement responsive websites with Tailwind CSS.

If you have Spanish-speaking friends, you are welcome to share the Spanish version of this article with them.

This course was created by David Ruiz. David is a Front-End Web Developer with more than 5 years of experience. He shares projects and courses on Tailwind CSS, HTML, CSS, JavaScript, and React on his YouTube channel.

He will teach you how to create and implement modern and responsive web designs step by step with the pre-defined Tailwind CSS classes.

Before we start diving into Tailwind CSS with David's course, let's have a quick introduction. We'll talk about what Tailwind is and why it's useful to learn if your goal is to design and create modern and responsive websites quickly and efficiently.

What is Tailwind CSS?

Tailwind CSS is a CSS framework with pre-defined classes that you can use for styling HTML elements.

With Tailwind, you can add CSS classes to your HTML elements directly within the HTML file and see how the pre-defined styles are applied immediately.

💡 Tip: Yes! With Tailwind CSS, you write your CSS within the HTML file.

Tailwind CSS (Official Website).

Why Choose Tailwind CSS?

Learning Tailwind CSS can bring many advantages to your web development workflow, including:

• Faster development because you can use pre-defined CSS classes instead of defining the CSS styles yourself.
• Responsive design because these pre-defined CSS classes support variants for different screen sizes. You can develop responsive website directly from your HTML file, without additional media queries.
• Simpler CSS files because you will not be defining all the styles yourself in custom CSS files.
• Consistency because you and your colleagues will be using the same CSS classes with the same naming conventions throughout the project.
• Customization features because you can customize and configure many of these pre-defined CSS classes to fit your needs.

Sounds great, right? 🙂

Styling a Form with Tailwind CSS (Course Screenshot).

By learning Tailwind CSS, you will be acquiring valuable skills for your web development career.

If you are ready to start incorporating Tailwind CSS into your workflow, let's check out the course content.

Tailwind CSS Course in Spanish

During the course, you will learn the following aspects of Tailwind CSS:

• How to install and configure Tailwind CSS
• Colors
• Size
• States
• Pseudo-classes
• Responsive Web Design
• CSS Flexbox with Tailwind CSS
• CSS Grid with Tailwind CSS
• And more!

Plus, you will learn how to toggle dark mode with pre-defined styles from Tailwind CSS and you will build three full real projects:

• A notifications panel
• A dashboard
• A landing page

If you are ready to learn Tailwind CSS, check out the course in Spanish on the freeCodeCamp.org Spanish YouTube channel:

✍️ Course created by David Ruiz.

• YouTube: @CodingTube
• Twitter: @CodingTube
• Página web: https://www.codingtube.dev/
• GitHub: @Davichobits
• LinkedIn: David Israel Ruiz Cabrera

We just published a course on the freeCodeCamp.org Spanish YouTube channel that will teach you Flexbox from the fundamentals. By the end of the course, you will be able to design and implement responsive layouts.

If you have Spanish-speaking friends, you are welcome to share the Spanish version of this article with them.

This course was created by Leosbel Poll Sotomayor. Leosbel is a software engineer with more than 10 years of experience. He started creating more than 20 years ago in Cuba, and is now living in Canada thanks to his programming skills. He created this course for the freeCodeCamp community.

Are you ready? Let's see a quick overview of Flexbox and what you will learn during the course.

What is CSS Flexbox?**

CSS Flexbox stands for CSS Flexible Box Layout. It's a layout model that allows responsive elements to be rearranged within a container based on CSS properties that define how the children should "move" to fit the size of their container.

With Flexbox, you can align, distribute, and space elements using simple properties, so you can avoid complex computations in your CSS.

During the course, you will learn how to use these properties:

• **flex-direction**
• **justify-content**
• **flex-wrap**
• **align-items**
• **align-content**
• **flex-grow**
• **flex-basis**
• **flex-shrink**

And more! You will also learn how to combine them with media queries to create even more powerful responsive layouts.

Flexbox layout. Wrapping elements automatically.

Career Opportunities

If your goal is to have a career in the field of web development, Flexbox will be super helpful for you. These skills are in high demand and widely sought by employers.

Flexbox layout. Classic design with a navigation bar, sidebar, main area, and footer.

Flexbox Course in Spanish**

Awesome. Now that you know why Flexbox is so important, let's check out the topics that you will learn during the course:

• Introduction
• What is Flexbox?
• Importance of Flexbox
• Flexbox Fundamentals
• Tools that you will use during the course
• How to set up your development environment
• Properties related to containers
• Loss of data in CSS
• Properties related to children
• Use case: Navigation Bar
• Use case: Classic Design
• Flexbox vs. Grid

If you are ready to learn Flexbox, check out the course in Spanish on the freeCodeCamp.org Spanish YouTube channel:

✍️ Course created by Leosbel Poll Sotomayor.

• YouTube: LeoDev
• Twitter: @_LeoDev
• LinkedIn: Leosbel Poll Sotomayor

We just published a 3-hour course in Spanish on freeCodeCamp's Spanish YouTube channel that will teach you how to build 7 projects with HTML, CSS, and JavaScript.

If you have Spanish-speaking friends, you are welcome to share the Spanish version of this article with them.

Course Projects

Snake Game

In this project, you will work with HTML canvas, CSS, and JavaScript to create the classic Snake game that will give you many hours of fun.

In this game, the player controls a snake that moves through a grid-like environment. The goal is to eat the "food" that appears at random locations, but be careful because food makes the snake grow in length. If the snake collides with itself, the game is over.

The Snake game you'll build

Stopwatch

Track time with this awesome stopwatch that you can start, pause, stop, and restart. You will build it step by step with HTML, CSS, and JavaScript.

The stopwatch you'll build

Caesar Cipher

Caesar cipher is an encryption technique used by Julius Caesar in ancient Rome. It works by shifting each letter of the alphabet by a fixed number of positions.

You will use HTML, CSS, and JavaScript to build a user interface where you can use this technique to encrypt your messages and get the encrypted text.

The Caesar Cipher you'll build

Interactive Calculator

An interactive calculator is a project that should be present in every web developer's portfolio. You will build this interactive calculator step by step with HTML, CSS and JavaScript.

The calculator app you'll build

To-do List

You will build this to-do list project with HTML, CSS, and JavaScript. It's the perfect opportunity to practice your DOM manipulation skills by adding, sorting, and marking tasks as completed.

The todo list you'll build

Hangman Game

You will build a graphical version of the classical hangman game using HTML canvas, CSS, and JavaScript. The hangman will be drawn step by step when the user makes mistakes. If the hangman is completed, you lose the game!

The game you'll build

Color Palette Generator

Finally, you will build an interactive color palette generator that will give you a new set of colors if you click on the "Generate Palette" button. It will be updated automatically.

The color palette generator you'll build

Be ready to practice your HTML, CSS, and JavaScript skills by building these projects. You will also work with the DOM and the HTML canvas for creating interactive user interfaces.

By the end of the course, you will be able to build your own interactive projects.

💡 Tip: Please note that it would be helpful to have some knowledge of HTML, CSS, and JavaScript before taking this course. If you would like to review these topics, we have introductory courses on the channel.

You can watch the course on freeCodeCamp's Spanish YouTube channel:

✍️ Course created by Manuel Basanta.

• YouTube: Programación Accesible
• Twitter: @manuelbasanta

We just published a course on the freeCodeCamp.org Spanish YouTube channel that will teach you JavaScript from the fundamentals to the more advanced concepts. You'll also learn everything you'll need to get started with frameworks and libraries like React.js and Vue.js.

If you have Spanish-speaking friends, you are welcome to share the Spanish version of this article with them.

This course was created by Carlos Azaustre. Carlos is a Telematics Engineer with more than 10 years of experience working as a Software Engineer and Developer Relations at companies like Google, IBM Research, and Eventbrite.

What is JavaScript?

JavaScript is one of the most widely used programming languages because it is a building-block of the interactive web that we know today. It is used for developing interactive websites, web servers, mobile applications, games, and more.

With JavaScript, the possibilities are endless.

What makes JavaScript so powerful is its ability to manipulate the DOM (Document Object Model), the structure of web pages. With JavaScript, you can add, modify, and remove the elements of a web page and create the interactive behavior that makes the web so powerful today.

Without JavaScript, the web would just be a set of static web pages, showing the same content all the time. If you cannot imagine a world without the interactive web, you cannot image a world without JavaScript.

JavaScript was originally intended to be used for the web. It was designed to run in the browser, so by default, browsers can understand and interpret JavaScript code.

With modern tools like Node.js, now we can also run our code in the terminal. This is very powerful and used very frequently by developers.

Career Opportunities

If you learn JavaScript, you will find career opportunities in almost every field of your choice. JavaScript skills are in high demand and widely sought by employers.

Libraries and Frameworks

In addition, there is a vast array of libraries and frameworks based on JavaScript, including:

• React.js
• React Native
• Vue.js
• Angular.js
• Next.js

These are just some of the most popular ones. Each one has its own unique applications, but they are so diverse that I'm sure that you can find a JavaScript library that fits your needs.

JavaScript Course in Spanish

Awesome. Now that you know why JavaScript is so important, let's check out the topics that you will learn during the course:

• Basic JavaScript Concepts
• JavaScript Loops
• Data Types and Core Classes in JavaScript
• Arrays in JavaScript
• The this object
• Closures
• Asynchronous JavaScript (Promises and Async/Await)
• New Features of ES6 and more

If you are ready to learn JavaScript, check out the course in Spanish on the freeCodeCamp.org Spanish YouTube channel:

✍️ Course created by Carlos Azaustre.

• YouTube: Learn JavaScript with Carlos Azaustre
• Twitter: @carlosazaustre
• LinkedIn: Carlos Azaustre

We just published a course on the freeCodeCamp.org Spanish YouTube channel that will teach you how to build a Pokédex step by step with HTML, CSS, and JavaScript, using data from the PokéAPI.

If you have Spanish-speaking friends, you are welcome to share the Spanish version of this article with them.

Carpi Coder teaches this course. He has been a web developer since 2014 and currently works on multiple projects. He has learned from many communities, including freeCodeCamp.

In 2020, he started sharing his knowledge with the community through the videos that he shares on his YouTube channel. And now he is sharing this amazing project with the freeCodeCamp community.

What the Course Covers

The course will teach you how to create a Pokédex with the most iconic Pokémon. You will get their data and statistics from the PokéAPI to show their names, images, numbers, categories, and weight.

You will also be able to filter the Pokémon based on their categories.

This is the Pokédex that you will create during the course. Looks great, right?

💡 Tip: If you would like to check out the final version of the project, here you can see it live.

What Should You Know Before Taking the Course?

It would be helpful to have basic knowledge of HTML, CSS, and JavaScript to take the course. During the course, you will learn how to build this project step by step and you will be able to download and read the code files in the course repository.

Watch the full course below or on the freeCodeCamp.org Spanish YouTube channel (1-hour watch):

✍️ Course created by Carpi Coder.

• X: @carpicoder
• GitHub: carpicoder
• Sitio Web: carpicoder.com

‌‌‌‌In this podcast, we'll dive into the stories of inspiring people in the world of technology and content creation. Our goal is to bring you closer to the experiences of those who are making their mark in the Spanish-speaking developer community.

To start off on the right note, I'm pleased to share with you our first three episodes:

Matías Baldanza

Episode 1 – Matías Baldanza: Retaking Programming and Building in Public (@matiasbaldanza)

In this episode, Matias shares with us his unique career path, his shift in focus to web development, and how he deals with challenges in learning programming.

This is an episode full of valuable tips and a unique perspective on the world of web development.

Kelvin Sanchez

Episode 2 – Kelvin Sanchez: Testimony of Perseverance and Determination (@kelvin_sanchez)

Kelvin talks about his fascinating professional transformation and his significant contribution to freeCodeCamp as a translator and proofreader.

He also gives us an in-depth insight into his experience with publishing a original article on Next.js.

Estefania Cassingena Navone

Episode 3 – Estefania Cassingena Navone: From MITx Student to freeCodeCamp Content Creator (@EstefaniaCassN)

Estefania shares with us her passion for programming, her teaching experience, and how she keeps up to date in such a dynamic field.

Get ready to learn about her content creation process and how she has managed to spark interest in programming in many through her online courses.

Check Out freeCodeCamp's New Spanish Language Podcast

We hope these episodes provide you with a fresh perspective, inspiration, and a greater understanding of the world of technology. ‌‌‌‌

We invite you to join us on this adventure and look forward to seeing you on our new freeCodeCamp podcast.‌‌‌‌

If you find our content useful, please share it with your friends to help more people discover it. Also, we would greatly appreciate it if you could leave us a five-star review on the platform you use to listen to us. ‌‌‌‌

Your support is invaluable and helps us continue to provide educational programming resources for free.

See you soon!

In this article, you will find a brief introduction to Git and GitHub. You will learn why they are very powerful tools and why you should learn them if your goal is to be a developer.

Then, you will find a 5+ hour Git and GitHub course on freeCodeCamp's Spanish YouTube channel where you can learn the fundamentals in Spanish with practical examples and projects.

If you have Spanish-speaking friends, you are welcome to share the Spanish version of this article with them.

Let's begin! ✨

🔸 What is Version Control?

First, let's see what version control is because this concept is essential for Git and GitHub.

Haven't you ever wished that you could track the changes you have made to a project or even go back to a previous version of a file?

Let me tell you that this is possible with version control.

With a version control system, you can keep track of the changes you make to your files and keep multiple versions of your project on the same computer simultaneously. This way, you can switch between different versions of your project as you make changes and create new features.

That is the power of version control.

You can keep an "experimental" version of your project to work on a new feature while you also have the stable version of your project live for your users.

Two of the most popular version control tools in the global developer community are Git and GitHub. Let's start with a brief overview of Git.

🔹 What is Git?

Git is one of the most popular version control systems among the developer community. I promise you that learning Git will be totally worth your time if your goal is to be a software developer.

Git (official logo).

With Git, you can track the changes you make to your files and work with different versions of your project on the same computer.

By learning a few important Git commands, you can focus on your software development projects while Git takes care of the internal details of all the important version control tasks.

◼️ Basic Git Concepts

Now that you know what Git is, let's see some concepts that are essential for working with Git:

Git Repository

A repository is where Git stores our project files and tracks their different versions. A repository can be either local or remote.

A local repository is stored locally on your computer. A remote repository is stored remotely on the servers of the hosting service of your choice (like, for example, GitHub).

Working directory

The working directory is the directory of the project in our file system where the files are stored. This is, for example, the folder that you open in your code editor or IDE to work with your files.

Staging area

The staging area contains the set of files and changes that will be included in the next commit (a record of the changes made to the repository). We can add and remove files from this area if we need to.

Commit

A commit is like a "snapshot" of your project at a particular moment in time. A commit records changes that have been made to the project. You choose when to create a commit and what to include in that commit.

💡 Tip: To describe the changes recorded in a commit, we write a commit message that we can check later on as we work on the project.

Branch

A branch is an independent line of development of a project tracked by Git. Every project starts with a default branch that we usually call **main**. We can create a new branch to work on a new feature without affecting the main version of our project.

Merge

We can also combine (merge) branches when we need to incorporate the changes that have been made on one branch into another another. This is what we usually do when a new feature is ready to be added to the live version of our project.

These are fundamental concepts for working with Git. Now let's see the actual command-line tool that we will work with.

◼️ Git Bash

During the course, we will use Git Bash, a command-line tool for Windows that provides an environment where we can run Git commands.

💡 Tip: Bash stands for Bourne Again Shell. A bash is an application used to interact with the operating system of a computer through commands.

Screenshot of Git Bash (Windows)

Great! Now that you know more about Git, let's start diving into the basics of GitHub. Git and GitHub work together to create the workflow that software developers use every day.

🔸 What is GitHub?

GitHub's Official Homepage

When you work with Git, everything you store on your repository is only stored locally. Only you can have access to your repository and to your changes.

This can be exactly what you need if you are working on a personal project.

However, if you are part of a team, you will need to collaborate with other developers to modify the same codebase, which can be very problematic if there is no way to have quick access to the changes made by other developers.

This is where GitHub comes to the rescue!

When you create a GitHub repository, all the members of the team have access to this repository. They can create local copies (clones) of the remote repository on their computers.

These clones are super helpful because developers can work with the files locally, make changes and commits, and send them back to GitHub.

When the remote repository receives new changes, team members can also incorporate these changes into their local repositories to make sure that there are no conflicts between their changes and the changes made by their colleagues.

That is the power of Git and GitHub. Now let's see some data on why you should learn Git and GitHub if your goal is to be a developer.

🔹 Why Should You Learn Git and GitHub?

Git and GitHub are used widely across many different fields and organizations.

💡 Tip: At freeCodeCamp, we use Git and GitHub to maintain and update the live version of the learning platform that you can see and use every day.

Git's official website also mentions that these companies and projects use Git:

• Google
• Microsoft
• Twitter
• LinkedIn
• Netflix
• PostgreSQL
• Android
• Linux
• Ruby on Rails
• Gnome
• Eclipse

According to the Stack Overflow Developer Survey 2022:

No other technology is as widely used as Git. Especially among Professional Developers.

The results are very consistent. 93.87% of the 71,379 developers who answered this question on the survey use Git as their version control system.

The results of the Stack Overflow Developer Survey 2022 for the category Version control systems. 93.87% of the respondents chose Git as their version control system.

In addition to being a very valuable tool in real-world scenarios, Git is also one of the most popular version control systems in the community of learners who are learning how to code.

Among the respondents who are learning how to code, 81.87% of them use Git.

The results of the Stack Overflow Developer Survey 2022 for the category Version control systems. 81.87% of the respondents who are learning how to code use Git.

Based on these results, you can see that Git is a very powerful tool for software developers from all background and levels of experience.

When you combine the power of Git with the power of GitHub, you unlock the true power of version control.

For example, freeCodeCamp's repository is an open-source project hosted on GitHub.

freeCodeCamp's GitHub repository

GitHub's official website also mentions that the following organizations host their repositories on GitHub:

• Stripe
• Pinterest
• KPMG
• Mercedes-Benz
• Procter & Gamble
• Telus

According to the Stack Overflow Developer Survey 2022:

GitHub is the most popular Version Control for both personal and professional use.

In this survey, GitHub was the most popular version control platform among the developer community.

The results of the Stack Overflow Developer Survey 2022 for the Version control platforms category.

Another great thing about GitHub for learners who are learning how to code is that every profile has a calendar for tracking contributions. This is an interactive calendar with one small square per day.

If you made more contributions on a particular day, you will see a darker shade of green on its corresponding square.

Contributions calendar from this article by GitHub.

This interactive calendar is frequently used by recruiters to evaluate your experience, projects, and contributions.

When you are actively contributing to projects hosted on GitHub, you create a timeline of contributions that recruiters can review to see how you communicate with other developers and how you face challenges.

Basically, when you contribute on GitHub, you are gradually creating your developer portfolio while you also acquire experience with real-world projects.

Great! Now that you know what Git and GitHub are, and why you should learn, them, let's dive into the course content.

🔸 Course Content

This is a brief outline of the topics that you will learn during the course. By the end of the course, you will be able to work with Git and GitHub on your personal and professional projects.

We will working with text files and simple code files, so you can take this course regardless of the programming language(s) that you have learned so far or even if you are just starting to dive into the amazing world of programming.

💡 Tip: My goal is to teach you the Git and GitHub workflow step by step in a way that will be completely independent from the content of the files. This way, you will be able to apply your knowledge to any coding project.

Introduction to Git

• What is Git? Real-life applications.
• Concept of a repository.
• How to install Git and Git Bash.
• Git Bash Commands.
• Configure Git username and email.

Git Repositories

• How to create a Git repository.
• Working directory.
• Staging area.
• **.git** directory.
• The **git status** command.

Git Commits

• What is a commit?
• How to create a commit.
• Show commit history with **git log**.
• Configure a Git editor (Visual Studio Code).
• Amend the most recent commit.
• Undo a commit.

Branches

• What is a branch?
• How to create a branch.
• The **main** branch.
• Checkout a branch.
• Rename a branch.
• Delete a branch.
• Create commits on a branch.
• See commit history on a branch.

Merging Branches

• What is merging?
• How to merge two branches.
• Merge conflicts.
• How to delete a branch after merging it with **main**.

Introduction to GitHub

• What is GitHub?
• Create your account and profile.
• Customize repository settings.
• Rename a repository.
• Delete a repository.

Git and GitHub Workflow

• Clone a repository.
• Send (push) changes to GitHub.
• Receive (pull) changes from GitHub.
• HTTPS validation for pushing changes.
• **git pull** vs. **git fetch**
• Fork a repository.
• Clone a forked repository.
• What is a pull request?
• Start and submit a pull request.
• Update a forked repository.
• What is an issue?
• How to open an issue.
• Issue templates.
• Labels for issues and pull requests.
• Clone new remote branches to a local repository.
• Delete remote and local branches.

We will see how these principles and elements work on a real project: freeCodeCamp's GitHub repository.

freeCodeCamp's GitHub repository

We will also create small projects as you learn these topics step by step.

📌 Git and GitHub Course

Awesome. Now that you know more about Git and GitHub and what you will learn during the course, you are welcome to start taking the course in Spanish:

✍️ Course created by Estefania Cassingena Navone. Check out my YouTube channel (Coding with Estefania) and Twitter @EstefaniaCassN.

I really hope you like the course and find it helpful to take your first steps into the world of version control.

You are also welcome to continue learning with our other Spanish courses:

In this article, you will find a brief introduction to responsive web development and Bootstrap 5. You will also learn why you should learn them if your goal is to be a front-end web developer.

Then, you will find a 5-hour Bootstrap 5 course on the freeCodeCamp Spanish YouTube channel. In this course, you can learn the fundamentals in Spanish and build your portfolio website step by step using Bootstrap components, icons, and grid.

If you have Spanish-speaking friends, you are welcome to share the Spanish version of this article with them.

💡 Tip: to take the course, you should have previous knowledge of HTML and CSS. If you need to review these topics, I invite you to take our full courses on the Spanish YouTube channel.

Let's begin! ✨

🔹 What is Bootstrap?

Let's start with an introduction to Bootstrap. The official Bootstrap documentation defines it as a:

Powerful, extensible, and feature-packed frontend toolkit.

Bootstrap 5 - Official Website

Let's see the main keywords of this definition more closely:

• Bootstrap is powerful because it has many features, including pre-defined CSS classes that you can apply to your HTML elements to assign style instantly. With Bootstrap, you can also use powerful JavaScript plugins to create elements like carousels, modals, tooltips, and more.
• Bootstrap is extensible because you can extend or customize the pre-defined CSS classes that come with Bootstrap to fit your needs. If you ever need to change a color, you can do so with custom CSS selectors, ids, and classes. You can also customize the JavaScript code that powers certain Bootstrap components.
• Bootstrap is used for front-end web development because this area of web development focuses on designing and developing the user interface, the part of the website that users see and interact with directly.

💡 Tip: basically, Bootstrap gives you all the tools you need to develop responsive websites with pre-defined components, icons, and styles.

Examples of Bootstrap Components (source)

🔶 Importance of Creating a Developer Portfolio

Developing your portfolio website is very important to showcase your knowledge, skills, and the projects you have worked on during your learning journey.

Think about it...

What is the best way to prove your knowledge and skills?

The answer is: creating real-world projects.

That is exactly what employers are looking for – developers who can learn new technologies and apply them to new scenarios.

Creating a project is a great way to show that you have the right skills and the motivation to work as a web developer.

Great. Now you know why it is important to create your developer portfolio, so let's see the portfolio website that you will create. 🔅

🔸 Course Project

This is the main structure of the portfolio website project that we will build during the course:

Hero Section and About Me Section

This section will have a navigation bar and a profile image. The navigation bar will be responsive. A burger icon will be displayed in small devices (instead of the navbar) and the text will be hidden automatically.

Experience section

This section will include three different areas of knowledge and badges to highlight specific skills. This section will be responsive and it will have a hover effect to add interactivity.

Projects section

This section will include links to the GitHub repositories and to the live versions of the projects. We will create this section with the Bootstrap grid, so it will be fully responsive and you will learn to work with grid breakpoints.

Articles Section

A list of articles or blog posts. These will be Bootstrap cards and list groups. Each article will be represented by a link that will be opened on a new tab.

Testimonials Section

A clients testimonials carousel. This will be a Bootstrap carousel component with three testimonials and controllers to move to the previous or next item in the carousel.

Contact Me Section and Footer

This section will have links to social media profiles and it will show the copyright of the website. The social media links will be customized Bootstrap icons.

Behind the Scenes

We will work with:

• The Bootstrap grid to adapt the website to devices of different sizes.
• Bootstrap components, including buttons, carousel, responsive navigation bar, responsive images, cards, list groups, and more.
• Bootstrap icons to add links to social media profiles (Twitter, GitHub, LinkedIn, and Instagram).
• Semantic HTML tags such as <header>, <section>, and <footer>.
• Media queries to adapt the HTML elements to devices of different sizes and orientations.
• CSS selectors
• Google Fonts
• More!

You will practice many different skills by building this project and when you complete it, you will have a fully responsive professional portfolio to showcase your skills.

Sounds awesome, right?

💡 Tip: after creating the basic structure of the website, you can customize it with your unique profile image, skills, and projects.

🔹 Development Tools

We will work with multiple tools that developers use in their everyday work.

Visual Studio Code

A powerful and popular code editor created by Microsoft. You can download and install it for free from its official website.

Visual Studio Code - Official Website

Live Server Extension for Visual Studio Code

A very helpful extension that will help us to improve our productivity by refreshing the browser when we change our HTML or CSS files.

Live Server - Documentation in the Extensions Marketplace

Chrome Developer Tools

A set of developer tools that come built-in with the Google Chrome browser. They are super helpful to test the responsiveness of the website, to select elements in the HTML structure, and to preview changes in the HTML and CSS files.

Chrome Developer Tools - freeCodeCamp

💡 Tip: we will download and install all the necessary tools during the course and you will learn how to work with them step by step.

🔸 Course on YouTube

Awesome. Now you know more about Bootstrap 5, about the importance of creating a professional portfolio. You also saw what you will learn during the course.

If you are ready, we invite you to start taking the course on the freeCodeCamp Español YouTube channel:

💻 In this link, you can access the live project (in Spanish) and practice how to use Chrome Developer Tools.

✍️ Course created by Estefania Cassingena Navone (Twitter: @EstefaniaCassN, YouTube: Coding with Estefania).

I really hope you like the course and find it helpful to create your developer portfolio.

You are also welcome to continue learning with our Spanish courses:

In this article, you will find a brief introduction to the basics of HTML and CSS. Then you will find a free 5-hour course on HTML and CSS on our Spanish YouTube channel where you can learn the content in more depth with practical examples.

This article will use English to summarize everything you'll learn through this course. If you know Spanish-speaking friends, you can share this Spanish version of this article.

Let's begin! ✨

🔹 HTML and CSS: Description and Purpose

Let's see what HTML and CSS are and what they are used for:

• HTML (HyperText Markup Language) is essential for web development because we use it to define the structure of a webpage, the content that will be displayed on the browser.
• CSS (Cascading Style Sheets) is a language based on rules that we use to define and assign styles to the elements of our webpage.

HTML works with CSS to create the webpages that we use every day on our browsers. Some webpages also use JavaScript.

💡 Tip: HTML files have an **.html** extension and CSS files have a **.css** extension.

Think about this for a moment. The website that you are looking at right now is made of HTML and CSS. Awesome, right?

Now let's talk a little bit about Chrome Developer Tools.

🔸 Chrome Developer Tools

You can see the HTML and CSS code of any webpage on Google Chrome just by right clicking on the page and selecting "Inspect".

This will open Chrome Developer Tools, where you will see two main sections:

• The top section shows the HTML code of the webpage. This part is surrounded by an orange rectangle in the following image.
• The bottom section shows the CSS styles that are being applied to the element that is currently selected in the HTML section. This part is surrounded by a green rectangle in the following image.

Chrome Developer Tools

🔹 Introduction to HTML

Now let's start diving into the fundamentals of HTML. Here we have an example of a very simple webpage:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>freeCodeCamp</title>
  </head>
  <body>
    <h1>freeCodeCamp</h1>
    <p>I'm learning HTML and CSS.</p>
  </body>
</html>

💡 Tip: In HTML, indentation (the space that you can see before the lines) is not mandatory because it doesn't have an impact on the final result. Even so, it is highly recommended because it helps us to write HTML files that are easy to read, maintain, and understand. We typically use 2 spaces per level of indentation in HTML.

Let's see the main components of HTML.

HTML Elements

An HTML file is made up of HTML elements. These elements are the individual components that we use to create the structure of the webpage.

This is an example of an element:

<h1>freeCodeCamp</h1>

💡 Tip: Certain elements can act as containers for other elements to help us create more complex structures. You should indent these nested elements to reflect the structure of the website, like in our previous example.

HTML Tags

Each element has an associated tag. We can create an element by including its tag in our HTML file.

These are examples of the most commonly used tags:

• **<html>** – All the content of the website should be contained within these tags.
• **<head>** – This element contains the title of the webpage that you can see on the tab of your browser and it contains the metadata of the webpage.
• **<body>** – This element contains all the visible elements of the webpage. The structure of the webpage has to be within these tags.
• <h1>, <h2>, <h3>, <h4>, <h5>, <h6> –These elements create headlines in order of importance from 1 to 6.
• **<p>** – A paragraph.
• **<a>** – A link to another website, webpage, or to internal sections of the current webpage.
• **<strong>** – This tag lets us emphasize important text. It's displayed as bold text.
• **<em>** – This tag lets us emphasize important text. It's displayed as italic text.
• **<form>** – This element represents a form.
• **<hr>** – A horizontal rule that can be used to separate paragraphs or sections of the webpage.
• **<input>** – An element that lets us create the components of a form. It can be a text input field or become a radio button or a checkbox.
• **<footer>** – A footer.

💡 Tip: the first element on our webpage should be **<!DOCTYPE html>**. It tells the browser that the file is an HTML file and what version of HTML to use.

Most of the HTML elements need an opening tag and a closing tag. We write the content of the element within the tags.

In the previous example, we created an element of type **<h1>**:

<h1>freeCodeCamp</h1>

This element has an opening tag and a closing tag to surround its content.

• The opening tag is **<h1>**.
• The closing tag is **</h1>**.

You can see this in the following diagram:

💡 Tip: the difference between the opening tag and the closing tag is that the closing tag has a forward slash (**/**) before the type of element.

However, some elements do not need a closing tag because they don't act as containers. An example of this type of element is the **<img>** element (image):

**<img src="freeCodeCamp.jpg">**

HTML Attributes

HTML elements can have attributes. These attributes let us define additional information about the element. They include **class**, **id**, **style**, **lang**, **src**, and **href**.

Here we have an example of an HTML element with the **class** attribute:

<h1 class="main-title">freeCodeCamp</h1>

As you can see in this example:

• The attributes must be written in the opening tag, before the closing angle bracket **>**.
• The attributes and their values are separated by an equal sign. To the left, we write the name of the attribute and to the right we write its value. In this example, the value is **main-title**.
• The value of the attribute must be surrounded by quotation marks.

💡 Tip: each type of element has a specific set of attributes that we can assign to them and each attribute has a set of possible values. You can check these in the web documentation MDN Web Docs.

HTML Language

You can specify the language of the webpage and the language of any element in the HTML structure with the **lang** attribute and the code of the language:

<html lang="en">

In this example, we are specifying that the language of the webpage is English.

HTML Links

In HTML, you can create links to other webpages and links to internal sections of the current webpage with the **<a>** (anchor) element and the **href** attribute.

For example, this element would take you to freeCodeCamp's website in Spanish:

<a href="https://www.freecodecamp.org/espanol/">freeCodeCamp</a>

• With the **href** attribute, we specify where the link will take the user.
• The text that we write between the **<a></a>** tags is the text that users will see. In this case, the text is **freeCodeCamp**.

We can also take users to another page of the same website by selecting an HTML file as the destination:

<a href="about.html">About Me</a>

If we assign the **id** attribute to an HTML element, we can also create a link to take the user to that element on the same page. We just need to write a hashtag followed by the name of the **id** as the value of the attribute **href**:

<a href="#main-title">freeCodeCamp</a>

In this example, the link would take the user to the element with the **id** main-title.

💡 Tip:** the `element is different from theelement. The**` element is used to specify the relationship between the HTML file and an external source like a CSS file. We will see an example of this in just a moment.

HTML Comments

We can also write comments in HTML. Comments are very helpful to add notes that we and other developers can read when we open the file. They help us to explain and understand the structure of the webpage:

<!-- Add a link to freeCodeCamp -->

💡 Tip: Comments are not part of the final result. They can only be read when you open the HTML file and they are helpful for developers who work with the file.

HTML Lists

In HTML you can create ordered lists and unordered lists with the **<ol>** and the **<ul>** tags, respectively.

Here we have an example of each type of list:

• Ordered List

<ol>
  <li>Blue</li>
  <li>Green</li>
  <li>Black</li>
</ol>

• Unordered List

<ul>
  <li>Blue</li>
  <li>Green</li>
  <li>Black</li>
</ul>

💡 Tip: the difference between both types of lists is that the elements of ordered lists are numbered while the elements of unordered lists are not.

HTML Images

To create an image in HTML, we use the **<img>** tag. This element does not need a closing tag, only an opening tag.

For example:

<img src="https://bit.ly/fcc-relaxing-cat">

• We specify the location of the image with the **src** attribute in the **<img>** tag.

You should also assigned the **alt** attribute to all the images of your webpage to have an alternative text in case the image is not downloaded correctly or in case the user needs to use a screen reader.

For example:

<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat.">

Great! Now you know the basics of HTML.

Let's start with CSS.

🔸 Introduction to CSS

Once we have the HTML structure of our webpage, we can start applying styles to the HTML elements with CSS.

CSS is a language based on rules. These rules let us specify how the elements will be presented on the webpage based on CSS selectors, properties, and values.

How to Apply Styles to your HTML Elements

There are three options to apply CSS styles to your HTML elements:

In-line Styles:

You can specify a style directly in the opening tag of the element that you want to customize. You just need to assign the style attribute.

For example:

<h1 style="color: blue">freeCodeCamp</h1>

In this example, the value of the style attribute is the color property and its corresponding value (**blue**). They are surrounded by quotation marks.

💡 Tip: the property and its value must be separated by a colon and a space.

Element