Company Home Page Challenge Project (Css,Flexbox)

Guys, I can’t figure out how to lay out the project so that it has an address and opens the finished site. I can only throw off here a link to the repository in Github. And all files are opened separately. And the finished website does not open. Please tell me how to do it.

Hello,

Making a website from a github repo via github itself is called github pages. You can check out a quick start guide here - Quickstart for GitHub Pages - GitHub Docs

If you already have a repo setup, you just need to go into your repo, then Settings, then Pages & where it says Source, it will probably have “None” selected. Change “None” to “Main” or “Main Branch”, then hit save. Dont worry about the root folder icon appearing, leave it as it is.

You should now see a message saying “Your site is published at (Your github username & repo)”

Make a note or bookmark that page because that is now your website which can be accessed online.

One more thing to note, once you have done this & go back to the Code page of your repo, on the right of the page you will see

Environments 1
github-pages

This shows you that the repo content is connected to the github pages environment. Whenever you upload or make changes to your website & then push it to github, you will see that github-pages have (pending) next to it. This means it is uploading the changes you made via the push & you wont see the changes until the github-pages has (active) next to it.

It can take a bit of time for it to change so just bear that in mind in case you are wondering why your updates arent showing.

Hope this helps!

Hi! thank you so much!

This has definitely been the most HUMBLING project so far :rofl: After what felt like years I have finally finished my project! I think overall I spent 75% of my time working on the responsive design and only 25% on the actual page. I have discovered responsive design is my own personal nightmare but that’s exactly why I am determined to make it one of my strengths, rather than weaknesses!

Here’s the live demo
And here’s the code on GitHub

Please let me know what you think and if you have any recommendations for how I went about structuring the page. It’s definitely not the cleanest CSS by any means, but that’s another thing I want to work on and get better at. In its current form, the CSS is very bloated and probably redundant but to be completely honest I just wanted to move on with the career path lol.

Hello everyone,
I just finished this project. Well, it was definitly not as easy as i thought. I’m not satisfied with the design but at least it’s responsive.
i would love some feedback.
here’s my page : The FlexLoc (samar-al.github.io)

thank you all, and happy coding :slight_smile:

Hi James,

Your site looks really nice. Smooth layout and images in both full size and min-width. Your CSS is not anymore bulky than mine :slight_smile: . I think as we get experience, it will be more lean. One thing that might help the smoothness of the resizing is setting both min-widths and max-widths to your @media commands. I think that may be what is causing some sizing conflicts while resizing. Getting the code to play nice is definitely a challenge! Nice work!

Steve

PS. your .readme mentioned your page breaking when trying the Chrome dev tools after the build. If you are using Visual Studio Code, a must for extensions is the “live preview” extension. You can do all your resizing tests as you build it. Huge time saver.

Hi Samar,

Your site is looking good! You nailed the responsiveness. If I can add a small suggestion, that would be to add a bit of margin to your containers so you can see some of that beautiful background image on the left and right while resizing. I think that would give a nice feel you might be looking for. Nicely done!

Steve

1 Like

Hey there!

Here is my attempt!

Code and Live

Tried using Flexboxes as much as I could but ended up using Grids in some parts to have a cleaner and better sorted Style :sweat_smile:

Feedback is always appreciated! :slight_smile:

Hi Adam, I like your finished site. I take it by no you figured out the font embedding. I’m not a pro, but if you still need help, let me know. The easiest way is to use the copy and paste from Google fonts. I like the route of copying the “Latin” script of the font to imbed directly (which was covered in a prior exercise.) You can see it in action in my “responsive club” project I’m making for my son…

Live page

Code

Hope this helps!

Hi! Your site looks nice. Everything flows well. I struggled with mine a bit as well. I think next go around, I’ll us a “reset.css” style sheet to circumvent some of the issues. The course did not cover it, but browser conflicts are clearly an issue. I’m waiting for some content from my daughter for the company home page project, but am about to post the next project in the “responsive club website” challenge.

Hi,

I just (mostly) finished this project. I’ll be returning to it in the future to refine scaling on different devices, and to style it better, but I’m keen to know what you think at this stage.

Live Site

Code

Thanks!

Finally finished my flexbox company home page challenge. Flexbox was a struggle for me, but I’m so happy that I understand how to utilize it now. It is not the most beautiful looking, but I am enjoying this journey and the progress that I’ve made. Thanks Codecademy! :tada:

Happy coding everyone!
~Veronica

grin:
Hi, I’m just finished my Company home page with flexbox challenge, I’m happy with what i got, but after seeing some people’s finished projects I feel like there is quite a lot of things that i need to learn… and the design, I would consider it as okay, it’s not bad, but i can make it better… when it comes to design, my mind is like stops working from being creative… I need and desperately want to learn graphic design for web, but what i see on internet, you can’t learn web graphic design without learning the html and css first. I mean, that make sense, but I just want the fundamental of it, like color, balance, typography, hierarchy, etc. Oh well any way, this isn’t the place to tell story heheh, please judge my website, I will take any advises, critiques, and appraises. Oh yeah, almost forgot, i’m not including any media queries in this project because i will use it any way in the next challenge, and also i want this project to be done as soon as possible. :grin:

Live Website : Room Designer

Source Code : Room Designer Code

1 Like

Hello @design6726512087,
Your project looks pretty fine, and I really love how you play around with the CSS, Flexbox and media queries.
I suggest you add some JavaScript to your site and with that you will be able to add the side bar that appears when you website is visited on a mobile device, but at the moment when you visit it on a mobile device it reduces the menu text and makes it very tiny hence unreadable which creates a Bad User Experience.

Thanks so much for the reply! I figured out that it was a discrepancy in the way Visual Studio Code autofills file paths. It was adding a / where Github didn’t like. XD

I finally finished this project! I really struggled with flexbox so I hope this came out okay. I would really love some feedback if possible.

Here’s the live demo
Here’s the code on Github

Hi guys! done my project after 2 weeks busy with works and family - finally its done !---- its a little challenging and i cant really wrap around my head on flexbox and confusion over so many things , but with determination and some coffee finally today ive done it , its simple but responsive for mobile device or tab , btw credit for content that i got from fb friend regarding the artist Vergvotre / hopefully i did nothing here to infringe myself over copywrite hahaha , this guys can check the website here and git hub code as well ::::-1:

view code here :GitHub - detkno90/detkno90.github.io-phantom-project: sample project for codeacademy

view Github Pages: PhantomArt Project

Thanks A lot to some guys here for inspiration !

Feel Free to comment anything after view - would love some feedback !!

Hi all!

After many months of not practicing, I decided to take complete this project.
Please please please!! All recommendations and suggestions / corrections / opinions welcome!

I forgot how to work with flexbox and responsive design, so there are many bugs / possible optimizations. But I wanted to create this page so that I could then make it better with help of all of you :slight_smile:

https://charly-wolf.github.io/company-home-page/

Hope to read you :slight_smile:

2 Likes

preety sleek ! nice work !

1 Like

Thank you! Although when accessed on my phone, it does not look so nice xD and I am still trying to figure out how to fix it.

1 Like