project: Web Development - Build your first personal website

Story points 3
Tags html css responsive web design
Hard Prerequisites
IMPORTANT: Please review these prerequisites, they include important information that will help you with this content.
  • PROJECTS: Simple Website - Build your first personal website
  • TOPICS: FreeCodeCamp - CSS Grid

    • Now that you have finished creating your first simple personal portfolio, make it responsive and ensure that it passes through a linter. You should make changes to the same portfolio you have created, do not make a new one.

    Instructions

    The HTML and CSS should be developed in a logical way with good naming conventions that would allow another developer to easily understand and build upon your code. There is something called “Semantic Markup” - read all about it here.

    You can also make use of this cool markup validation tool to validate the HTML code used in your website.

    Your web page files and folders should be organized and named in a logical manner.

    Once you have finished your design and are satisfied with the style and content, please submit a link of the website hosted on GitHub Pages. You must have hosted your simple portfolio to Github Pages by now, please submit the same link of your website with the updated features. DO NOT submit a link to your github repo. We don’t want to clone your website, we want to look at what you built.

    Requirements

    • Website must be responsive to different screen sizes - use a mobile-first approach!
      • Use CSS Grid (see tutorials below) to design your site and make it responsive.
    • Website must be developed using HTML and CSS Grid with a logical structure and naming conventions in your code.
    • You can also add some Javascript to make things more interactive.
    • Feel free to use icons, colours, pictures or organograms if you need to.
    • Make sure that your html passes through a linter. It is important to reduce errors and improve the overall quality of your code.
    • Start small and simple. Get the basic structure in first. Don’t sit and obsess over choosing the right shade of green, or the perfect font.
    • Also, we’ll be looking out for good developer habits. Please make sure you push your code often and your git commit messages actually make sense!
    • Try to avoid fancy flowery language, it’s actually more impressive when people get straight to the point. Communicate clearly and efficiently.
    • Demonstrate attention to detail. Make sure your stuff is tidy. Use whitespace as needed. Make sure your pictures are not squashed or stretched.
    • This is not a creative writing exercise. Please tell the truth about your abilities and experience. If you did not do a job then do not list it.

    Instructions for reviewer

    • The link submitted should direct you to the website.
    • All social media accounts and work profiles should work.
    • Font and text size should be clear.
    • They should make use of the entire web page.
    • It should be responsive to all screen sizes.
    RAW CONTENT URL