Building projects is very important for learning how to code. When you create a project, you expand your portfolio and learn how to apply your skills to new situations.
We just published a 2-hour course on the freeCodeCamp.org Spanish YouTube channel that will guide you step by step through building 3 projects with HTML, CSS, and JavaScript. You will practice your skills by building a responsive navigation bar with dropdown menus, a slider, and a landing page with a custom modal.
If you have Spanish-speaking friends, you are welcome to share the Spanish version of this article with them.
Jordan Alexander Cruz Garcia teaches this course. He is a web developer who loves sharing his knowledge and teaching others about the amazing world of CSS.
💡 Tip: Please note that the course focuses on HTML and CSS but also requires basic knowledge of JavaScript for implementing the interactivity.
HTML, CSS, and JavaScript
HTML stands for HyperText Markup Language and CSS stands for Cascading Style Sheets. While HTML provides the structure and content of a website, CSS determines how the content is displayed. It controls the visual aspects of the website, such as fonts, colors, layouts, spacing, and animations.
With CSS, you can easily create different styles and layouts for various screen sizes, making your website look great on desktops, tablets, and mobile devices.
💡 Tip: Websites that adapt to different screen sizes are known as "responsive websites".
We usually write CSS in an external file that we refer to as a "stylesheet". Then, we link this stylesheet to the HTML file, applying all the styles to the corresponding HTML elements based on the CSS selectors and properties.
Separating the content of the website from its presentation is very helpful. It results in a more maintainable project structure and a more efficient rendering process because browsers can render the structure more quickly, while downloading CSS styles in the background.
Basically, CSS is an essential tool for creating the beautiful, visual, and user-friendly websites that we see today.
JavaScript adds interactivity to the website. It turns plain elements into interactive elements to create engaging user experiences.
HTML, CSS, and JavaScript Projects in Spanish
Awesome. Now that you know more about HTML, CSS, and JavaScript, let's check out the projects that you will build during the course.
Project 1: Navigation Bar
You will start by building a navigation bar with dropdown menus. This navigation bar will be responsive, so it will expand or shrink to fit the size of the screen. If the screen is too small, it will automatically transform into a sidebar.
💡 Tip: The main options will always be displayed. When the user clicks on "About" or "Projects", a dropdown menu with additional options will be displayed.
Desktop version
Here you can see the desktop version.
Mobile version
This is the mobile version that you will see in small devices.
💡 Tip: This technique of hiding and toggling the navigation bar is used very frequently to optimize the space for the content as much as possible.
Project 2: Slider
Next, you will build a slider with three positions that will change when the user clicks on the left or right arrows. Each position will have a title, a short paragraph, and a circular image.
💡Tip: Sliders are helpful for sharing user feedback, quotes, and reviews.
Project 3: Landing Page
Finally, you will build a landing page step by step with CSS Grid.
When the user clicks on the "Join us!" button, a custom modal will be displayed. You will implement this modal with HTML, CSS, and JavaScript step by step.
If you are ready to start practicing your HTML, CSS, and JavaScript skills, check out the course on the freeCodeCamp.org Spanish YouTube channel:
✍️ Course created by Jordan Alexander Cruz Garcia (AlexCG).
YouTube: @AlexCGDesign
Twitter: @alexcgdesign
Linkedin: Jordan Alexander Cruz Garcia
Instagram: @alexcg_design
GitHub: AlexCGDesign
Web Development Blog: https://www.alexcgdesign.com/blog