Não estou seguindo a risca o exemplo, mas seria praticamente igual.

HTML do aside:

<aside>
    <img src="me.jpg" alt="My photo">
    <nav class="menu-navegacao">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="portfolio.html">Portfolio</a></li>

        </ul>

        <ul class="icones-sociais">
            <li>
                <a href="https://github.com/">
                    <img src="github.png" alt="Developers profile at Github">
                </a>
            </li>
            <li>
                <a href="https://www.linkedin.com//">
                    <img src="linkedin.png" alt="Developers profile at LinkedIn">
                </a>
            </li>
        </ul>
    </nav>
</aside>

O fonte parcial do CSS:

img, 
aside {
    width: 20%;
    float: right;
}

aside {
    clear: right;
    box-sizing: border-box;
}

aside h2 {
    font-size: 30px;
    margin: 20px 0; 
}

.menu-navegacao {
    padding: 5px 2px;
    background-color: #14151b;
    color: white;
}

.icones-sociais li {
    display: inline-block;
}

No meu caso, a foto e os ícones aparecem bem pequenos. Acredito eu ser pelo width: 20% (quando tiro, ela fica no tamanho normal, mas não fica alinhado como o exemplo do instrutor). Os itens aparecem da seguinte forma: https://imgur.com/tdaBBsL

Alguém pode me orientar sobre o que estou fazendo de errado Obrigado!