Building a website for a friend but i don't know where to begin

So i’ve been taking FCC and codeacademy courses over the last few months and an opportunity has come up that i think will benefit my portfolio a ton. My friend just bought a place to host personal training sessions and make it his own business on the side. I think with my knowledge i can design a basic website with info about him and the place and hourly rates and whatnot. The thing is i don’t even know where to begin to actually make a real website. So far my designing and practicing has all been through codepen which i feel is like training wheels. I guess my question is how do i make a website from scratch and then put in on the internet for real world use?? Or should i just stick to mock websites to add to my portfolio for now?? Thanks for your help in advance! :slight_smile:

Jumping into shark-infested waters is a great way to learn how to swim. :slight_smile:

Kidding aside, this is a great opportunity. While you may not know everything yet, when you’re done with this project I can guarantee that the things you learned doing this project will stick with you longer and you’ll understand it more deeply than any online video or tutorial course.

So where do you begin? These is a general 10,000 feet overview of the major steps. Each major step here may involve many more steps, stuff to learn, etc.

  1. Talk to client (i.e. you friend) to determine what they want. What’s their version 1.0 goal for the website? What kind of informational pages do they want to display/publish?

  2. Mock up the site using a graphics program (Gimp, Photoshop, etc). Layout the look/colors/graphics of the site. Show to client. Client makes changes, go back to drawing board… repeat until client is happy and approves design.

  3. Create a template of the site, using the final photoshop mockup design… but this time using plain HTML, CSS and incorporate the graphic elements, photos that you’ll need.

  4. At this point, you should have a working mockup of the site, but instead of a “photoshop” file, you now have actual HTML/CSS that can be displayed by a browser. You can scroll up and down, and play with the various buttons, menus, elements of the page.

  5. Based on the HTML template you’ve created, duplicate them to create all the necessary pages you need for the site.

I made this post a few months ago, maybe you can get some ideas of the initial steps here.

4 Likes

Lol i just wrote a ton of text and then you posted and explained everything really well. Good job! @dmking0728 I would just add that after you cover basics, then try to avoid codepen, do your projects locally and then use github to post your source code there.

hahah… he needs all the help he can get, so feel free to post your point of view too! :slight_smile:

You basically covered everything, i just may add that surge is excellent for hosting static pages, its really simple and you don’t need more than 2 mins to publish your website.

You need to buy a Domain Name and Hosting . Use Website Builder for building your site or use Wordpress !
If you need to buy cheap hosting , domain You can find some hosting promo code just only from $1/month . Visit https://easypromocode.com/hosting/ for getting the codes.

1 Like

thanks for your input! Can you start from scratch with websitebuilder/wordpress? I don’t want to choose a template as that wouldn’t really highlight my usage of html+css for my portfolio. Or is it normal to use a template as a frontend web dev and not start from scratch?

1 Like

youtube, google, and stackoverflow are your friends! make sure to google things. don’t over think or over-work yourself though. remember to take breaks during the working and process!

If now you are on the stage of choosing a website builder, among the popular ones, inspect others. Young startups often offer good discounts and quality content at the same time. I accidentally bumped into Weblium and even stopped my choice on it.