Giter VIP home page Giter VIP logo

osky's Introduction

OSky

A portfolio about OSky team ( Moutaz-Sama-Hadeel-Fidaa ). Why ? We all need an exciting introduction about our personality and an exciting sentence about the nature of our work and the most modern way to highlight the work of each programmer and to demonstrate the effective characters is a simple site with introduction to the group or company.

What ?

This site is a single page in 4 sections, the main section contains a list of links to the other sections and the name of the company or group as well as an interesting sentence about the group, and the date of issuance of this site.  The second section contains the user scenario with a paragraph containing information about the nature of the work presented by the team, The third section contains cards representing the image of each programmer and when the reference to each card shows some information about the programmer name, specialty, and a set of links to sites including the Github, the Codewars and the LinkedIn, Section IV contains a form to allow anyone access to the team by sending a message, The end bar containing copyright and links to some of the policies used in our country.

How ?

We started to meet and then we planned and determined the requirements for this site and we divided the page into several sections and distributed to the team.

Team Members:

  • Hadeel Slamin
  • Fidaa Hersh
  • Moutaz Mohtasb
  • Sama Amro

OSky Website Link:

https://fack1.github.io/OSky/

osky's People

Contributors

almutazbeallah avatar hadeel-salamin avatar samaamro20 avatar

Watchers

 avatar

osky's Issues

Issues

Nice work on raising issues to do some work, and on bugs you noticed.

One thing I would do though, is once the task/problem raised in the issue has been done, then the person who opened the issue should close it

Consistent Font?

Your site has two different font's, which can look a bit odd sometimes.

I think looking at the code, you never set a global font, so most of the text just uses the default browser font - you should always specify the font, probably in the body css class

Responsiveness

Great that you guys have some really nice responsive stuff going on. However at the moment the site still looks a bit weird on mobiles:

screen shot 2018-11-01 at 09 09 17

The problem is because you need a meta tag in your html to tell the browser to check for the viewing device screen size - read more here

If you add the meta tag, your site becomes more responsive.

Line 13 (Repeating a line of code)+(Wrong Position)

OSky/oSky.html

Line 13 in 8dc86be

<link rel="stylesheet" href="oSky.css">

You repeated the line of code that's linking to the Osky.css file, and it's considered bad practice to repeat lines of code. Also, you have used it in the body-header which is wrong because everything in the body is displayed to the user and all links and relevant info for the browser should be placed in the head only.

Filenames

Rather than have your files named oSky.[ext] best practice is to stick to names that describe the content of the files somewhat - index.html is always known as the file that will store the main content. Then you can have either a styles.css to store the styles, or maybe an index.css. Then if you have other specific css files for something it could be animations.css or something. For JS, again, index.js is good, or else a name saying what the code does

flak

  • i didn't find adressing each section a favorable thing, while they have the same thing in the header
  • instead of using images for contact section they could use https://fontawesome.com/icons?d=gallery for sites symbols
  • & i liked the map idea and their represented pic

Line 24 (Using <span> in a wrong context)

OSky/oSky.html

Line 24 in 8dc86be

<span>Welacome In Our World.</span>

In this line you are using the tag to nest text instead of using semantic HTML and using the appropriate tag for it. e.g [p] if it's a paragraph, [h2] if it's a sub-heading, [h3] if it's a sub-sub-heading and so on and so forth. Semantic HTML is important for accessibility and SEO since screenreaders and search engines rely heavily on how an html document is structured.

Edited To Add: is usually used to target a certain piece of text in another tag. e.g:

[p]Hello World, How are you today?[/p]

If you only wanna target the word "are" to style it for example, you'd do enclose the word "are" in span tags, give it an id and target it.

Line 16 (Use external CSS instead of inline CSS)

OSky/oSky.html

Line 16 in 8dc86be

<img height="30px" width="40px" src="http://www.clker.com/cliparts/F/m/7/6/7/D/akiko-olive-wreath-md.png">

On line 16, inside the you are using inline css instead of external css, which is considered bad practice. Simply because it's hard to maintain and edit. Consider this: if the client wants any future changes it would be too much of a hassle to find and edit inline css for each element especially in a huge project.

responsability

In these lines, when the screen width getting narrow the text still with the same size for the wide screen.

OSky/oSky.html

Lines 23 to 32 in 8dc86be

<h1>O-Sky Team </h1>
<span>Welacome In Our World.</span>
<h2>
<!-- <a href="" class="typewrite" data-period="2000" data-type='[ "Hi, We are O-Sky Team.","This Website Start in 2018 by Team in Palestine / Hebron.", "We are not the only ones, but we are always the butest, now Welacome In Our World."]'>
<span class="wrap"></span>
</a> -->
<a href="#">Hi, We are O-Sky Team.This Website Start in 2018 in Palestine / Hebron.
</a>
<br>
</h2>

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.