Giter Site home page Giter Site logo

CSS

In this assignment, you will add styling to the webpages you created in the HTML assignment, and will publish the website using GitHub pages.


🦶 Steps

  1. Add the HTML you wrote for the About page to the index.html file

  2. Add the HTML you wrote for the Skills page to the skills.html file

  3. Add the HTML you wrote for the Experience page to the experience.html file

  4. Add the HTML you wrote for the Education page to the education.html file

  5. Add the HTML you wrote for the Interests page to the interests.html file

  6. Use Flexbox and other CSS properties to the style.css file so that your pages look like these:

    index.html index-page

    skills.html skills-page

    education.html education-page

    experience.html experience-page

    interests.html interests-page

  7. Change the content so they represent you (your picture, your education, your experince, etc.)

  8. Make sure all the links are working if applicable (for instance, you don't have to add a Pinterest page if you don't have one, but the link to your resume should work)

  9. Make sure the website is responsive at least on Desktop and Tablet devices (use @media queries for this). Here's an example of how it should react to screen size changes: responsive

  10. It doesn't matter what threshold you're using for the @media query (800px, 600px, etc.)

  11. Commit all the changes to the main branch and push to the remote repo (here)

  12. Create a public repo under your personal GitHub account with this name: <your-github-username>.github.io

  13. Clone the repo to your local system; add all the files you have here to the project; commit to the main branch and push to the remote repo (your repo under your GitHub username)

  14. Open up a browser and go to https://<your-github-username>.github.io. You should be able to see the website (it may take a few minutes)

  15. Add the address to your webpage to the PAGE-ADDRESS.md file

  16. Commit to the main branch and push to the remote repo (here)


📃 Notes

  • Make sure you save what you had for the About page in the index.html page. That's the default page that the browser shows when someone visits your website
  • Make sure you alter the data on the examples so that the website represents you, not Rick
  • Don't use any CSS frameworks for this assignment. You need to write all the CSS yourself
  • Use Flexbox for the layout
  • Feel free to make minor changes, such as changing colors and font-sizes
  • Feel free to add new elements, data, etc.
  • You may need to change some of the HTML elements you used in the HTML assignment. One example is the navigation menu. You probably choose a paragraph to do that. For this assignment, it makes more sense to use <nav>, <ul>, and <li> for the navigation (hint: I created a similar one in the class). So, feel free to use new HTML elements if they make more sense now

David Anez's Projects

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.