Before writing a single piece of code, you need to be clear on the purpose and layout of the page.
1) Identify Purpose
Most importantly, you need to start with an idea of what your first objective is. Write (by hand) about the website you want to build:
- Who is it for? What do they care about?
- What will your website do to help them?
- What does that stuff matter?
- How will you know if the site is serving this purpose?
2) Find “Comparables”
These are things you can compare your idea/project with. Find similar projects already out there.
Record (in your journal):
- What has been done before? Save these links so you can be inspired by them later.
- What can you find that seems to be effective?
- What can you find that seems to need improvement?
When you get new ideas from what you find, cycle back to step #1 and update your purpose.
As you do this, remember to right-click and either “view page source” or “inspect element” to learn what’s going on behind the scenes
3) Planning the Layout (“Storyboarding”)
- Draw (by hand) what the first page will look like. These days, it’s recommended that these are drawings of what the site will look like on a smartphone or tablet, rather than on a computer screen. You’ll be able to change that later.
- What is the draft title of the site? And where will it go on the screen?
- What descriptions/links will be on this page? Do you want it at the top? bottom? left? right? centered?
- What will the text look like? (size, color, background, etc.)
- What images will you show? Where will they be placed?
- Do the same for next page that a visitor is likely to go to.
- Repeat for a few of the pages for the site.
Once you’ve done this for a few websites, you may wish to start using one of the free “wireframing” tools out there. If you find one that is particularly helpful, let us know or update this page if you have been given editing privileges.
4) Get Feedback
Tell people your vision (purpose, storyboard, etc.). Don’t just ask people you know well. Your site will be more effective if it is based on input form people who have different experiences and opinions from you.
5) Actually Coding
What is the first thing you want to show on-screen, for the first page, of the first part, of your first project?
Using the drawing from step 3 as a guide, start making the first page (index.html) using Brackets.
You’ll need some guidance as you go. So turn to resources like the following – but ONLY when you need them. (If you become to reliant on them, then you will be delayed from reaching your goal.):
- Ellie Jasper’s Reference Document [Uses codepen.io]
- Code.org’s Web Design Sequence (Sign in to stuido.code.org, then go to this site: https://studio.code.org/s/csd2)
- Thimble: https://thimble.mozilla.org/
- CodeCademy (Making a website, HTML, CSS)
- StackOverflow (A question and answer site that students have actually received responses through from other coders around the world. Sometimes people can be harsh at first, but don’t take that too seriously.)
Beyond the Basics
Bootstrap is a good starting point for making pages look cleaner and more organized. W3Schools has a great Bootstrap tutorial.
Front-End Development
This is about using the browser (Chrome, Firefox, Safari, Edge, etc.) to make a web page interactive. It involves JavaScript.
A CSA student Son created an portfolio of some basic interactivity that you’re free to use. Check out this Sandbox page of his GitHub repository.
Back-End Development
This is about making an overall website interactive (allowing people to log in, saving information to a database, loading stuff from a database, sending emails, etc.). It can involve PHP, Ruby, Python, Perl, and other back-end tools and frameworks.