Skip to content
OverviewSolutions
37
Comments
5
Georgi Tashev
@xaoccc

All comments

  • BlackholeSK•10
    @BlackholeSKSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of successfully implementing a responsive design that adapts well to various screen sizes. Next time, I would focus more on optimizing the performance and reducing the loading time of the site.

    What challenges did you encounter, and how did you overcome them?

    One of the main challenges was ensuring cross-browser compatibility. I overcame this by testing the site on different browsers and using polyfills for any unsupported features. Additionally, I faced some issues with CSS flexbox alignment which I resolved by revisiting the flexbox documentation and experimenting with different properties.

    What specific areas of your project would you like help with?

    I would like feedback on improving the accessibility features of the site. Specifically, any suggestions on making the form elements more user-friendly and enhancing the overall ARIA roles would be greatly appreciated.

    Base Apparel Coming Soon

    1
    Georgi Tashev•550
    @xaocccPosted 4 months ago

    None of your styles are loading. Maybe you forgot to add link to style.css in the html file?

    0
  • Georgi Tashev•550
    @xaocccPosted 4 months ago

    Best design ever lol But seriously -

    1. Rename qr.html to index.html. Your live site does not contain index.html, so it opens the readme.MD file.
    2. Put image-qr-code.png into the same dir as index.html.
    3. rename qr.css to styles.css and put this in the head of the html: <link rel="stylesheet" href="styles.css"> This is a standard
    4. Use rem/em instead of px
    0
  • Georgi Tashev•550
    @xaocccPosted 10 months ago

    It is bad practice to write inline CSS code in th HTML. You should put your styles inside the .css file and read it from there. Besides that - very good solution. I like your right section better than the original. How did you achieve such vivid contrast?

    0
  • Georgi Tashev•550
    @xaocccPosted 11 months ago

    I used this approach: CSS :

    img {
    display: table-row;
    float: left;
    width: 50%;
    height: 100%;
}

    HTML:

      <div id="content-box" role="main">
    <img id="main-img" src="./project1-data/images/image-product-desktop.jpg" alt="Gabrielle Essence Eau De Parfum" />
    <div id="item-description">
    ...
    </div>
  </div>

    You can try also using display: flex for the content-box and display: block for the image. The adjust the image size. Hint: use the inspect element option on the browser right click. You can adjust the CSS in real time and see what happens. Here is my code if you what to compare: https://github.com/xaoccc/xaoccc.github.io/tree/main/project1-data - CSS https://github.com/xaoccc/xaoccc.github.io/blob/main/project1.html - HTML

    Marked as helpful
    0
  • Georgi Tashev•550
    @xaocccPosted almost 2 years ago

    On my browser it looks exactly as in the design, i used all style guide, but still, the h1 size was 1px bigger which costed me 1 line of 23 pixels. I've learned my lesson.

    0