Company Home Page Challenge Project (Css,Flexbox)

@pysolver65252 I appreciate the feedback. I found this on a website called pixabay. They have a lot of royalty free images.

This is awesome @rielgbrl! I haven’t incorporated jQuery for interaction yet so this was cool to see!

My feedback is similar to what @daniellabrador mentioned:

  • Perhaps use the Google Chrome Developer Tools to see the natural break points for each container of your website. Ex. When the window width = 802PX, the c and o in “Company” is cut off. Consider the media query to be @media only screen and (max-width: 1075px) and unique for each container versus one for the entire website (currently 800px) since containers have different breaking points.

  • Changing the padding/margin values for different width sizes would remove the negative space in the mission container and the team container.

Great job on including a ReadMe file! It could be helpful to add code snippets to explain how you structured your elements’ classes and styling (ex. by section or perhaps universal styles have their own classes and elements use multiple classes together). That would also provide some insight into how you tackled the project.

Happy coding!!! :upside_down_face:

1 Like

Hi @daniellabrador :wave:t5:

You did a great job with adapting the content to varying screen sizes!

I don’t think the way you created your CSS selectors is an inefficient technique, it’s very easy to follow. However, I will note that because you’ve structured your CSS rules based on the descendant combinators, removing an element or adding an element may throw your styling out of whack versus have differentiated classes or ids. For example you have the style rule below for this button element:

<div id="popular-feature-box" class="feature-box max-width">
     <div class="box">
          <div>
              <button>Socks</button>
.feature-box .box div button {
    position:relative;
    font-family: Adihaus, Helvetica, sans-serif;
    font-weight: bold;
    width: 7rem;
    font-size: 1.25rem;
    padding: .75rem;
    border: 0px;
    cursor: pointer;
    color: white;
    background-color: #DD0426;
}

Instead of having a rule that depends on descendant combinators, you can have a class/id for the element and use the same properties. Like the below example for <button class="red-rect-button>:

.red-rect-button {
    position:relative;
    font-family: Adihaus, Helvetica, sans-serif;
    CONT.
}

In then makes the element it’s own container/style so if you wanted to use the same style outside of the feature box context, you can do so without needing the divs that come before it. Then if your design needed to change so that the Shop buttons are to match the red feature ones, you’d just need to change the class of those buttons.

Hope that’s helpful but take it with a grain of salt, I’m learning too! Happy coding!! :upside_down_face:

Hello @jasbneal Thank you for your feedback and I appreciate that :smiley:. You too, your site are lit, I like it so much :star_struck:

1 Like

Hi everyone, please check my project )
Tell me please your opinion, it will help me in my learning.
Here is Code Repository : GitHub - VillainAntagonist/corginication: Website for Codecademy courses.
Here is WebSite : Corginication

1 Like

Hi, everyone, this is my solution for this assignment. I’m still a little insecure concerning Flexbox, so any constructive feedback (positive or negative) would be greatly appreciated. Let me know if you’ve got any thoughts!

GitHub repository: GitHub - RuanCSC/Happiest-Days
Website: https://ruancsc.github.io/Happiest-Days/

Just now uploaded my Flexbox page project to GitHub. I am GoddessLinda on GitHub. I am definitely not yet very good at GitHub. Please tell me where my Flex code has gone wrong or right… thanks! lindajoyfulcoder

Hi everyone! This is my website for a fictional company:
repository - https://github.com/pepegrr/cloudnine
live - Cloud Nine Relax & Retreat

It seems to be a bit slow, so give it some time to load :smiley:
I used Flexbox for products and staff sections and grid for contacts + it’s kind of responsive (however, background-attachment: fixed; doesn’t work on my iPhone, unfortunately).
I’d actually really appreciate if someone gave me some comments on my code (I want to know if it’s too windy or overthought, especially with Flexbox), as I’m doing it mostly by intuition rather than actual knowledge (I promise I get better!).

1 Like

Hello Katy I really like your site and your code, it is easily readable.
I had trouble with the sizing of images but thanks to you I learn the Figure HTML tag which is really handy.

1 Like

Hi, thank you! Good to hear you learned something new :slight_smile:

My web page for this project:
https://n-ii-ma.github.io/Fashion-Planet/

Hi Everyone,

Following my challenge fulfilled… hope so!

This is about a company build in the past and projected to the future; now as part of Pfizer Inc.

https://fjorwb.github.io/BusinessSite/

Any comments will be welcomed

Hello,

This is my work on this project- a website for an imaginary company that offers coworking space.
It took me quite some time to put the website together. I struggled to make it responsive. Some of the elements not as responsive as i would like them to be. Would love to hear some feedback/suggestion.

Link to the website: Co.Nest-Coworking Space

Link to the code: https://github.com/monalily/conest

Thank you!

Cheers,
M

Hi everyone, here’s my code for this exercise. It would help a lot if I could get some feedback.

Live site: The Studio
Link to repo: https://github.com/kevint98/company_website_flexbox

Hello, everyone!
This is my project. I was inspired by the puzzles which my friends made. I didn’t show it to them though because I’m embarassed by my awful design :flushed:
The code https://github.com/makarovangelika/puzzles
The page Pickbird

Looks awesome! Makes mine look pretty basic :grin: