A personal website / portfolio is great way to build your brand as a competent professional, especially in a new field. Your website / portfolio is a representation of what you are capable of.

Having an excellent personal website provides you with a powerful tool to communicate with the world at large (including potential employers and colleagues) highlights your experience and skills, and generates credibility for yourself and your brand as a professional. Your website/portfolio is a representation of what you are currently capable of, and the future direction as a professional you’re headed towards.

While there are limitless ways with which you can approach designing and producing your site, it’s important to consider what a potential employer looks for when they look at your portfolio. Below we discuss some key steps and components to be mindful of as you proceed in building your site.

If you’re a student of software engineering, these best practices will especially apply to you.

While it may be easier to utilize pre-existing website-building platforms or frameworks, if you’re a software engineering student you’ll want to code as much of your own website as possible. After all, you’re a developer, and companies want to see that you know how to code a website!

Especially if you are pursuing primarily front end and/or design-oriented developer roles, you should ideally be coding your own site from scratch and ensure that the site shows that you have an eye for UI/UX, since the site itself serves as a portfolio piece.

As a Flatiron grad you should be able to build, at the very base level, a responsive landing page, since it requires HTML and CSS (or JSX if they build with React). A robust portfolio page will take a little longer, since you will need to design the user experience, map out data flow, etc. If you don't want to bother with all of that, templates are a good solution.

A helpful first step is to read Mashable's guides for creating sites on both WordPress and Tumblr. You can research domain availability on a domain registrar, such as Namecheap or godaddy. While traditional online marketing principles may suggest that you choose a domain name that generates high search results on top Internet search engines, your website is your own personal portfolio, meant to help you market you and your personal brand. Given that, many Flatiron grads choose to use their own name (firstnamelastname.com) as their domain name; that way you ensure you own your name on the internet. Popular web hosting platforms among Flatiron students and the marketplace include: https://domain.me/, WordPress, Squarespace, HTML5UP, and Wix.

Once you’ve obtained your domain name and a hosting platform, you’re ready to build your site. As you work on the content, remember to include these important elements:

Beyond the content, an attractive and dynamic design that engages your visitors and keeps them staying longer is key. Beyond the default themes offered, explore other themes for your platform within their official theme libraries. For example, here are some WordPress themes and Tumblr themes. You can also find custom themes across the Web, developed by independent designers just by Googling.

Widgets are the additive content often in the sidebars of websites that add visual appeal. WordPress is best known for its widgets, which can be found on the backend of your blog (see this tutorial). The best way to find relevant widgets is to browse. Some popular widgets include social media widgets that pull in your Twitter or Tumblr feeds. The About.me widget provides a brief bio and photo on the sideline of your page and the Top Posts widget showcases your most-viewed posts in the past 48 hours. For the Twitter widget, the code can be customized and copied from within your Twitter settings. This widget pulls in your Twitter feed and visualizes them on your blog, ensuring your site visitors remain up to date.

You’ve likely worked with your Career Coach previously to craft a personal bio — a short paragraph about you, your achievements, current projects and goals. This is typically the “About” Page on your site. This can be the same bio you currently use on your resume and/or LinkedIn profile page, so start with that as a placeholder. Consider eventually expanding your website bio to draw visitors deeper into your personal story, vision, and viewpoint about coding: what it means to you and how it impacts you as a professional. For inspiration, read this article on writing a great bio.

The most important thing to highlight and share on your website are your Technical Projects. You can outline projects you’ve developed for personal, professional, contest, and hackathon projects. Each project should have its own page once clicked on, with a description of what the project is, plus a link to Git repository, video demo (a must for software engineering students), and a link to the fully deployed app/project.

Some additional features you can include in a personal website are photos of yourself, your experience and education/resume, professional services you offer (for example, website building or tutoring), and contact information.

You should also feature your tech blog on your site, providing a link to your existing blog or moving and publishing the blog on your new site. This conveys to visitors that you are regularly coding, learning, and growing your skills.

Your site should also provide many avenues for visitors to learn more about you in depth, helping convey you and your personal brand. Link the social media accounts that you use for professional purposes, including GitHub, Twitter, LinkedIn, Tumblr, Instagram, etc. Be sure you’re conveying a consistent image of yourself across all your social media channels that flow alongside your website’s content. This way, visitors will access the ongoing flow of your thoughts and experiences within tech.

Make it quick and easy for visitors to contact and engage with you. Include your email address, embed your email address, or consider coding in a contact form, through which visitors can directly email you through your site.

Consider what you can include to truly personalize your visitors’ experience, so they can begin to connect with you in meaningful ways. Some ideas include your personal bucket list, recent noteworthy accomplishments, a reading list of great books you recommend, your top-10 list of favorite meetups, adding pages for personal appearances such as “Speaking” and “Media” which help identify you as a thought leader and expert in your domain. Also consider features like fun, personalized & attention-getting dialogue boxes, links to outside resources you like, or a fun professional title for yourself (“Indefatigable Problem Solver”). You could also include additional languages you speak, and have an on-site translator in that language.

Once your site is up and running, share it with your friends and colleagues, link to it on your LinkedIn, social profiles, and include it in your email signature. By doing this you are continuing to build and market your brand while making it easily searchable and accessible on the web.

• Portfolio Site How-To for New Developers