Web Portfolio

I need support with this Website Design question so I can learn better.

I will send more instructions once I have found a tutor.

PORTFOLIO website

Portfolio but be a single page application (SPA) with at least 3 sections. This will become your website portfolio to promote yourself as a front-end web developer. This project will highlight all of your Web Projects (1-4) and at least 2 projects/lab from your favorite work in the class. You will also reflect on at least three important topics learned in the class. You must create this as a published website on your webserver account.

PORTFOLIO WEBSITE REQUIREMENTS

Your website will be entirely coded by yourself and it will not use any third-party site content for any part of the site. No linking to any third-party site for any of your navigational items. You can use Bootstrap or a CSS framework, but you are not allowed to use a pre-created template, a CMS, or a drag-and-drop tool for this assignment

Your website should:

• be responsive, either using a responsive framework discussed in class or via hand created media queries
  • should provide for 3 screen sizes – mobile, tablet and desktop size
• include a well thought out navigation system that should only link to your own website content. Do not use the main navigation section to link to your portfolio pieces. Use the main content area to link to your portfolio pieces. Your main site navigation should link only to separate sections on your website.
• include a well thought out color scheme
• keep the user in mind by properly formatting content using headings, paragraphs, lists, etc.
• use at least two Google fonts.

Content Requirements

• An engaging detailed portfolio page with content to draw the site user in – make it personal, describe yourself, your goals, your path.
• A section that has images, links, with a brief description of each portfolio piece you are linking to. You must link to a minimum of ten examples of your work including all four of your website projects from this class. I would recommend the other six from the lab work or other assignments you may have done in previous classes.
• Take a screenshot of your FreeCodeCamp Certificate of Completion for the Responsive Website Design program and link to your FCC profile page. (optional)
• I would highly encourage you to use a photo or avatar of yourself in the website somewhere. Also include some basic contact information but not address or phone number. Email, city/state, social media, etc.
• You are welcomed and encouraged to link to a resume/job history somewhere in your site content.
• You are welcomed and encouraged to create a contact me section with a simple php email script that allows the user to contact you. If you do this, you do not need to include your email address on the page.
• You are welcomed and encouraged to also link to work from other courses to showcase your journey. Be sure to include course names and dates so that the progression is clear.

Grading Elements

Your final website project grade (100 points) will be based on the following:

• Website Content (50 points)
• User Experience (25 points)
• Overall Site Design (25 points)
• Passing the FCC test case (Optional for extra 10 points)

Grading Checklist

Before submitting your assignment, go through this checklist to ensure you meet all of the requirements:

• Do all webpages have a title in the browser tab?
• Is the design and navigation consistent across the website? (Note: the index page can have a different layout but the other pages should be consistent)
• Is every page of the website responsive?
• Is there suitable content on every page? No placeholder text or images.
• Is the content easy to read – good contrast between the font color and background color? Are paragraphs broken up? Is there a use of headers to make the content easy to scan? Is content broken into lists where appropriate?
• Does the site have a good color scheme and sophisticated layout?
• Are all images displaying correctly and responsive?
• Is the site navigation responsive?
• Is the site usable? Does navigation work appropriately across all pages without having to use the browser back button?
• Is the site free from grammatical errors and typos?
• Does the site look professional?
• Are at least 2 elements from the emerging technologies/course topics incorporated into your final project website?
• Did you include evidence of your FCC Responsive Design certificate completion? (optional)

Meet all of the requirements of the Responsive Web Design Projects – Build a Personal Portfolio Webpage

• Objective: Build a CodePen.io (Links to an external site.) app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/zNBOYG (Links to an external site.).
• Fulfill the below user stories (Links to an external site.) and get all of the tests to pass. Give it your own personal style.
• You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Happy coding!
• User Story #1: My portfolio should have a welcome section with an id of welcome-section.
• User Story #2: The welcome section should have an h1 element that contains text.
• User Story #3: My portfolio should have a projects section with an id of projects.
• User Story #4: The projects section should contain at least one element with a class of project-tile to hold a project.
• User Story #5: The projects section should contain at least one link to a project.
• User Story #6: My portfolio should have a navbar with an id of navbar.
• User Story #7: The navbar should contain at least one link that I can click on to navigate to different sections of the page.
• User Story #8: My portfolio should have a link with an id of profile-link, which opens my GitHub or FCC profile in a new tab.
• User Story #9: My portfolio should have at least one media query.
• User Story #10: The height of the welcome section should be equal to the height of the viewport.
• User Story #11: The navbar should always be at the top of the viewport.
• You can build your project by forking this CodePen pen (Links to an external site.). Or you can use this CDN link to run the tests in any environment you like: https://cdn.freecodecamp.org/testable-projects-fcc...
• Once you’re done, submit the URL to your working project with all its tests passing.

Upload your website to a webserver/ codepen and submit your URL

When you have completed all of these steps, please submit this assignment with your final website URL. Be sure to include a comment letting me know which two elements were included in your final project.