Explore our extensive collection of courses designed to help you master various subjects and skills. Whether you're a beginner or an advanced learner, there's something here for everyone.
Join us for our free workshops, webinars, and other events to learn more about our programs and get started on your journey to becoming a developer.
For all the self-taught geeks out there, here is our content library with most of the learning materials we have produced throughout the years.
It makes sense to start learning by reading and watching videos about fundamentals and how things work.
Data Science and Machine Learning - 16 wks
Full-Stack Software Developer - 16w
Search from all Lessons
Curated list of small interactive and incremental exercises you can take to get better at any coding skill.
Curated section of projects to build while learning with simple instructions, videos, solutions, and more.
Guides on different topics related to the technologies that we teach in our courses
Note: If you are working locally, make sure that you have node.js installed in your computer by typing in your terminal:
This project comes with the necessary files to start working immediately.
This is the repository you need to open:
👉 Please follow these steps on how to start a coding project.
💡 Important: Remember to save and upload your code to GitHub by creating a new repository, updating the remote (
git remote set-url origin <your new url>), and uploading the code to your new repository using the
pushcommands from the git terminal.
In this exercise, you have to create the HTML code needed to render a profile card based on a series of variables that could change in value during runtime. Here is an example of the profile card:
src/app.js file there is a
render function that receives variables and contains the logic to create most of the website HTML code.
You can see the
variables that are being generated by typing on the developer console:
These instructions come with a video for better understanding: https://youtu.be/gaVm8eyCqlM
Read and understand the
render function and the value of the
variables variable that it receives.
Change the content of the
render function to make it render the variables on the card.
You do not need to add any event listeners to the elements that are already built in the project. This is already being done by this part of the code:
So when the elements contents "change" they will already update the variable values for each element. All you need to do is to update the HTML content inside
render function, as mentioned on instruction 1.
|includeCover||boolean||true||it determines if the cover shoud be visible with an image or not|
|background||string||null||the image's url that will be used as a background for the profile cover|
|avatarURL||string||null||the url for the profile avatar|
|socialMediaPosition||string||"right"||it can be |
|string||null||the twitter username to be displayed on the profile|
|github||string||null||the github username to be displayed on the profile|
|string||null||the linkedin username to be displayed on the profile|
|string||null||the instagram username to be displayed on the profile|
|name||string||null||The name of the user to be displayed on the profile|
|lastName||string||null||The name of the user to be displayed on the profile|
|role||string||null||The name of the user to be displayed on the profile|
|country||string||null||The name of the user to be displayed on the profile|
|city||string||null||the city of the user to be displayed on the profile|
This is an example of a possible HTML output, you will have to replace the name, last name, etc. With the values that these variables may have.
This and many other projects are built by students as part of the 4Geeks Academy Coding Bootcamp by Alejandro Sanchez and many other contributors. Find out more about our Full Stack Developer Course, and Data Science Bootcamp.