Opening a new website can be intimidating. I remember sitting there looking at that blank white screen, a canvas for what would become my personally branded website. This website is an opportunity to challenge yourself and build a professional portfolio to show employers.
justcasper.com is not currently in its finished state in my head. It's still my shitty first draft, but this article isn't about fine-tuning your website. It's about helping you get from that blank screen to a functioning shitty first draft.
Before you can start building your website you must first choose a reliable web developing platform. The two big platforms I recommend are Wordpress and Webflow. I have used both Wordpress and Webflow for a while now, and for probably 99% of people reading this article, I recommend using Webflow.
Webflow offers a drag-and-drop feature that makes it a lot easier to build as it requires less coding and lets you visualize what the finished product will look like more easily. Another great benefit about using Webflow is Webflow University which does a really good step-by-step tutorial on how to build a full portfolio website in 21 days.
Are you wondering whether or not you are part of that 1% that should be using Wordpress? If you want to become a professional website developer after college, then maybe Wordpress can be better. Currently, 43% of all websites are built using WP, making it the industry standard so if you want to be a developer, I would learn how to use Wordpress. Another advantage to WP is that even casual builders should care about how well Google Analytics integrates with it. WP has a plugin that can help with tracking your websites data while Webflow you have to manually add tags to the page for it to read.
If you are still confused about which group you belong to check out this article by Forbes Advisor that is all about Wordpress vs. Webflow.
Sorry for the 1% of you that are using WordPress but the rest of this is mostly about Webflow from here on out. Here you are you just clicked “new site” and you are faced with the decision of blank site vs. template. The templates in this case look really tempting but it is not as nice as it looks!
There are a couple of free templates that are pretty meh and don't give you all of the components of your website. They give you a foundation for a home page basically and that's about it. 90% of them don't have all of the functionality you are going to need and it doesn't solve all of your problems. I know a couple of people who bought a ~$40-50 template and found it harder than just building the site yourself so I'd say save your money if you can unless you are 2 days out from the deadline in which case you may want a template.
The top part of the image is what my nav bar currently looks like. The one beneath that is where it started. The layouts that Webflow has are super useful. To get to these layouts, click on the “Add Elements” button in the top left then click Layouts.
These layouts have incredibly helpful templates for sections of the website including nav bars, hero sections, gallery slide shows, testimonial sections, and footers! They are all super basic but for creating your first website with a limited amount of time it's super useful!
Once you have your blank layout template for your header start branding it and changing it to what you need it to do. An example of this using the above image is you probably arent going to need a pricing page so double click on that word and change it to a page name you will need like portfolio.
Now you may notice that there arent enough sections on here for all of the tabs you may need but this may sound kind of obvious but it is super easy to make more. Simply highlight over one of the other text links and right click and duplicate! In the options on the right there is a way to change the background color so set it to one of your brand colors!
To set a link to go somewhere else on your site with a functioning hyper link hover over the link you are trying to change until that little gear pops up then in “Type” select “Page”. Then as easy as that select which page on your site it will go too.
Once you have completely set up your nav bar now comes the cool part where you can turn your entire nav bar into a component so you can easily replicate it across your entire site.
What you are going to want to do to set it up as a component is make sure you are selecting the Parent Element which usually has a little picture of a house on it and then click “create component” and then name it and your done! Now whenever you create a new page and need to put your nav bar in on the left menu click on the components section and click your new nav bar component!
One thing to note about components is that if you edit the component on one part of your site it will update that component everywhere else it was used. Now that you know how to make a nav bar making a footer is a very similar process go to the layouts use one of them and morph it to fit your brands needs!
Now because I have complete faith that you can figure out layout work for the rest of your site and if not go watch the Webflow University series it will help. I would like to talk about what should go on each page on your site.
For your home page you are going to want to start off with a hero section. Webflow has 7 hero section templates to choose from so pick whichever is closest to your envision and work with that. Here is what my hero section looks like:
As you can see I used it to introduce myself and thought that it was a great place to use my value proposition to let everyone know what im about.
Right below that I put my intro product explainer video and below that I included testimonials!
If you dont think you have any marketing job experience that someone would be able to give you a testimonial on think again! If you are reading this and in IMC ask your PM or your fellow content creators!
Yes Maya, Nick, and Lexi if you want one ill write one for you.
All that's technically left for this page is a footer but I also added a way for people to easily move around my site with a couple buttons. Try to make it as easy as possible for your viewer to seamlessly move through out your site anything that makes people take longer on a site leads to more people closing your site. Whatever you do please do not keep working on this page until its perfect! Get a shitty first draft of it going and then go back once you have everything else done and you can make it pretty. I guarantee you it will be easier to fix once you have more practice building the rest of your site.
Link to my home page
Next up is your about page this is more of an abstract page but something I encourage you to do is focus on who you are as a person and what you enjoy doing. The rest of your website is going to be super focused on your professional skills that this a place to show your personality that you will bring to a team.
I started by using another hero section but this time highlighting my brand purpose, values, and story. For the values section something I did was use a layout in the “teams” section where you are supposed to introduce people on a team but I introduced my values instead.
When you are building your site think about how you can use these templates for more than what they were created for. I was now easily able to show off my personality with a series of pictures of myself super fast!
After the story section below my values I put my press release and another navigation to the next page “experience”
Link to my about page
The experience page is basically a broken down resume with a resume on it. I started the experience page off with sharing what job experience I have. I went a bit more detail here on my experience then I did on my resume, for example on my website I shared that I worked at Fred Meyer for two years showing I got customer service and retail skills but when I am applying to a Marketing job that's not very useful. After that I had a section on my education including extra curriculars I did and some of my favorite classes i've taken.
After that I put my resume, cover letter, and business card big enough for people to read and seamlessly on the page followed by a link to the next page I want them to visit which is the portfolio.
Link to my experience page
For the Portfolio page you are going to want to put your projects that you have done in the marketing program like your creative strategy and IMC project! I also put other related marketing projects on there that I did in my internship! If you did the Case Competition that would also be a great thing to include on this part of the site.
For the Blogs page this may be guessable but this is where you want to include your blogs! For IMC you have to write 3 blogs but if you are taking/took digimark those would also be great to include here!
Here is where the magic of CMS collections come into play. CMS Collections are one of the most extraordinary things that make building pages on a website a breeze. For a more in-depth in how to use CMS here is a video that is part of Webflow’s CMS series. I was able to figure it out from just the video but I did have more website-building experience than most the first time through.
To add all of your CMS collections onto your site first you want to go to the page you want your CMS collection will live on. Then you are going to add a new element called “collection list” under CMS. From there it will create boxes that each CMS entry will live in and you can start dragging in elements into one of the boxes and it will update for all of them!
After adding all of the elements to the page here is roughly what it can look like:
From there now the we have the main page set up for navigation to all of your CMS projects you can edit a page for each project now to edit for the entire collection simply go to pages and go to one of your template pages. From there you can set up one page that will set up all the rest of your projects. Do one blog page and you've done them all! At least enough for a shitty first draft it probably wont look perfect your first go around.
This page you are viewing this on now is made with a CMS!
Link to portfolio page
Link to blogs page
To summarize everything, Webflow is an easier to use drag and drop website builder but, if you want to be a professional web developer then WordPress might be something you should look. Use the prebuilt starter layouts at first it makes everything so much easier your first time around. For the sake of time and your sanity please use CMS for your blogs and portfolio it will take you at least 10x longer to set up the pages for each item then it will to set it up once and be able to use it for the future. When I put blogs on now I don't have to mess with the formatting of the page it automatically makes it a page.
Remember to think about how you can use brand elements (including your brand associations) throughout your site. There are a lot of ways to show your brand and you in your site! Thinking about the unique selling point that you have to offer. Another great thing about Webflow is that it allows you to see it in mobile view, tablet view, and desktop mode and allows you to modify the mobile breaks without messing with your website. Most people that have come to my website so far have been on mobile so it is definitely something you should think about as you are building. Oh, and please start now I gave myself a little over a week and I felt like I needed more time.
Reach out to me via LinkedIn if you have any questions or just wanna show me your site. I wanna see it!
.png)