Challenge: Creating Your First Website from Scratch

Topics covered in this HTML & CSS tutorial:

Design & code a website entirely on your own

Exercise Overview

To get practice and get better at coding, you need to use what you’ve learned so far to make your own website from scratch.

If you will be taking other web coding classes at Noble Desktop, as you continue learning more techniques you can either add them to this website you build, or better yet create more websites that incorporate them.

Steps to Building Your First Website

To build your first website, here’s what you need to do:

Step #1: Figure Out What Site You’ll Build

If you you’re in Noble Desktop’s Full-Stack Certificate Program, we have a specific type of website for you to build. So skip over these ideas and refer to the section specifically for you.

For these ideas, you don’t have to build a large website, it’s good to start small.

• Restaurant
  • Be sure to include a separate page for their food menu(s)
  • Make sure the location and phone number is prominent (and clickable)
• Any type of service business: dog walker, lawyer, investment management company, etc.
  • Make a page for each service they offer (you don’t have make a lot of services), but each service would need it’s own page for SEO (Search Engine Optimization) purposes
  • Have an about page
• A website promoting an iOS/Android mobile app
• A blog for a specific niche
  • Eventually this would be turned into a WordPress theme, but the first step is to design/build the various types of pages with HTML and CSS.
  • Minimum pages to build: homepage (you may list blog posts here, or make a dedicated blog page for those), blog post page
• Website for an event (like a conference, etc.)
  • For accepting registrations you could use a service like Eventbrite, so don’t worry about creating that functionality
• Website for person, band, musician, motivational speaker, entertainer, author, etc.

Step #2: Design & Code

If you know a design app (such as Figma, Adobe XD, or Sketch) you can mock up your design there first, then start coding.

If you’re not a designer, refer to existing websites for their style. Replicate their style as you code your website.

Step #3: Get a Domain Name & Web Hosting

We recommend bluehost.com where you’ll get your domain name free for the fist year. After the first year you’ll have to pay yearly for the domain name, and the monthly web hosting costs will increase to their normal rate (you get a discount on the first year).

You’ll have to continue paying as long as you want to have your domain name and web hosting. Luckily it’s not too expensive and is essential for anyone working in tech or design.

Step #4: Upload the Site to Make it Live

Use an FTP app like Cyberduck from cyberduck.io/download to upload your site to make it live.

If you’re be making a portfolio website, put the practice website(s) you make into subfolders. For example, let’s say your portfolio website folder structure is this:

• index.html
• css folder containing main.css
• someproject folder
    - index.html
    - css folder containing main.css
• anotherproject folder
    - index.html
    - css folder containing main.css

You could have a links to see your projects like:
yourwebsite.com/someproject
yourwebsite.com/anotherproject

If You’re in Noble Desktop’s Full-Stack Program

Instead of building one of the sites above, we have a specific type of site for you to start working on. When you get to the back-end portion of the program, you’ll add the back-end functionality. For now you should start on the front end HTML and CSS, so it will be ready for when you need it.

You must do this project first. If you finish this and have extra time, then you can go back and do any of the other front end projects mentioned above.

In the back-end portion of the Full-Stack Certificate Program you’ll work on your own project and a movie search website (similar to Netflix). So for your project you need to choose a type of website other than movies. Here are some ideas:

Topic Ideas

• Recipes
• Drinks
• Animals
• Sports
• Apartments for rent
• Jobs
• Classifieds (things for sale, etc.)
• Something else of our choosing that would work similarly, where you can hit a list of content and load in the info.

Pages & Features You’ll Need

Here are the types of pages and functionality you’ll need to have in your website. For now, focus on designing and coding the HTML/CSS. Don’t worry about making the features actually work, because that’s what you’ll learn in the back-end portion of the full-stack program.

• Homepage
• Join (create an account)
• Login (to an existing account)
• Search results page (use static content for now, you’ll make it dynamic and functional later)
• Detail page displaying all the info about an item (you’d see this page after clicking an item in the search results)
• Page to create new items (with form fields for the item details (example: if it were products that would be product name, price, etc)
• Page to update an existing item (with form fields for the item details)
• Have a search field in the navbar
• Have a way to save items as a favorite
• Favorites page:
  • Displays items you’ve saved
  • Have a way (like a button) to remove an item from the favorites list