introduction

Welcome to my portfolio project! This is a showcase of my work and skills as an aspiring web developer. I've put together a collection of my projects to give you a glimpse of what I can do.

project Title

My Portfolio

motivation

I created this portfolio because I wanted a place where I could display the websites and applications I've built.

screenshots

links

• Link to the code website link to the code website
• Link to the code repository link to the code repository

usage

• Just visit my portfolio website in your web browser.
• Click on the project images to view more details about each project.
• Read the "About Me" section to learn about my background and interests.

features

• Project Gallery: You can see a gallery of my projects with descriptions and links.
• About Me: Get to know me a bit better through the "About Me" section.
• Contact: Reach out to me through the contact form.
• Responsive Design: The portfolio looks great on both big computer screens and small phone screens.

conclusion

I hope you enjoy exploring my portfolio as much as I enjoyed creating it. It's a starting point of my journey as a web developer, and I look forward to what the future holds.

credits

Front-end web developer: Huseyin Altin GitHub

• I'd like to thank my coding bootcamp instructors for teaching me these skills.

technologies used

• HTML
• CSS

change log

• download and unzip starter code

  • download the provided starter code.
  • unzip it to a local directory.

• set up environment: create and clone github repository

  • install a code editor (e.g., visual studio code).
  • create a new github repository with a unique name.
  • clone the repository to your local machine.

• add starter code to repository

  • add the unzipped starter code to your local repository.
  • push the initial code to github.

• understand requirements and plan

  • review acceptance criteria and grading requirements.
  • create a wireframe of your portfolio.
  • define color scheme, fonts, and images.

• html structure

  • create the basic html structure for your portfolio, including navigation links.
  • include your name, a recent photo or avatar, and links to sections about you, your work, and how to contact you.

• check accessibility and semantic html

  • verify accessibility features.
  • implement semantic elements consistently.
  • organize html elements logically.

• fix background image

  • correct the path of the background image.
  • ensure it fits the screen.
  • provide descriptive alt text for all image and icon elements.
  • review and adjust heading order for logical hierarchy.

• about section

  • write and add content to the "about me" section.
  • style the section for visual appeal.
  • agile review: assess content alignment with goals.

• work/projects section

  • create placeholders for work/projects.
  • implement titled images for projects.
  • style these elements.
  • ensure clicking application images leads to deployed applications.
  • agile review: review and refine work/projects section.

• css setup

  • set up css files and apply basic styling to your html structure.
  • optimize those styles for visual impact.
  • agile review: review and improve initial css styles.

• responsive design

  • begin implementing responsive design using media queries.
  • focus on desktop screen layout.
  • agile review: assess css for responsive design and refine as needed.

• consolidate and organize css

  • refactor css selectors and properties for efficiency.
  • organize css to match html structure.
  • consolidate, group, and remove redundant styles.
  • improve code readability.

• add comments

  • include comments in html to explain structure.
  • comment css to describe sections and styling rules.

• larger image for first application

  • implement larger image for the first project.
  • ensure the first application's image is larger than others.
  • agile review: review visual impact and functionality.

• testing

  • update the file structure and paths.
  • test on various devices and browsers for compatibility.
  • check that all application links function correctly.

• documentation and submission

  • create a detailed readme.md file in your repository.
  • include project description, screenshots, links, and code source information.
  • double-check acceptance criteria.
  • submit urls of deployed application and github repository.

• application quality checklist

  • when the page is loaded, the page presents your name, a recent photo or avatar, and links to sections about you, your work, and how to contact you.
  • when one of the links in the navigation is clicked, then the ui scrolls to the corresponding section.
  • when viewing the section about your work, then the section contains titled images of your applications.
  • when presented with your first application, then that application's image should be larger in size than the others.
  • when images of the applications are clicked, then the user is taken to that deployed application.
  • when the page is resized or viewed on various screens and devices, then the layout is responsive and adapts to my viewport.

• deployment

  • host your portfolio on github pages or another platform.
  • navigate to your github repository in the browser and then select the settings tab on the right side of the page.
  • on the settings page, scroll down to the github pages section. then, in the section labeled source, select the main branch as your source.
  • deploy the application using github pages.
  • ensure no load errors and that the application is accessible via the live url.
  • navigate to <your-github-username.github.io/your-repository-name> and you will find that your new webpage has gone live! for example, if your github username is "lernantino" and the project is "css-demo-site", then your url would be lernantino.github.io/css-demo-site.