Skip to content
OverviewSolutions
14
Comments
17
Alex Garcia 🦝 Garcialexco
@garcialexco

All comments

  • Alex Garcia 🦝 Garcialexco•440
    @garcialexcoPosted almost 2 years ago

    Hello! Great job completing the challenge! 🔥

    There's a couple parts of your code that I might be able to help with:

    • Great job with the border background, it's super stylish and smooth!
    • Make sure to link the fonts in HTML head. This reduces the critical request depth and speeds up page load time.

    Hope this helps, and keep up the great work! 👍 Happy Coding!

    Marked as helpful
    0
  • Alex Garcia 🦝 Garcialexco•440
    @garcialexcoPosted almost 2 years ago

    Hello! Great job completing the challenge! 🔥

    There's a couple parts of your code that I might be able to help with:

    • Make sure to link your fonts in your HTML head. This will make your page load a bit faster.
    • For CSS resets, I have been using normalize css. Just link it like you would any CSS file, and it resets everything.
    • For responsive reasons, it's best to use rem or em due to their scalability without breaking.

    Hope this helps, and keep up the great work! 👍 Happy Coding!

    0
  • Alex Garcia 🦝 Garcialexco•440
    @garcialexcoPosted almost 2 years ago

    Hello! Great job completing your first challenge! 🔥

    There's a couple parts of your code that I might be able to help with:

    Make sure to use semantic HTML, here's an article in the subject.

    Link your fonts in the HTML head, it makes your page load just a bit faster.

    Try to use classes instead of ID's wherever possible, ID's are reserved for when you are using JS to manipulate an element. Classes are ideal for styling because you are able to reuse them throughout your code.

    Hope this helps, great job again on your first solution and keep up the great work! 👍 Happy Coding!

    Marked as helpful
    0
  • Alex Garcia 🦝 Garcialexco•440
    @garcialexcoPosted almost 2 years ago

    Hello! Great job completing the challenge! 🔥

    There's a couple parts of your code that I might be able to help with:

    Make sure to use semantic HTML tags like the main, section, etc tags. Check out this article on the topic.

    Also, be sure that you link fonts in the HTML head, it helps the page load faster.

    If you are using CSS resets, I'd like to recommend normalize.css.

    One last thing, use rem or em for unit sizes. They are scalable and are responsive on different screen sizes!

    Hope this helps, and keep up the great work! 👍 Happy Coding!

    Marked as helpful
    0
  • Alex Garcia 🦝 Garcialexco•440
    @garcialexcoPosted almost 2 years ago

    Hello! Great job completing the challenge! 🔥

    There's a couple parts of your code that I might be able to help with:

    • I just learned this! You center your elements by using CSS flex:
    min-height: 100vh; 
display: flex; 
justify-content: center; 
align-items: center;
    • It helps to link your fonts in your HTML file then declaring it in your CSS files. This makes your fonts load faster and more efficient!

    Hope this helps, and keep up the great work! 👍 Happy Coding!

    Marked as helpful
    0
  • Alex Garcia 🦝 Garcialexco•440
    @garcialexcoPosted almost 2 years ago

    Hello! Great job completing the challenge! 🔥

    There's a couple parts of your code that I might be able to help with:

    • When you are setting up files for your Sass, it's super convenient to set up folders for your scss and one called dist to export your compiled CSS folders in.

    There is a channel on YouTube called CoderCoder that has a great video about Sass that breaks it down quite a bit!

    Hope this helps, and keep up the great work! 👍 Happy Coding!

    Marked as helpful
    0
  • Alex Garcia 🦝 Garcialexco•440
    @garcialexcoPosted almost 2 years ago

    Hello! Great job completing the challenge! 🔥

    There's a couple parts of your code that I might be able to help with:

    • You can center your main by:
        position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    • Also, make sure to use semantic HTML wherever possible and use div sparingly. For example, you can avoid using <div class="card"> and just put a class on main like: `<main class="main">'

    Hope this helps, and keep up the great work! 👍 Happy Coding!

    Marked as helpful
    1
  • Alex Garcia 🦝 Garcialexco•440
    @garcialexcoPosted almost 2 years ago

    Hello! Great job completing the challenge! 🔥

    There's a couple parts of your code that I might be able to help with:

    • Make sure to use semantic HTML and use div sparingly. You can change <div class="container"> to <main class="main">. This will make your website more accessible to screen readers and search engines!

    • No need to use multiptle h1's, you can use headers in levels of importance. H1 being most important h2 second most etc. You can use p.

    • Also make sure to use classes instead of id's. Id's you'll only be able to apply that style once, whereas classes you can apply to different elements and they can be reused to cut down on redundant code.

    Hope this helps, and keep up the great work! 👍 Happy Coding!

    Marked as helpful
    1
  • Alex Garcia 🦝 Garcialexco•440
    @garcialexcoPosted almost 2 years ago

    Hello! Great job completing the challenge! 🔥

    There's a couple parts of your code that I might be able to help with:

    • Make sure to link your fonts in the head of your HTML document, then assign as necessary in the CSS file. Decreases load times!

    • Instead of <div class="container">, make it sematic and put <main class="main"> this will make it easier for screen readers and search engines to access your website!

    Hope this helps, and keep up the great work! 👍 Happy Coding!

    Marked as helpful
    0
  • Tanmay Ravane•10
    @codeminexSubmitted almost 2 years ago
    1. What did you find difficult while building the project?
    2. Which areas of your code are you unsure of?

    => Areas where I felt difficult to build is to make the website view same as on desktop as well as mobile. Still I am not able to figure out how to get the desired look on Mobile devices.

    QR code landing page using HTML and CSS

    3
    Alex Garcia 🦝 Garcialexco•440
    @garcialexcoPosted almost 2 years ago

    Hello! Great job completing the challenge! 🔥

    There's a couple parts of your code that I might be able to help with:

    • Easiest way to center a thing in the middle of the page is:
        position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    • Stick to using responsive units that resize with the page such as em, rem, percentages etc. They are a lot more forgiving and not as exact as pixels when making it responsive!

    Hope this helps, and keep up the great work! 👍 Happy Coding!

    0
  • Alex Garcia 🦝 Garcialexco•440
    @garcialexcoPosted almost 2 years ago

    Hello! Great job completing the challenge! 🔥

    There's a couple parts of your code that I might be able to help with:

    • It's best to link fonts in the HTML file, and then assign in CSS wherever necessary. This makes the page load a bit faster!

    • Centering things are super difficult , here's a tip to center an element in the middle of the page:

        position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    • Be sparing in your use of div, here's a hand article about semantic HTML in regards to div usage: https://dev.to/kenbellows/stop-using-so-many-divs-an-intro-to-semantic-html-3i9i

    Hope this helps, and keep up the great work! 👍 Happy Coding!

    Marked as helpful
    0
  • Nikita Karachentsev•20
    @filafilafilafilafilafilafilaSubmitted almost 2 years ago

    this is my first independent project, I've only been learning frontend for a week, please be understanding))

    Card preview page

    1
    Alex Garcia 🦝 Garcialexco•440
    @garcialexcoPosted almost 2 years ago

    Hello! Great job completing the challenge! 🔥

    There's a couple parts of your code that I might be able to help with:

    • In your CSS, do your best to use semantic HTML wherever possible. Div should be used sparingly. Here is an article that I hope helps you out in your next project!

    https://dev.to/kenbellows/stop-using-so-many-divs-an-intro-to-semantic-html-3i9i

    Hope this helps, and keep up the great work! 👍 Happy Coding!

    Marked as helpful
    1