There are many great websites & resources to learn web development. Among theme, FreeCodeCamp is undoubtedly the best. If readers are new to web development & want to learn it from scratch then most of the self-taught reputed developers will recommend FCC.
There have lots of projects to complete among them "Tribute Page" is popular because it is the first all to one HTML&CSS project. In this article, I will show how to make this project by providing the code. First, let's know about the problem.
Problem:-
Responsive Web Design Projects - Build a Tribute Page
Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/zNqgVx.Fulfill the below user stories and get all of the tests to pass. Give it your own personal style.
You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!
User Story #1: My tribute page should have an element with a corresponding
id="main", which contains all other elements.User Story #2: I should see an element with a corresponding
id="title", which contains a string (i.e. text) that describes the subject of the tribute page (e.g. "Dr. Norman Borlaug").User Story #3: I should see a
div element with a corresponding id="img-div".User Story #4: Within the
img-div element, I should see an img element with a corresponding id="image".User Story #5: Within the
img-div element, I should see an element with a corresponding id="img-caption" that contains textual content describing the image shown in img-div.User Story #6: I should see an element with a corresponding
id="tribute-info", which contains textual content describing the subject of the tribute page.User Story #7: I should see an
a element with a corresponding id="tribute-link",
which links to an outside site that contains additional information
about the subject of the tribute page. HINT: You must give your element
an attribute of target and set it to _blank in order for your link to open in a new tab (i.e. target="_blank").User Story #8: The
img element should responsively resize, relative to the width of its parent element, without exceeding its original size.User Story #9: The
img element should be centered within its parent element.You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like:
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js.Here a tribute page I have created about great Srinivasa Ramanujan.
Srinivasa Ramanujan (FRS)
The Man Who Knew Infinity ∞
Srinivasa Ramanujan FRS was an Indian mathematician who lived during the British Rule in India. Though he had almost no formal training in pure mathematics, he made substantial contributions to mathematical
analysis, number theory, infinite series, and continued fractions, including solutions to mathematical problems then considered unsolvable.
Here's a time line of Ramanujan's life:
- 1887 - Ramanujan was born into a Tamil Brahmin Iyengar family in Erode, Madras Presidency (now Tamil Nadu, India), at the residence of his maternal grandparents.
- 1892 - Ramanujan was enrolled at the local school. After his maternal grandfather lost his job as a court official in Kanchipuram, Ramanujan and his mother moved back to Kumbakonam and he was enrolled in Kangayan Primary Schoo.
- 1902 - As a child prodigy at the age of 14 Ramanujan received merit certificates and academic awards that continued throughout his school caree. He completed mathematical exams in half the allotted time, and showed a familiarity with geometry and infinite series. Ramanujan was shown how to solve cubic equations where he developed his own method to solve the quartic.
- 1910 - After a meeting between the 23-year-old Ramanujan and the founder of the Indian Mathematical Society, V. Ramaswamy Aiyer, Ramanujan began to get recognition in Madras's mathematical circles, leading to his inclusion as a researcher at the University of Madras.
- 1912 - Ramanujan had his work published in the Journal of the Indian Mathematical Society, where he elaborate his work on elliptic integrals, hypergeometric series, divergent series & other series as well. (Know more)
- 1913 - Narayana Iyer, Ramachandra Rao and E. W. Middlemast tried to present Ramanujan's work to British mathematicians. The first two professors, H. F. Baker and E. W. Hobson, returned Ramanujan's papers without comment.On 16 January 1913 Ramanujan wrote to G. H. Hardy.On 8 February 1913 Hardy wrote Ramanujan a letter expressing interest in his work, adding that it was "essential that I should see proofs of some of your assertions".
- 1914 - Most of British mathematician rejected his work as there was no prove, but Dr. Hardy & Littlewood encourage him and started his life as mathematician next to Dr. Hardy in Cambridge.
- 1916 - After his grate sruggle for recognition he was able to elected to the London Mathematical Society by submitting an 50 page long unusual research paper.
- 1917 - On 6 December he was elected a Fellow of the Royal Society.
- 1918 - He was elected "for his investigation in Elliptic functions and the Theory of Numbers." On 13 October 1918 he was the first Indian to be elected a Fellow of Trinity College.
- 1919 - At the age of 32 he died of plagued.
- Achivements - Ramanujan's contributuion on infinite series is unimaginable. His books where kept in museum where his works are yet to be understand. All of his work gave a tremendous value to mathematics. Some of recent scientist belives that his equations could solve the mystery of black hole. Though it is hypothetical.
"Every positive integer was one of [Ramanujan's] personal friends."
In the above project, all the user stories have been embedded. Though Some properties and work are not visible here. Readers can visit my codepen link to preview it.
You can get the sample code of this project on my Github account.
Comments
Post a Comment