This is a freeCodeCamp Responsive Web Design Project.
The overall aim was to acheive a Technical Documentation page, this was only focusing on using HTML, CSS and SASS to help me develop my front end skills further!
A deployed version of my website can be found here
This domain will allow you to access the Tribute Page website.
This website is for anyone who wants to get a brief insight to how to use SASS.
This website was to help practice my SCSS, HTML and CSS skills, This site has links to my social media sites where they can interact with me directly.
- I can see a main element with a corresponding id="main-doc", which contains the page's main content (technical documentation).
- Within the #main-doc element, I can see several section elements, each with a class of main-section. There should be a minimum of 5.
- The first element within each .main-section should be a header element which contains text that describes the topic of that section.
- Each section element with the class of main-section should also have an id that 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 corresponding id="JavaScript_and_Java").
- The .main-section elements should contain at least 10 p elements total (not each).
- The .main-section elements should contain at least 5 code elements total (not each).
- The .main-section elements should contain at least 5 li items total (not each).
- I can see a nav element with a corresponding id="navbar".
- The navbar element should contain one header element which contains text that describes the topic of the technical documentation.
- Additionally, the navbar should contain link (a) elements with the class of nav-link. There should be one for every element with the class main-section.
- The header element in the navbar must come before any link (a) elements in the navbar.
- Each element with the class of nav-link should 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 I click on a navbar element, the page should navigate to the corresponding section of the main-doc element (e.g. If I click on a nav-link element that contains the text "Hello world", the page navigates to a section element that has that id 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.
- My Technical Documentation page should use at least one media query.
- As a site owner I wanted to create and build a technical documentaion that holds key information regarding the program of SASS
As this was a brief project no wireframes were designed prior to building this site.
This section is a brief highlight of features that this site contains.
- Is placed on the left had side is fixed when the user scrolls on larger screens
- On mobile this moves with the main body so it does not take up the width / height of the screen size
- All link navigations have a hover element
- navigation links are redirected to the correct section id
- The main body is on the right hand side and is scrollable so the user can see the full content
- Each section's container are styled in it's own element so this is easier for the user to identify the different section within the documentation
- Font is kept simple and clean so it is easy to read
- Colour palette is clean and minimalistic so there is no distraction on the main page
- Contains the copyright text, this is on the left side of the page
- Contains the ‘LinkedIn’ and ‘GitHub’ navigation links on the right side of the page and evenly spaced
- All navigation links have a colour change when the user hover over the icon, this is so the user knows they are interactive and have a purpose
- The ‘LinkedIn’ and ‘GitHub’ icons opens a new window to the relevant page
- The project uses CSS to apply the custom styles to create the look of my site. The index.html file is linked directly to the main.css stylesheet
- The project uses Font Awesome icons for all navigation and social media links that feature in the header and footer of my site
Google Chrome Dev Tools
- For testing purposes for responsive design
- The project uses HTML to create the basic elements and content of my site
- The project uses SASS to apply the custom styles to create the look of my site. The index.html file is linked directly to the main.css stylesheet
- I used Visual Studio Code as the development environment to write the code for my website
- I've used Git as a version control system to regularly add and commit changes made to project in Visual Studio Code, before pushing them to GitHub.
- I've used GitHub as a remote repository to push and store the committed changes to my project from Git. I've also used GitHub pages to deploy my website in a live environment.
Browsers tested: Google Chrome, Mozilla Firefox & Opera. The devices used in this testing include Samsung S10 v.Android 10.
Expected: when hovering over 'LinkedIn' icon, the icon changes colour Testing: tested by hovering over item Result: icon changes colour
Expected: when clicking on the ‘LinkedIn’ icon takes the user to my LinkedIn page Testing: tested by clicking on the ‘LinkedIn’ icon Results: link takes user to LinkedIn
Expected: when hovering over 'GitHub' icon, the icon changes colour Testing: tested by hovering over item Result: icon changes colour
Expected: when clicking on the ‘GitHub’ icon takes the user to my GitHub repo page Testing: tested by clicking on the ‘GitHub’ icon Results: link takes user to GitHub
W3C testing completed for: index.html No issues were stated.
W3C testing completed for: styles.css No issues were stated.
The hosting platform that I've used for my project is GitHub Pages. To deploy my website to GitHub pages, I used the following steps:
- Loaded the terminal window in my visual studio code workspace
- Initialised Git using the Source Control in the control panel
- Files that have been amended are automatically listed in the ‘Source Control’ panel
- Add message in the ‘Message’ section, making sure the commits are clear and concise (re-checked previous commits for layout and what was fixed / still pending)
- Click the ‘tick’ icon which stored the files in visual studio code
- Click the ‘ellipsis’ icon and select the ‘push’ option
- This then push all files and commits to the main branch
- This will add the updated files into the ‘main branch’ option under the ‘GitHub pages’ section
- Ran several commits after testing was carried out throughout my project.
To run my code locally, users can download a local copy of my code to their desktop by completing the following steps:
- Go to my GitHub repository.
- Click on 'Clone or download'.
- Click on 'Download ZIP'.
- Once downloaded, extract the zip file's contents and run my website locally.
This website was a quick and fun site for me to practice more web development skills and styling .
Background image was styled and designed by me.
Created by Ellie Judge