Project 1: Portfolio Site
- Writing HTML and CSS
- Moving and accessing files on servers
- Knowing HTML and CSS Semantics
- Practice designing content for the Web
- Basics of responsive design
You will create a simple, personal portfolio website for your first project. We will begin with writing the basic content needed for the site to appear on the web using HTML. After creating this structured content, we will stylize the site using CSS and optimize the design for desktop, tablet and mobile viewing.
- Create a site with at least four pages. A landing page, a couple pages dedicated to displaying your work and a page with more info about you and contact info is pretty standard. You can deviate from that model, however, if you can justify the way you've constructed your site. Be creative and thoughtful in your process.
- Create the site using the HTML elements we learned in class.
- Create a menu using <ul>
- Include at least one image
- Add at least three links to external sites
- Add your email using mailto:
- A fair amount of content filling the site, including multiple projects displayed on the portfolio page
- Create a folder in your public_html folder (on your server) called project_1. Upload your HTML files and any image files you're using to this folder. Your homepage should be called index.html, and your other pages may have file names of your choice.
- Post a link to your site in #general on Slack by Feb. 11, and compress (zip) your folder and DM it to Sean.
- During class on Feb. 11, we will view each other's sites and discuss the content structures we've created. At this point, your website should look relatively plain, in black and white with no visual styling.
- Add CSS to your website using an external stylesheet. This stylesheet should be titled main.css and added to your project_1 folder once completed. The required CSS is listed below.
- Constrain the website body to the center of the page at 60 percent width
- Edit fonts for headings and paragraphs
- Resize and add border to image
- Edit link, table and menu styling
- Have all files FTP'd to your server by class time Feb. 27 for the second checkpoint. Well discuss design and constructively critique our sites and troubleshoot.
- Optimize the site for mobile and tablet using responsive design elements within your HTML and CSS.
- Use breakpoints from the Chrome Inspector at Mobile L and Tablet
- Post a link to your site in #general on Slack by class time March 6.
Project 1 is worth 200 points (50 points for each checkpoint, 100 for the final site). Grammar, spelling and punctuation matter in all written content. These are likely your first websites, so they don't need to be visually stunning, but time, effort and thought spent on the project will be evident. A rough outline for grading is presented below.
- A+: Beyond minimum HTML components and CSS styling. Markup is well-formatted and correctly expresses the content's structure. All components are responsive.
- A: All site requirements met with minor errors.
- B: Some requirements not met. Missing components, a few HTML errors that affect content structure, issues displaying items written in code or issues with responsiveness.
- C: Numerous HTML errors, missing pages, several missing components, little responsive design.
- F: Systemic errors, turned in late, critical errors.