Responsive web design principles and CSS Flexbox questions, resources, and discussion (January. 2018 Cohort)

1

INFO

Here’s the January 2018 fCC cohort information and schedule.

This topic is for members of the January 2018 fCC cohort to share information and learn more about responsive web design principles and CSS Flexbox. Click on the cohort link if you’d like to join.

Reply here with your questions, comments, and additional resources regarding the Responsive Web Design Principles and CSS Flexbox sections.

DEADLINE: 2018-01-19 23:59 PST

2018-01-20 04:59 UTC

RESOURCES

MEMBERS

Members – bookmark this topic and make sure you’re “watching” the topic so you can participate in the discussion.

watching

Note: You can edit this post, like a wiki, to help keep things organized and add resources and other information you want to share with others.

5 Likes
2

Members

@camper, @mohamedeliwa, @Fixy250185, @firuzshoev, @mberkland, @Wahe3bru, @TammyKnox, @slamoureux, @zaynaib, @angelinalblyth, @facundocorradini, @debu2code, @sasikumar07, @johnhannahdev, @nasef123

1 Like
3

Members continued…

@ConnectExtend, @callumshaw, @PerkyPrince, @catherinewoodward, @Gildara, @dmac0505, @corneerasmus, @LawGaming, @lbeth, @DGC75, @Vanic6, @asmarino, @HaiCia, @arhillis, @pavankrcr

2 Likes
4

Members continued…

@stufinn, @5Lions, @Jinxlaw, @yoizfefisch, @weindor, @shivendraDave, @deedee, @TiwaunP, @npalopoli, @kindaintellectual, @nicandromts, @MMahendra001, @basantos

1 Like
5

Here are my thoughts on the challenges I completed today:

  • I think this advice from the Introduction to Responsive Web Design Challenges challenge is helpful:

    In general, design the page’s CSS to your target audience. If you expect most of your traffic to be from mobile users, take a ‘mobile-first’ approach. Then add conditional rules for larger screen sizes. If your visitors are desktop users, then design for larger screens with conditional rules for smaller sizes.

    For most my of my projects, and I’m guessing for most general purpose websites and web applications, most visits will be coming from mobile users so a ‘mobile-first’ approach is likely best. However, that may not always be the case, depending on the purpose of the site.

  • In terms of the Responsive Web Design Principles: Create a Media Query challenge, I was taught to write media queries like this:

    @media only screen (min-width: 768px) {
    ... various selectors ...
}

    The challenge suggests to do it this way:

    @media (min-width: 768px) {
    ... various selectors ...
}

    I found this discussion on Stack Overflow which explains the only operator and why one might want to use it.

    Also, here’s more information about the @media CSS at-rule in general.

  • I tend to use px and rem when sizing things in CSS, whether that’s an image or text. I usually work with relatively simple projects though, so this hasn’t been a problem. The CSS Font Sizing: Pixels vs Em vs Rem vs Percent vs Viewport Units article outlines the different sizing units and has some good links for further research at the end.

5 Likes
6

Starting to fall behind in this due to work being hectic at the moment, I have already done all the challenges however for each post I was wanting to go over each to try and firm up everything. Hoping to nuckle down tonight after the gym and get some coding done. I have been using the Solo app in my morning commute to reinforce some html and CSS coding which isnt the greatest but I am at least still doing some sort of coding work each day. sigh

2 Likes
7

do your letters delete as you type in beta fcc? I put the cursor in front of something and start typing. it deletes the next.

1 Like
8

I had some problems with entering answers for beta challenges but not the same as yours. Some of the challenges would not accept any answers that I entered. After several attempts, I copy pasted the sample code from the lesson and changed it to meet the requirements. I was able to pass the tests. It happened for very few challenges though.

9

Been prepping for an interview tomorrow and will be swatting tomorrow morning as well.
A day and a half down :joy:

Might get back to it tomorrow evening.
Just got to keep chipping away.

10

I’ve had some issues but if I refresh the page it resolves.
Also happens mostly when I have a smaller browser.
Full screen also helped me.

11

Would you recommend doing a smaller than 768px.
So Screen / Tablet /Mobile phone?

12

@johnhannahdev I usually start with the mobile view for viewports between 320px and 768px wide. Then I’ll make a tablet view for viewports between 768px and 1024px (min-width: 768px). Then the view for larger viewports (min-width: 1024px). I test my design on as many viewport sizes as possible and add additional media queries as needed.

I’m not an expert. This is the way I’ve learned up to this point.

2 Likes
13

I finished the CSS Flexbox section today. When I initially learned CSS Flexbox, I spent hours playing around with code until I understood as much of it as I could. I also spent about 10 days (one section each day so I could retain the information better) on Flexbox Zombies and Flexbox Froggy. The freeCodeCamp CSS Flexbox section is comprehensive and well-written, but I think one will need to supplement their learning with these and other materials before really being able to use CSS Flexbox.

For others that have already learned CSS Flexbox, what other resources helped you understand CSS Flexbox better?

1 Like
14

Just finished the CSS section and that is a lot of info to take in. I think Ill need to look at other sources to better understand it all.

2 Likes
15

Ok thanks. I’ll give that a go and see how it works out.
That makes more sense to me than just doing a tablet size only.

16

I think there are some css links in the forum, at the top.
I came across this. CSS Reference
It looks good.
The guy is also selling a book but the site has loads of info and example code.

18

I just finished the flexbox lessons and have these 2 corrections to make:

  1. In the CSS Flexbox: Align Elements Using the justify-content Property lesson, space-between is explained as follows:

aligns items to the center of the main axis, with extra space placed between the items.

I think this is not a correct explanation since the items are aligned to the edges rather than the center in a situation where there is an even number of items. It happens to be in a situation where there is an odd number of items that the middle item will be aligned to the center.

  1. CSS Flexbox: Use the flex Shorthand Property lesson, it states:

Give #box-1 the values so its flex-grow is 2, its flex-shrink is 2, and its flex-basis is 150px. Give #box-2 the values so its flex-grow is 1, its flex-shrink is 1, and its flex-basis is 150px.
These values will cause #box-1 to be twice the size of #box-2 when the container is greater than 300px and half the size of #box-2 when the container is less than 300px.

This is incorrect since #box-1 will only grow and shrink at twice the rate. I found this forum post discussing this mistake.

Also, I cannot figure out the goal of setting display: flex on the h3 & h4 elements in the tweet embed examples.

1 Like
19

not the good link budy.
I would encourage you guys to check grid too:

2 Likes
20

yeah… This is how it’s look like when you are in hurry in the morning…:frowning: anyway offer is finished now.

21

Im so happy that I got my flexbox working in my product landing project I could do a little happy dance at my desk in work :slight_smile:

2 Likes