Not confident in my coding style - Personal Portfolio Webpage

Hi guys, I have just completed my personal portfolio webpage on CodePen at but looking through it, I’m not exactly confident in my coding practices.

Firstly: after having compared my coding style to a few other peoples’, I feel as mine has a lot of arbitrary code and clutter - i.e. I feel like there are better ways to do things like align vertical sections of a page rather than with fidgety and overprecise margins; I feel like I have too many separate classes and id’s and so on…
Overall, I feel like i’m missing out on better ways to do various things in CSS - how can I have simpler, concise code that does the job well, like the default sample projects?

If you guys could skim through my code here (and possibly on my other projects linked within this one) and give me some advice on my general coding style, it would be much appreciated.

Hey! Don’t be too down on yourself. You at least DID the project, and that’s the hardest thing to do! Let me give my thoughts, although I’m no expert so keep that in mind too

So the biggest thing I see is that you don’t really have a color theme going on. There’s a lot of colors all put together and doesn’t have a flow. There are some color theme generators online that can help you so your colors are complementary and have that nice flow, like this one:

I think some of the CSS stuff that I notice the most is animations, hover effect, people have a lot of pseudo elements going on, transitions, just little things that make the page pop! I follow this guy on YouTube and have been watching his videos on these CSS elements: he speaks a little low sometimes, but he shows off some really cool things to do in CSS that’s got me thinking creatively.

I think you have an idea of how the structure of the page should look. I mean, fCC does help out with the user stories. I’m not a great judge of code and how it is (maybe @snowmonkey could help?) b/c I still feel like I got some learning to do on that end.

Most of all, I think that everyone’s first go at the portfolio project sucks. I’m on this project too and I haven’t even coded anything because I’m just gathering ideas from others, and they’re a whole lot better than what I’m going to create lol.

Hey, @pleeseno, thanks again for “throwing me under the bus.” I really do enjoy checking out code and seeing where (and usually if) it needs improvement.

First thing I might suggest, @poklipart, would be to look at the layout of your projects. You’re using tiles, and that’s great, but you’re making yourself have to micro-manage size and all that. Meh. There’s a great feature in CSS for displaying content in a more intuitive way: display: grid

I took your page and cloned it, then made some changes. THE ONLY BITS I CHANGED are the in project section, and I only changed the CSS. You’ll find the three selectors I changed are prefaced with #projects – I did that to take advantage of CSS specificity, and to make it a little easier to see at a quick glance.

Using the grid, I set up #project as a grid, with two grid areas (rows): header and main. The p tag is assigned to the grid-area: header, and the div I created to contain the projects (.project-tiles-container) is assigned to grid-area: main. Doing this, I don’t have to specify all the details of positioning and alignment, the grid does this for me.

The neat bit happens next: within the .project-tiles-container, I’ve created another grid. This one is a three-columns-by-however-many-rows, with the contents being centered on their grid column. All that replaces the width/margin/padding rules you’d set up.

Haven’t messed with the rest, but I will give a word of advice: start simple. I try to pare my HTML to the barest minimum to display what I want, then start on the CSS. Perhaps start from setting up the three sections to be displayed as full-display panes, then add in the section contents.

I recommend reading this article on css grids, it’s pretty understandable. More and more, HTML can be simplified and CSS can be streamlined with the effective use of grids.

1 Like

I will mirror the post above, you did the project fully and that puts you on the path to being a developer. One foot in front of the other, I say.

As for a critique, I’ve noticed that you’ve kept default fonts. A great way to instantly make a site look “designed” is to choose a set of fonts for your project that aren’t the defaults. Go on for some selections. They make it super easy to utilize in your site.

Another suggestion would be to either make the text elements below your portfolio images inline-blocks and set them as the same width as the image container above it, or put them both in a div so that you have a single element enclosed in a border.

Happy coding!

Thanks a lot for the advice guys! I’ll take all this advice into account on my next CSS projects.