Company Home Page Challenge Project (Css,Flexbox)

madelinepdx · September 4, 2023, 10:15pm

Hello!

Oof this took me quite awhile but learned a lot.

I based my project on an existing website: Enso Co-Living

Code here: GitHub - madelinepdx/CODECADEMY-CHALLENGE-Enso: Challenge Project: Company Home Page with Flexbox

I’d love any feedback! There’s a lot of white space I’d like to improve but I needed to let this project go and move on with the course, hehe.

blakedavis7994827005 · September 6, 2023, 5:47pm

The page looks clean and has good use of colors, which don’t distract from the content. I like how the images enlarge a bit on :hover; if it were me, I would consider adding a bit of “box-shadow” on :hover to make the images pop a bit more. The only other suggestion I can give is to make the Team images the same size; if you are using Flexbox, then resizing all the images to the same aspect ratio will make this easy on you. Overall, awesome job.

blakedavis7994827005 · September 6, 2023, 5:54pm

Please take a look at my website. I tried a few new techniques, that I hope enhance the page. The main thing that bugs me is the horizontal photo gallery that I added; the scroll bar arrows skip straight to the end of the gallery. I believe this has something to do with the ‘scroll-snap’ attribute. If anyone has experience with this feature or knows why the scrollbar is behaving this way, please let me know; your help is appreciated.

Live site - My Flexbox Business Page

Github - Blake’s Github Page

katmoria · September 12, 2023, 2:40am

Here is the finished project! It runs a little slow on my computer and working on figuring out why but thought I’d post anyways!

Files: https://github.com/katmoria13/katmoria13.github.io/tree/main/Company%20Homepage

Live site: Company Homepage Project

Any constructive criticism on the code, layout, colors, literally anything is welcome and appreciated!

indiegamedev52552072 · September 12, 2023, 9:17am

Hey Guys,

I finished the challenge project last week. I know it isn’t perfect but, I hope it’s good enough for my first splash page.
It for a game environment art company.

This the code on Github

index.html

github.com

Debbiekn/username.github.io/blob/3258a04357b476af5f267f2a7579652131256ce0/flexbox-business-site-starting/index.html

<!DOCTYPE html>

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <link href="style.css" type="text.css" rel="stylesheet"/>
   
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link href="/Applications/Codecademy/flexbox-business-site-starting/resources/css/styles.css" rel="stylesheet">
    <title>Coding Career</title>

    <link href="https://fonts.googleapis.com/css2?family=Quintessential&display=swap" rel="stylesheet">
    
  </head>

  <body>
    <div class="logo">
      <img src="/Applications/Codecademy/flexbox-business-site-starting/NutsAboutGames_golden.png"/>
    </div>

This file has been truncated. show original

styles.css

github.com

Debbiekn/username.github.io/blob/3258a04357b476af5f267f2a7579652131256ce0/flexbox-business-site-starting/resources/css/styles.css

html {
    font-size: 18px;

}


figcaption {
    font-family: Helvetica, sans-serif;
    display: inline-flexbox;

    font-style: italic;
    font-size: 1em;
    text-align: center;
    color: rgb(154, 233, 243);
    text-shadow: 2px 2px #36013F;

}


h1 {

This file has been truncated. show original

Please can someone advise … how after you have set up your live website, how to change the website that is shown live.

I understand you can only have one website live at a time with Github free, but I can’t seem to change the website that is live to another…?

(I have added my folder with all the code in and images in for this project, to my one and only repository, and have tried many different things.

Please advise if anyone knows.

Thank you

pyjumper95864 · September 12, 2023, 10:59am

Hi,

I made a website for a fake cake company using everything I saw in the courses, You can see it here:

Live view: Cake Company

GitHub: GitHub - arelixdev/CompanyHomepakeTheCake

blakedavis7994827005 · September 12, 2023, 3:32pm

You can have more than one live site on the free version of Github; I have a live site for each of my repositories and haven’t paid a penny. For every project, simply create a new repository and deploy pages to a live site. In order to update your live site, you simply need to update/overwrite the files to the latest version. If you are using Visual Studio Code, you can Sync changes to your code to Github, by linking your account. The updates will even auto deploy to make changes to your live site.

indiegamedev52552072 · September 14, 2023, 11:45am

Hi Blake, thank you so much for replying…

I was aware of us being able to have more than 1 repository, but I thought only 1 could be live. ? Does all the repository’s still have to .github.io ? with your user name first or is it your user name plus something else…then .github.io…? ? Thank you again for letting me know though…

I can’t wait to share my work to gain some feed back…

blakedavis7994827005 · September 14, 2023, 3:51pm

Your tea-cosy deployment isn’t working because you have your index.html file inside of the folder “Tea Cosy” and it needs to be on the top level. Once you get that sorted. you are going to have issues with your CSS and images not displaying on your page because they need to be linked to a relative filepath.

In your index.html, you linked your stylesheet to “href=”/Applications/Codecademy/Tea Cozy/resources/css/style.css". That works on your computer, but Github doesn’t know about your Applications or Codecademy folder. So you have to link it relatively on Github. Once your index.html is on the top level, the relative path should be - href=“./resources/css/style.css”

I just happened to look at your Github as you were working on it, so I hope this helps.

indiegamedev52552072 · September 14, 2023, 6:49pm

Hey Blake, thank you so much for looking.

That’s what I was going to ask you this is my lay out of my folders…

this is the same lay out for each one…maybe that’s why it’s not working then - for example this is how tea cosy looks on google chrome - (i’ve shared this as a screen shot, as tomorrow morning I will remake another repository for tea cosy. then drag the files in and hopefully in the right order. (fingers crossed)

indiegamedev52552072 · September 19, 2023, 6:09pm

Hey Guys,

I just updated my company home page for a “made up” game environment art company.
I hope it’s good enough for my first splash page.

(its all my art work except for the unsplash business profiles at the bottom)
I’ve tried it on my mobile too, and the personal profiles are slightly off centre, and I think I needed to add slightly more padding-bottom, for the footer.

https://debbiekn.github.io/Flexbox-Business/

Any Feed back will be great…

Thank you

sylwestergo178431720 · September 20, 2023, 9:23pm

Hi
Here is my little effort:
https://sy-go.github.io/JET/

indiegamedev52552072 · September 22, 2023, 8:13pm

Hey This is looking good… I think you have a nice colour palette and your buttons interact well too, and clean smart layout having them at the top in a line with a clear and readable typeface.

The only thing not looking so good, is some images. You seem to have all the team images stretched out, and one of the airplane engines.

I had a problem with my images as well. when I tried mine out on mobile, my images all moved to the right, and when they were viewed on my desk top they seem far to big.

But yours is looking great so far …