Cheetahs - Personal Portfolio - Melissa Pena #99
Conversation
There was a problem hiding this comment.
Personal Portfolio Site
What We're Looking For
| Feature | Feedback |
|---|---|
| Baseline | |
| Appropriate Git Usage | ✅ |
| Answered comprehension questions | ✅ |
| Page fully loads | ✅ |
| No broken links (regular or images) | Not quite, see comments. |
| Includes at least 3 pages and styling | ✅ |
| HTML | |
Uses the high-level tags for organization: header, footer, main |
✅ |
Appropriately using semantic tags: section, article, etc. |
✅ |
| All images include alternate text | See comments below |
| CSS | |
| Using class and ID names in style declarations | ✅ |
| Style declarations are DRY | ✅ |
| Overall | ✅ , please make sure to use HTML validator to find errors. |
| <div><li><a class="btn" href="/pages/about.html">About me</a></li></div> | ||
| <div><li><a class="btn" href="/pages/portfolio.html">Portfolio</a></li></div> | ||
| <div><li><a class="btn" href="/pages/index.html">Home</a></li></div> |
There was a problem hiding this comment.
Careful with your file paths! The /pages/about.html path does not actually work because it is an incorrect absolute path. Starting a path with a slash (/) will start the file search at the root directory of your entire file system (not your project).
To correct this, we can use a relative path instead. This will provide directions to the target file based on the current file's location.
In code this looks like: about.html. The two dots at the beginning signal to start searching in the parent directory of the current directory.
Here is a great resource on absolute vs relative paths: https://www.geeksforgeeks.org/absolute-relative-pathnames-unix/
This comment applies to the images as well, none of them show up when the page is opened.
| <h1>My life </h1> | ||
| <nav> | ||
| <ul> | ||
| <div class="box"> |
There was a problem hiding this comment.
The <div> element cannot be a child of the <ul> tag. Remember to run your HTML through the HTML validator!
| <main> | ||
| <h2>Viewing Party</h2> | ||
| <section class="port"> | ||
| <img alt="Data Estructure" src="/images/data structure.png"/> |
There was a problem hiding this comment.
Spaces in path names will cause errors.
| I spent most of my time going to the gym and riding my motorcycle. | ||
| I have been always very curios about life, and love learning new things every day. | ||
| </p> | ||
| <img class="about" alt="Colombia" src="/images/Family.png"/> |
There was a problem hiding this comment.
It would be better if the alt text is more descriptive. Screen readers use the alt text to tell people who are blind what is in the picture. Just hearing "Colombia" does not really explain to the blind user what is in the picture.
Personal Portfolio Site
Congratulations! You're submitting your assignment!
Comprehension Questions
Why is it important to consider and use semantic HTML? |
Because it gives order and comprehension to the code. It is important to keep good practices on the semantics, even though it is not necessary (indentation) it contributes to the readability.
How did you decide to structure your CSS? |
I started with the general elements like the body, footer, header, etc. Then I continued with the more specific ones, like classes and IDs. Also, I did the Grid at the end because it was more confusing.
What was the most challenging piece of this assignment? |
It was challenging to work with the Grid, generate the template, and organize the space to give a good design. Also thought that just thinking about the design itself was exigent.
Describe one area that you gained more clarity on when completing this assignment |
Definitely enjoy working with Flex. It gave me a lot of flexibility to work on the design. I felt more confident with writing HTML code and using CSS. Enjoyed the research I needed to do in order to get the knowledge well-based and translate the ideas into my website.
Optional |
Did you deploy to GitHub Pages? If so, what is the URL to your website? |
No.