Code Monkey home page Code Monkey logo

tribute-page's Introduction

Welcome to My GitHub Profile! 👋

New in tech and coding

Learning Goals 📚

Currently, I'm exploring [Technology/Framework] and working on [Project/Goal].

tribute-page's People

Contributors

devcodepush avatar

Watchers

avatar

tribute-page's Issues

Box model issues

<header> --> add same background color as main and play with box model to have same result as the example
<ul> --> add max-width to the text and margin left/right to center the text
#img-caption --> add margin top,bottom to increase space like in the example
#img-div --> play with padding to create a border for the image

In general, play a bit with margin/padding top/bottom to increase the space between element. You can also inspect the original example and see that solution

Feedback to your Tribute Page exercise

Hi, Arman!

I just had a look at your Tribute Page in detail and looks great, well done!! :) I have opened this "issue" here on your GitHub repository to give you some feedback as I promised. Issues are used to do many things, for example, to keep track of small tasks, bugs, enhancements or any other requests. Here you have some documentation about them. As a developer, you are going to use them a lot in the future, so I thought it would be a good idea to communicate my feedback through one 🚀.

You could reply to this issue with a message through the GitHub interface if you want to, and close it when you think all the fixes are ready. I usually open issues on my repositories as personal notes listing all the things that I want to improve in the future, describing them, etc. so I don't forget :)

Important note: I have noticed that your exercise is so so similar to Silma's one (well, I would say... the code is not similar, it's identical hehe), so it would be great if you both try to help each other as much as you can (that's great!) but also it's important that you code your own things 🙏🏻 So you really learn by coding! I'm gonna copy-paste the feedback that I gave to Silma here 👇🏻, and really hope you work on your own repositories independently, so you keep learning 🙂

So about the feedback:

  • So cool that you have added a repo description through a Readme.md file 🚀 The .md extension means that it's a Markdown file, with its own syntax. You can find more info and documentation here. So in case you want to put things in bold, or add some images or whatever, now you know how all that's it's possible 😉
  • Semantics is not bad, but I think it could be improved still, I'll give you some ideas below so you can keep working on it :)
  • Important: I think it would be great if try to improve the indentation of your code as we commented in class. Here is some documentation about it. It will make your code easy to read, easy to understand in terms of structure, etc.

And here is the list of all the small improvements I found:

  • I think you are missing some important general tags in your HTML code. For example, remember that all HTML documents must start with a <!DOCTYPE> declaration (here some documentation)
  • Great that you have a head tag with all the metadata (invisible information of your website). Could you add more info there? Maybe a title? (Some documentation).
  • Improve semantics. Review your general structure: Should the main tag wrap everything...? Don't you think is better to have a proper header for the h1 and your first p? Some documentation here. Then you could start your main tag, with all the main information of your website, and in third place, a proper footer tag? (Some documentation here). So the general structure of your body could be like this:
[...]
<body>
    <header> [...] </header>
    <main> [...] </main>
    <footer> [...] </footer>
</body>
  • More semantics: Review Dr. Borlaug's time line. Don't you think that looks like a list of years? Remember that lists are very important in semantics, and are everywhere! I think you could use an unordered list (bulleted list) there with many little list items, do you agree? Study a bit the documentation about ul here and about li here to see how it's done :)
  • From the freeCodeCamp exercise I'm missing some details:
    • I think your main tag is missing a corresponding id attribute of main (Point 1)
    • Same with your page heading h1, I think it is said that it should have an attribute id equals to title. (Point 2)
    • Review the code around your image. I think you could improve the semantics of it by using a figcaption tag for the description of it ("Dr. Norman Borlaug, third from the left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger") instead of a p, and maybe wrapping both the img and the figcaption tags inside a figure one? See this documentation to learn the best practices about this.
    • The exercise says that the figure tag should have an id attribute with this value: img-div. (Point 3)
    • The img inside your figure should have an id="image" (Point 4)
    • The figcaption inside your figure needs to have an attribute id with this value: img-caption. (Point 5)
    • You should have a general/big tag wrapping all the content about Dr. Borlaug life. Which one do you prefer? Maybe a section could work? Or a div? Which one you think is better? Also remember to put its attribute id as tribute-info(Point 6)
    • You should add an attribute id with the value tribute-link to your link a, and also give your element an attribute of target and set it to _blank in order for your link to open in a new tab. (Point 7)

You can forget now about the Points 8 and 9, as they are about CSS styling and you don't need to know those things yet, so don't worry about that.

So I think that's all there is for now! To wrap up: focus on improving your indentation and your semantics, working on all those small things. Please let us know if you have any trouble or doubts with any point. I understand there is a lot of new information and might be confusing!! Just keep working on it, bit by bit! 💪🏻 💪🏻

Once again, well done with the exercise. I'm sure that if you keep working on it, it will be perfect!! Happy coding!! 🧑🏻‍💻

simplify footer info

In the footer, I would just add "If you have time, you should read more about this..." and the

inside

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.