fac-11 / week1-baja Goto Github PK
View Code? Open in Web Editor NEWWeek 1 project to build a portfolio website
Home Page: https://fac-11.github.io/week1-BAJA/.
Week 1 project to build a portfolio website
Home Page: https://fac-11.github.io/week1-BAJA/.
for clients with JavaScript disabled in their browser, for security reasons, should be able to visit the site and get a similar experience to viewing to a modern browser with JavaScript enabled
๐ Hey pals.
Generally it's nice if your why/what/how is a little bit more specific. I know for this project you were given very specific user stories so it's harder to have something unique, but your why
could be something like:
We have built a portfolio website to showcase ourselves and our skills to potential clients!
Your current one of
To build a web development team website
isn't really a why
it more just describes what
you've done.
I know it seems a minor thing but good documentation and stuff on your README.md is really helpful, especially in guiding your presentations.
The black lines of the background and the dark grey interfere with the black text when scrolling, harming visibility.
Be able to easily view the site when browsing on my mobile, tablet or desktop.
understand the sites content easily on whatever device is used.
Some of the users e.g. 'as a visually-impaired client' are squashed into the previous user stories. This could be clarified, perhaps with bullet-points.
Indentation of html, css and javascript files are inconsistent
See example: https://codepen.io/oknoblich/pen/tfjFl
Include:
On relatively wide viewports, this gets squashed up into the form.
index.html
style.css
refers to https://github.com/FAC-11/week1-BAJA/blob/master/index.html#L42-L59
When running the Outline extention, the 'who we are', 'technologies', and 'mission' buttons seem to be untitled articles . Maybe use tags if possible?
Be able to click on a navigation link and a corresponding section be made visible in the browser window on the same page
Allow users to quickly navigate around the site without having to wait for new pages to be loaded.
Different nav bar for mobile and desktop
Generally it is considered good practice to only style on classes, a few times in your CSS you style on ids
and html tags.
Check out this article for a good guide to CSS code quality.
Ordering of links is incorrect
On mobile, when navbar is clicked open, hovering on links makes a grey overlay appear. This grey overlay partially obscures the burger button and looks ugly! Ugliness needs to be fixed with a nice design solution.
Nitpicking but a separate folder containing the images for your site might make it easier to look at the repo and see straight away what's what :)
-> not centered
-> some boxes larger
I'm mostly referring to #44 in this one, but if you solve an issue then remember to close it!
You can do so by putting fix #<your-issue-number-here>
in your pull request, when that PR is merged into master it will automatically close the linked issue.
Removes having to manually click through to close issues which is dead nice ๐
less of a code thing and more of a User Experience thing, but generally in an "About Us" section I would expect there to be some info without having to click through.
It would probably be a little nicer if "Who We Are" was selected as standard, and then the other tabs were selectable, the standard one of "BAJA" doesn't add any new information or anything, whereas having one of the tabs pre-selected does.
A blind client should be able to easily understand how to navigate the site after screen readers read the content of the site
form submit goes to page showing error:
"Unable to submit form
Make sure you open this page through a web server, Formspree will not work in pages browsed as HTML files. Also make sure that you're posting to https://formspree.io/[email protected].
For geeks: could not find the "Referrer" header."
contact form should pass accessibility audit, currently does not.
Providing a descriptive text label lets a user distinguish the link from links in the Web page that lead to other destinations and helps the user determine whether to follow the link. In some assistive technologies the aria-label value will show in the list of links instead of the actual link text.
Resources: https://www.w3.org/WAI/GL/wiki/Using_aria-label_for_link_purpose
-> Toggle between content on 'About' section
-> callable number from mobile devices
-> working form for desktop and mobile
-> burger menu without JS for mobile
By filling out and submitting a form by providing my name, email and message information.
We must have sufficient information to contact clients afterward submitting form.
Is the id in the correct place? Should it be in section
element?
<section class="pageHeight">
<h3> About Us </h3>
<div id="about">
Text should have a contrast ratio of at least 4.5
https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_color_01
In developer tools, under the 'elements' tab if you look at accessibility properties while the element is selected, it will recommend a similar colour which provides high enough contrast and let you easily try out the recommendation in chrome.
This only comes up as an issue when javascript is enabled! Can't see why :(
when the team is loaded as 2x2, the top of Aisha's profile doesn't line up with Bart - I think it's because of her longer text - to fix, it might be about sizing the height
of the team-container
class rather than the padding
(which might need some extra work to deal with text-overflow
Explain:
Have easy to read and understand the text on your site:
reference https://github.com/FAC-11/week1-BAJA/blob/master/index.html#L105-L108
you may want to add required
in your and <textarea> elements to ensure a form cannot be submitted without validation.
Articles in 'about us' section have no titles
Should be able to quickly navigate to the areas of the site
Tabs in 'about us' disappear on small screens (< about 350px)
Include description of what we have to offer
The edge of the box comes out past the end of the tabs.
More padding around the text, and spaces between paragraphs would make it easier to read.
Also, a slightly smaller font might be helpful, especially on narrower viewports.
You might also want to consider editing down your text to streamline it.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.