What are the first things I should always do when creating a new website from scratch?

So I’m just starting (or trying to start) my Personal Portfolio challenge, and I’m running into the same instant roadblock I did when I tried to start my Tribute Page challenge. In spite of all the coding tutorials we did in the early lessons, I still have no idea what the first things are that I should be doing when creating a new page or site from scratch. Once I get the basic framework in place I feel semi-confident that I can mess with the various elements to get things looking the way I want them to, but it’s that initial setup work that I’m totally clueless about.

I spent about the last hour searching around on Google, but so far all I’m coming up with are various other tutorial programs like FCC, which isn’t what I’m looking for. I’m wondering if someone can give me some basic pointers to the effect of, “when creating a new page/site, you should always start by doing this, this, and this”. I’m sure every site is different, but if there are some good “rule of thumb” type things to know about, that’s what I’m after. Can anyone help?

Semi-related, I need to set up navigation for this challenge, but we’ve never discussed it on FCC. Does anyone know of any navigation tutorials out there that can explain how it’s done?

1 Like

Please checkout Boostrap document on how to get the Navbar working and other sites like w3c schools

http://www.w3schools.com/bootstrap/
https://getbootstrap.com/examples/navbar/

I would start out with sketching the layout in a piece of paper on 1) what your layout/content would be 2) Start with simple static elements 3) Build some dynamism into the web page either using JS or CSS animations.

Hope its helps.

1 Like

I suppose that depends on what you want your web site to do. If you’re focused on look and feel than yeah, start with the design and layout.

However, if you’re worried about functionality first, build the functionality first - making it work can sometimes be more important than the look.

For any web site / project your first goal should be to come up with an end goal - and then break it up into small steps (really small steps if you want to like the first step could be ‘create new pen on codepen’). Then instead of seeing the goal miles away you see small signposts / markers along the way tthat can feel like you accomplished something.

If you are worried about layout - find a site you like - try and miimic it - try and steal it’s CSS (it’s doable if you look at the source code and can find it) and see how things work.

The first step is the hardest - but don’t make it ‘too big’

Related discussion from a little while ago…some good tips in this thread:

I don’t know about “shoulds” but this is what I do whenever starting a new FCC project:

  1. Create blank HTML, CSS, and JS files locally on my computer (I don’t use CodePen during the development process and would encourage others to do the same, as inevitably you’ll end up doing that anyway once you get to building for the non-profits).
  2. Fill in the required tags in the HTML file (HTML, HEAD with TITLE, LINK, and SCRIPT tags for Bootstrap, jQuery, and Font Awesome, BODY, etc). I’ll also add an H1 tag. Well not every project you’ll do may need Bootstrap, jQuery, and/or Font Awesome, but I always put those in anyway. Later, if I end up not needing any or all of them, then I’ll take out their respective LINK tags.
  3. Temporarily set a style for the H1 in the CSS, and add the $(document).ready() wrapper in the JS file.

At this point the project is ready for me to plan out the HTML structure, then style it with CSS, and then add the necessary interaction through JS. Basically you should follow the same order (as it’s what’s typically recommended by those who teach front-end Web development)—build the page structurally with HTML tags first, then add some CSS styles (you don’t need to “finish” the styling per se, as you’ll likely end up tweaking them at the end anyway), and then do the JS.

And then once I’m done and I’m happy with my project, I’ll copy the code over to CodePen.

4 Likes

Thank you so much for the replies! This is still a pretty intimidating task, but I’ll take the advice listed here and will keep chipping away at it :slight_smile:

I don’t know much about the concepts of AGILE - but there’s a tidbit I took from it that I find very helpful.

Any project you want to work on is going to look huge if you look at it as a whole. However, if you take the end goal and break it down into smaller pieces, and then work on one piece at a time - the project is less daunting and you have progress.

So your whole goal is ‘build a website’ - but that goal can be broken down into smaller and smaller pieces and each piece is less intimidating and more manageable.

In the beginning you should break down the pieces as granularly as possible

Instead of saying build the css say things like

I want all h1’s to be blue
I want all text to be this font
I want to have a special section that has special formatting (requires an id)

Complee one step at a time and you’re moving forward