Build a Portfolio Webpage

Hello!

I was wondering what the difference was between some people using Visual Code as their IDE and implementing files (like SASS-SCSS and .js files) to make their portfolio look a certain way, versus using codepen as i did for building my first projects?

For example if already built my tribute or landing page, i don’t know how to implement SASS into codepen. Is it too late since i already built my code (project) without it?

I discovered on freecodecamp’s youtube channel something called “ARIA”. If i didn’t use ARIA (i’m not sure if i used it while learning FCC’s first course) - does that put me at a dis-advantage for my pages adapting to mobile viewing and other devices?

I know i have a lot to learn ahead, including frameworks, but is there a go-to universal approach in always making sure your pages are adaptable to all devices (in this particular context, the lines of my code).

The other structural intuition i am trying to understand is how will my portfolio be viewed in terms of its" link" once its deployed?

First of all, if i am building my projects and portfolio on codepen…does “building a portfolio webpage” mean building a portfolio on a codepen link, or a personal DNS (meaning, your own personal website)? Which one is better?

If am linking my codepen “pen” to Github or FCC, officially, my webpage will always be a codepen page ?

When i copy paste my codepen project url/link, i see the same thing (with codepen tools and other instruments etc.) How can i make sure my portfolio and projects are visually seen as just a whole web page (without cramping my pages with codepen features?)

Github has “repositories”. Does that mean that i should have a repository on Github with the codepen link solely for the portfolio?..

or also create a repository for every single project in addition to having the “main repository” (portfolio) on top summarizing all my projects?

How can i be sure that no one lands on my other “drafts” and “work-in-progress” projects being built (is that the reason there is a “private” button offered on codepen) ?

Thank You for your time if you read this post,

Sincerely,
Phil.

Okay. I will try to answer to a few questions:

I was wondering what the difference was between some people using Visual Code as their IDE and implementing files (like SASS-SCSS and .js files) to make their portfolio look a certain way, versus using codepen as i did for building my first projects?

Codepen is ideal for sharing code and showing demos. If you build a website for a client, you probably host it somewhere else.

For example if already built my tribute or landing page, i don’t know how to implement SASS into codepen. Is it too late since i already built my code (project) without it?

You always have the chance to copy-paste or backup your code somewhere and try to implement stuff in a different way.

I discovered on freecodecamp’s youtube channel something called “ARIA”. If i didn’t use ARIA (i’m not sure if i used it while learning FCC’s first course) - does that put me at a dis-advantage for my pages adapting to mobile viewing and other devices?

ARIA is for accessibility

I know i have a lot to learn ahead, including frameworks, but is there a go-to universal approach in always making sure your pages are adaptable to all devices (in this particular context, the lines of my code).

I suggest to you to start using frameworks once you fully understand how HTML/CSS/JS works.

1 Like

Codepen is a tool for making what are basically little sketches, means people can quickly prototype and share tiny bits of web UI code.

VSCode or similar is just a text editor, an application for writing text that’s optimised for code, so it comes with things like syntax highlighting and debugging tools and whatnot. (like Word is an application for writing text but is optimised for natural language so comes with things like a spellchecker and a grammar checker and whatnot). You create some files and you write code in them, then you do whatever with those files, open them using a browser for example.

ARIA is a set of attributes you can attach to HTML tags to make tools like screenreaders interpret a webpage more accurately. Many ARIA roles and attributes are implicit if you just write clean HTML, concentrate on that first.

ARIA is not terrifically well documented and often isn’t particularly approachable. And, I would say mainly because of that, tbh it isn’t [explicitly] used very much, as in carefully adding all ARIA attributes where applicable in HTML. Which is a shame, as it’s important for accessibility reasons.

That isn’t the purpose of ARIA

These are supposed to be learning exercises, hence Codepen is fine. Codepen isn’t for deploying real functional websites, it’s a playground. If you have an actual real website then it would be deployed on a server somewhere. GitHub pages is suggested fairly often here, and it is suitable for a personal portfolio website.

You can’t really, that’s not what Codepen is. It’s an app in of itself.

Git is a distributed version control system, a program used to track changes to text files in a folder, designed to work in a distributed way, so a team working on a codebase can make sure that when one person makes some changes it doesn’t just break another person’s work on the code. Each person has a copy of this record of changes, and when someone wants to merge in their new code, the record gets updated for everyone.

It is useful for there to be one central place, a repository that holds a copy of the record that’s considered the truthful one: that way, everyone merges their code to this record, and everyone knows that once that happens they can just get the most up-to-date copy from this repository.

GitHub is one of a number of companies that provide a service to host repositories (repos).

There are other version control systems and there are other services that host repositories. But for most coding (basically most anything except games), git is industry standard, and GitHub is by far and away the most popular service for providing space to store git-tracked code.

Yes. That’s normally what you would do.

Afaik you can’t unless you pay for the service (iay be wrong there, may have changed). But I’m not sure you need to be sure, it’s a place for little experiments.

2 Likes

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.