Below are a selection of personal coding projects undertaken for the purpose of skill enhancement and practice in the domains of HTML, CSS, and JavaScript. Most of them were performed as capstone projects for the following courses:
🌱 Fellow learners are welcome to use these projects as a base for their own capstone projects.
👋🏻 Feel free to consult my freeCodeCamp profile and LinkedIn page to see my credentials and connect.
- 1 - Survey Form
- 2 - Tribute Page
- 3 - Documentation Page
- 4 - Product Page
- 5 - Portfolio Page (attention, my real one is here www.olgaalexeeva.com)
- License
This is a simple survey form meant to collect data from users. By the design of the Responsive Web Design course, the learner should construct a survey form that is functionally similar to the example provided here. The following user stories should have been fulfilled:
- You should have a page title in an
h1element with anidof title - You should have a short explanation in a
pelement with anidof description - You should have a
formelement with anidof survey-form - Inside the
formelement, you are required to enter your name in aninputfield that has anidof name and a type of text - Inside the
formelement, you are required to enter your email in aninputfield that has anidof email - If you enter an email that is not formatted correctly, you will see an HTML5 validation error
- Inside the
form, you can enter a number in aninputfield that has anidof number - The number input should not accept non-numbers, either by preventing you from typing them or by showing an HTML5 validation error (depending on your browser)
- If you enter numbers outside the range of the number input, which are defined by the
minandmaxattributes, you will see an HTML5 validation error - For the name, email, and number
inputfields, you can see corresponding label elements in the form, that describe the purpose of each field with the following ids:id="name-label",id="email-label", andid="number-label" - For the name, email, and number
inputfields, you can see placeholder text that gives a description or instructions for each field - Inside the
formelement, you should have a select dropdown element with anidof dropdown and at least two options to choose from - Inside the
formelement, you can select an option from a group of at least two radio buttons that are grouped using thenameattribute - Inside the
formelement, you can select several fields from a series of checkboxes, each of which must have avalueattribute - Inside the
formelement, you are presented with a textarea for additional comments - Inside the
formelement, you are presented with a button withidof submit to submit all the inputs
Background image for the project is provided by Ugur Akdemir on Unsplash
This is a simple tribute page meant to give information on a famous person. By the design of the Responsive Web Design course, the learner should construct a survey form that is functionally similar to the example provided here. The following user stories should have been fulfilled:
- Your tribute page should have a main element with a corresponding
idof main, which contains all other elements - You should see an element with an
idof title, which contains a string (i.e. text), that describes the subject of the tribute page (e.g. "Dr. Norman Borlaug") - You should see either a
figureor adivelement with anidof img-div - Within the
#img-divelement, you should see animgelement with a correspondingid="image" - Within the
#img-divelement, you should see an element with a correspondingid="img-caption"that contains textual content describing the image shown in#img-div - You should see an element with a corresponding
id="tribute-info", which contains textual content describing the subject of the tribute page - You 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. You must give your element an attribute oftargetand set it to_blankin order for your link to open in a new tab - Your
#imageshould usemax-widthandheightproperties to resize responsively, relative to the width of its parent element, without exceeding its original size - Your
imgelement should be centered within its parent element
The photo for the project is provided by this website.
This is a simple technical documentation page meant to give information on a certain syntax or functionality. By the design of the Responsive Web Design course, the learner should construct a technical documentation page that is functionally similar to the example provided here. The following user stories should have been fulfilled:
- You can see a
mainelement with a correspondingid="main-doc", which contains the page's main content (technical documentation) - Within the
#main-docelement, you can see several section elements, each with a class ofmain-section. There should be a minimum of five - The first element within each
.main-sectionshould be aheaderelement, which contains text that describes the topic of that section. - Each section element with the class of
main-sectionshould also have anidthat corresponds with the text of each header contained within it. Any spaces should be replaced with underscores (e.g. The section that contains the header "JavaScript and Java" should have a correspondingid="JavaScript_and_Java") - The
.main-sectionelements should contain at least tenpelements total (not each) - The
.main-sectionelements should contain at least fivecodeelements total (not each) - The
.main-sectionelements should contain at least fiveliitems total (not each) - You can see a
navelement with a correspondingid="navbar" - The
navbarelement should contain one header element which contains text that describes the topic of the technical documentation - Additionally, the
navbarshould containlink (a)elements with the class ofnav-link. There should be one for every element with the classmain-section - The
headerelement in the#navbarmust come before anylink (a)elements in the navbar - Each element with the class of
nav-linkshould contain text that corresponds to the header text within each section (e.g. if you have a "Hello world" section/header, your navbar should have an element which contains the text "Hello world") - When you click on a
navbarelement, the page should navigate to the corresponding section of the#main-docelement (e.g. If you click on a.nav-linkelement that contains the text "Hello world", the page navigates to a section element with thatid, and contains the corresponding header) - On regular sized devices (laptops, desktops), the element with
id="navbar"should be shown on the left side of the screen and should always be visible to the user - Your technical documentation should use at least one media query
The text for the project is provided by this website.
This is a simple product page meant to give information on a certain set of products inside a brand. By the design of the Responsive Web Design course, the learner should construct a technical documentation page that is functionally similar to the example provided here. The following user stories should have been fulfilled:
- Your product landing page should have a header element with a corresponding
id="header" - You can see an image within the header element with a corresponding
id="header-img"(A logo would make a good image here) - Within the
#headerelement, you can see anavelement with a corresponding id="nav-bar" - You can see at least three clickable elements inside the
navelement, each with the classnav-link - When you click a
.nav-linkbutton in thenavelement, you are taken to the corresponding section of the landing page - You can watch an embedded product video with
id="video" - Your landing page has a form element with a corresponding
id="form" - Within the form, there is an
inputfield withid="email"where you can enter an email address - The
#emailinput field should have placeholder text to let users know what the field is for - The
#emailinput field uses HTML5 validation to confirm that the entered text is an email address - Within the form, there is a submit
inputwith a correspondingid="submit" - When you click the
#submitelement, the email is submitted to a static page (use this mock URL: https://www.freecodecamp.com/email-submit) - The
navbarshould always be at the top of theviewport - Your product landing page should have at least one media query
- Your product landing page should utilize CSS flexbox at least once
The video and the image for the project are taken from Merchant of Venice promo materials.
This is a simple portfolio page meant to give information about me as an expert. Attention: this is not a real portfolio. My real one is here: www.olgaalexeeva.com. By the design of the Responsive Web Design course, the learner should construct a portfolio page that is functionally similar to the example provided here. The following user stories should have been fulfilled:
- Your portfolio should have a welcome section with an
idof welcome-section - The welcome section should have an
h1element that contains text - Your portfolio should have a projects section with an
idof projects - The projects section should contain at least one element with a class of
project-tileto hold a project - The projects section should contain at least one link to a project
- Your portfolio should have a
navbarwith anidof navbar - The navbar should contain at least one link that you can click on to navigate to different sections of the page
- Your portfolio should have a link with an
idof profile-link, which opens your GitHub or freeCodeCamp profile in a new tab - Your portfolio should have at least one media query
- The height of the welcome section should be equal to the height of the viewport
- The navbar should always be at the top of the viewport
All the texts are taken from my real portfolio: www.olgaalexeeva.com. GitHub icon is provided by Github icons created by Pixel Buddha - Flaticon.
Copyright (c) 2023 Olga Alexeeva
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.