Help on getting started with Portfolio, Feeling stuck

1

Hi everyone, This is my first time posting and I’ve been having a lot of fun with FCC so far. I’ve found that it feels like quite a jump for me from the other challenges to this one. I already did the basic javascript challenges and really had a lot of fun doing them, but the portfolio is very difficult for me. I feel like there’s just so much I should know, or need to know but don’t. For example I’ll look up how to make a header fixed in position, but this opens up a whole new can of worms of a million other things I need to understand before I understand how that works. I feel like it’s almost just a general lack of CSS knowledge. I’d like some suggestions on how to best continue, should I just push through and try to figure everything out (which to me seems like a very daunting task, and has caused me to put off doing this challenge) or is there another tutorial online I could do to supplement my CSS and other knowledge?

2

Option A:

Basic CSS Flexbox

You could watch some basic CSS tutorial like this one by net ninja on youtube link.
It takes about an hour or two, you should able to create a basic layout after finishing these basic tutorials, then you could build your portfolio upon them.

Option B:

Bootstrap

Bootstrap is a html CSS based framework to build web page layout easily.
another tutorial series by netninja link.
You could create a more complex portfolio site without the need to tweak all the CSS details. That’s what I did for lots of my FCC front end project.

1 Like
3

Resources I can recommend:

  • Udacity: All the courses from their Front-End Nanodegree are available for free and I found them generally good. I’ve learned useful tricks of the trade there, like how to use outline to visualise your boxes, and how to overlay a design image to make it easier to build a pixel-perfect version with HTML and CSS (although maybe I learned that from the forum there, I can’t remember). Look at Intro to HTML and CSS and later Responsive Web Design Fundamentals and maybe Responsive Images.
    (Note that the nanodegree itself is quite expensive. For the free courses, don’t enrol in the nanodegree, just go to the individual course pages and click on Start Free Course.)

  • MDN (Mozilla Developer Network): The CSS reference page is where I go whenever I need to check what a property does or what values it can take. They also have a wealth of web development tutorials and I also use their HTML reference and javascript reference pages all the time. MDN is the reference that professionals use. It is friendly, up to date and it recommends best practices.

  • Developer tools: If you’re not already doing this, learn how to use the developer tools in your browser. The Udacity courses make you work with Chrome and show you how to use the tools effectively. This made all the difference for me. Editing properties directly in the browser allows you to experiment quickly and check if changing this property is really going to have the effect you’re expecting. It saves you so much time when you’re trying to solve a problem. Also you can switch to mobile view and this is really useful when you try to build a responsive page.

2 Likes
4

I’ve had a similar experience - semi-enjoying the javascript/algos (I’ve done a little python programming; javascript is pretty similar) but reluctant to start the projects due to sheer unfamiliarity of HTML/CSS & also working on something where a mix of technologies have to mesh together.

I haven’t overcome this yet, but have found several resources* (mostly via this forum) that look helpful:

The latter seems especially useful because it seems only to cover the really important parts - eg what you need to be able to type in yourself to set up the skeleton of a project.

(* I’m in China and can’t use most video resources due to blocking/bandwidtth issues.)

1 Like