How do I fetch data from an API in HTML CSS and JS

Basicly you need to make AJAX calls to the given APIs and populate some target container <div>s with the result.

Here is a very basic example using jQuery showing a list of users and their respective albums when a user is clicked

<div id="users"></div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$.ajax({
    url: "https://jsonplaceholder.typicode.com/users",
    success: function(users) {
        for (var i = 0; i < users.length; i++) {
            var user = document.createElement("div");
            user.id = 'user-' + users[i].id;
            user.className = 'user';
            span = document.createElement('span');
            span.innerHTML = users[i].name;
            albums = document.createElement('ul');
            albums.className = 'albums';
            user.appendChild(span);
            user.appendChild(albums);
            user.addEventListener("click", function(){
                var that = this;
                var userId = this.id.split('-')[1];
                var dest = this.getElementsByClassName('albums')[0];
                dest.innerHTML = '';
                $.ajax({
                    url: "https://jsonplaceholder.typicode.com/albums",
                    success: function(albums) {
                        for (var j = 0; j < albums.length; j++) {
                            if (albums[j].userId == userId) {
                                console.log(albums[j].userId, ' == ', userId);
                                var li = document.createElement('li');
                                li.innerHTML = albums[j].title;
                                dest.appendChild(li);
                            }
                        }
                    }
                })
            });
            document.getElementById('users').appendChild(user);
        }
    }
});
</script>