Ugh check boxes

Ahh I see. I will stick to CodePen then. I did realize that the tests are directly tied to CodePen so I wasn’t planning on changing the pen for these tests. I was just curious as to the user ability between the two.

Thanks for your reply I appreciate it.

Probably last reply for tonight as it’s getting late. That’s awesome! I’m glad to hear you were able to help someone in return.

I am an introverted techie type and I too find that I get stuck in my own shell at times.

I’d much rather invest time here on things like this than spend all day on twitter or whatever arguing about politics and the like with a million differing opinions. At least here things are mostly very objective. The code works or it doesn’t. Style… that’s a different issue.

I think this thread is a perfect example of how an exchange on here is supposed to work. I see a lot of posts like “please I cannot find the cat pic, please tell me where to put the cat pic in alt, please just tell me the answer so I can move on”. :rofl:

I think FCC nailed it with the forums and their learn by doing and collaborating approach. As (unless you are a freelance lone wolf type) that is how you would be working in the real world, whether through meetings or github Pull Requests/code review, emails, Slack chats, etc.

If only more people would see the value of the forums and use it wisely and as intended (a lot do).

Have a good night and a great week!

Oh man the alt topics are funny!

I really think FCC has a good thing going for itself. I like the layout and enjoy the challenging projects. Learning while doing is the best form of education for someone like me. Glad to have found this place and thankful for it.

Cheers!

Ok, I think I am on the right track here. So I looked into Flexbox Responsive on w3schools.com. If you click on flexbox a dropdown menu appears. The third option is called CSS Flex Responsive. This explains the relationship between Flexbox and Media Queries. If you scroll down to the bottom of the page to where it says Responsive Website using Flexbox you will see the try it yourself editor. Here is a link to that editor…

So my hope is that once I figure out how to get the containers to flex properly that the alignment of those check boxes will remain.

However, I am contemplating having to two containers combine so that on a mobile viewport you would only see 3 containers instead of four. Perhaps I might not create a 4th container. I could just add the comment box and the submit button to the 3rd container at the bottom.

Also I noticed that on mobile version the word “Survey” at the top overflows on the ride side of the container. I have yet to look into that but I am assuming it is a font-sizing or pixel issue.

Another tidbit I came across was this line of code…

<meta name="viewport" content="width=device-width, initial-scale=1"

From what I understand (and I could definitely be wrong about this) is that this code makes it so that mobile phones or units with smaller screens will be able to adjust the overall look of the webpage based upon the width of the devices viewport instead of what device it is. I am not sure if it is used in conjunction with the @media tag or if it can stand alone and have the same effect on different viewports. If you come across something please feel free to share.

Oh and don’t forget this little piece of information. the @media tags need to be placed above the HTML code and not below it or else to effect won’t work. I noticed however in the test editor of the web example on w3schools that they had @media between the CSS code and the HTML code so I am assuming CSS doesn’t have any affect on the @media portion of the code.

I was searching Youtube and came across some better programs to write and run code in.

https://www.sublimetext.com/ - this is a text editor which can be used for small projects or used to edit small portions of a projects code.

https://code.visualstudio.com/ - this is also a code editor but also so much more. It is actually called an IDE(Integrated Development Environment). To be honest, I don’t fully understand what it does I just know I copied my code into it and I gotta say I am super impressed with just the way that the program links your tags together so you can keep track of things when creating a project. The layout is customizable as well which is nice. It debugs and apparently you can view your code in web view but I don’t know how to get that working yet which is kind of a bummer because you can adjust the window and get different viewports of your project.

I would say go check both programs out on Youtube and see if you might be interested in using them for your personal projects.

Hope you got all that and if you have tried out those programs or others and want to share some know how or tips/tricks I would be happy to learn :grinning:

Cheers :beers:

Good find!.. I just took a cursory look at those… but will definitely need to delve in a bit deeper!

From what I understand so far, the media query (@media) is a rule set that determines whether or not its set of CSS rules apply depending on what the query returns for the screen size, which would override the other CSS in the style sheet, the rules that aren’t in the media query rule set.

Whereas the the meta tag allows developers to control the viewport size and scale… MDN Docs (Mozilla Developer Network) has a good explanation of both of these here:

Beginner’s guide to media queries

Using the viewport meta tag to control layout on mobile browsers

So you have 2 different things, the CSS media query which applies at a certain screen width (it can’t change the viewport, just query what it is and use the CSS the dev optimized for that size in the rule set of the media query section)…

and the HTML meta tag (which would go between the HTML head tags, as that’s were meta tags are placed and it comes before the body tag because you want that stuff to load first before rendering the page).

To mitigate this problem of virtual viewport on narrow screen devices, Apple introduced the “viewport meta tag” in Safari iOS to let web developers control the viewport’s size and scale.

I think for the Survey Form project, the test expects you to use a @media media query.

I think you can use them together, you’d just have to make sure they don’t step on each other, like if you tried to set the scale with the meta tag and the scaling somehow affected what the media query returned (if the user agent and meta tags give it the wrong info, then possibly the CSS for a media query set to check for a viewport of 600 would fail to apply the CSS rule set for that screen/viewport size and the page would not render as desired or intended). These are of course assumptions based on a quick read, I really need to look into it deeper.

Thanks!

Glad you found that!

Thanks for mentioning those. I’ve actually used both and currently have MS VS Code (though I haven’t used it much) and Notepad++ installed.

Notepad++ is similar, or can be configured to be similar to Sublime via plugins and add-ons. Notepad++ is free, whereas, I think Sublime is $99 for a 3yr license after the trial period expires.

I think that’s why I went with Notepad++ . That, and I was already somewhat familiar with it because I used it at a job I had about 10yrs ago. We did website performance testing for clients, where we had to parse HTML using JavaScript and XPATH, and then used something called Selenium to write automation scripts that simulated thousands of users hitting and using a website at once.

I also have JetBrains PyCharm (Community Edition) IDE, and a few other IDEs installed. I installed PyCharm to use with Python, (I think the Professional paid version has plugins for other languages). I find PyCharm is super sloooooooow to load for me, even on my fast desktop, others on their forums have had similar complaints.

As you’ve discovered, IDEs have a lot of features for various languages like checking your syntax as you type and giving you warnings, debuggers, autocomplete for the language’s function calls, methods, and keywords, auto-closing of tags, the ability to set your indentation, (you can set your tab key to be equal to 2, 3, 4 spaces, etc., for easier indentation), auto-indent, etc.

The indentation feature alone was a life saver when I was learning Python. In Python and some other languages, programmers indent their code blocks instead of using braces, brackets, or other visible characters. Get the indentation wrong and you can get errors at runtime. I spent so much time in the beginning hunting down where I missed or added an extra space, it was a real pain. Python tells you the line number, but try finding it in several hundred lines of code when using notepad, which doesn’t have line numbering and you have to already know to turn the status bar on to see the Line/Col the cursor is at (I didn’t at the time) lol… a nightmare.

In addition to the features above, an IDE often has built-in compilers for compiled languages like MS C++, Borland C++, Android Studio, etc., for code that needs to be compiled (C, C++, Java, etc) vs HTML, XML, etc., which are markup languages, vs Perl, PHP, JavaScript, Python, Ruby, etc which are interpreted languages.

Most the time I just use Notepad ++ for JavaScript, HTML, CSS, PHP and Python. I haven’t played with C/C++ in a long time. I took a semester of C at a local community college a long time ago (I probably forgot more C than I learned lol except for the main, general concepts of programming).

Yes, all of these are much much better than Windows notepad or the equivalent on other platforms. I hate Microsoft’s notepad.

For a very basic text editing tasks, I use an old program called Metapad (works fine in Windows 10). Metapad is basically like Windows notepad but with a better interface (IMO anyway) and a few extra features.

It’s good for very simple things you don’t need an IDE for like: making plain text quick notes, or as a glorified clipboard for text to temporarily dump/store things you copied and pasted, opening up .ini files, config (conf files) or other plain text files (no code, special fonts or formatting, etc) that you just want to view really quickly and probably aren’t going to edit that much.

I usually just set it as my default for .txt files. It’s tiny and portable, no installer, you just run it.

So yeah, there’s tons of things like these out there. There’s probably even better tools out there than the ones I currently use. I kinda just started using some of these things decade(s) ago and stuck with them.

I think you need to install this VS Code extension…

Visual Studio Code Live Preview

…it needs Node.js to be installed first to create the server that displays and refreshes the page “automagically” like codepen does when you change your HTML. You can get that here:

Node.js

I just installed it and got the Live Preview extension working in VS Code. Node.js needs about 3/4GB of Hard drive space.

I checked the box to install “Chocolatey” when it asked, and let it handle any dependencies and packages Node.js needed. It opens a PowerShell window, downloads and installs any Windows updates it needs, MSVC runtime libraries, etc.

It took a little while and at one point seemed like it wasn’t really doing anything, but eventually if finished, the PowerShell window closed and when it was done, I could open an HTML file right-click in the file and Choose Live Preview: Show Preview. It was pretty painless to get working.

Basically it runs a local server on your computer. When you aren’t using it, you might want to stop the server so it doesn’t take up system resources for no reason. Unless you have a fast computer with decent amount of RAM.

Just Ctrl+Shift+P and start typing Live Preview… (you can also make your own custom keybinding by clicking the little gear icon on the right of the command).

image

Also, if you just wanted to see different viewport sizes for emulated devices (and make custom ones) you can also use the browser’s in-built Developer Tools to do that.

  1. Save your HTML as “some_name.html”

  2. Save your CSS as “some_name.css”

  3. Link your CSS stylesheet to your html file (for simplicity just keep the 2 files in the same folder, unless you know to use and specify relative paths)

    Add this somewhere at the top of the html file between the <head> </head> tags.

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

(Change the name to whatever your actual file name is)

  1. Open the local html file you want to test in your browser.
    (you can just open a new tab and drag and drop it there and it will open)

  2. Ctrl+Shift+i to open Developer Tools

  3. Click the “Responsive Design Mode” button…

image

Code changes won’t render automagically in the browser, just hit refresh to see them.

In Firefox you can open it directly without having to open Developer Tools by doing Ctrl+Shift+M

In Chrome you have to open the Developer Tools first and then Ctrl+Shift+M.

Now you can play around with the predefined device list or create a custom device.

If you get the VS Code extension working, the process is pretty much the same. But I don’t think there’s a key combo shortcut (you can probably bind one). Just click the 3 stacked lines (menu) in the upper right of the preview window and choose Open Devtools Pane.

image

It’s just using VS Code’s built-in browser engine (probably based on MS Edge which is based on Chrome). But it does show changes in the preview immediately, which is a nice
feature.

Did some more reading on the whole viewport meta tag & CSS media queries topics.

W3Schools has some good info and examples, but the MDN articles are much more in depth and explain it very well.

Heres another great article about

Responsive Web Design

Towards the end of the article in the section titled:

The Viewport Meta Tag

(just before the summary section at the end of the page) it says:

The trouble is that your responsive design with breakpoints and media queries won’t work as intended on mobile browsers. If you’ve got a narrow screen layout that kicks in at 480px viewport width or less, and the viewport is set at 980px, you’ll never see your narrow screen layout on mobile.

By setting width=device-width you are overriding Apple’s default width=980px with the actual width of the device, so your media queries will work as intended.

(So I think that is saying, it tells the device to report its true viewport size. Then you just create a CSS media query viewport range using min‐width or max-width that will apply to anything at or under a specific viewport size).

So you should always include the above line of HTML in the head of your documents.

So I think that answers our question about using media queries and the meta tag together… yes, definitely do that.

The optional scale attribute helps control the zoom level when the page is first loaded and is usually set to 1. But that doesn’t change the layout or design.

That’s why you’d still need a CSS media query if you wanted different designs or layouts at different viewport sizes.

Hello Aramini. Sorry for the late reply.

You shared a lot of information and I am greatful for it plus I have found some useful tips as well we can explore. I’ll save the best for last.

So I would first like to say that I have been thinking about the layout of this survey especially after coming across some new information. I have decided for the purposes of learning together the (media queries) I am going to stick to this design and figure out the code. I will be making some changes to things as well mostly just small design features. I realize that doing well on this project is more important than get the certificate.

After searching around on Youtube, I came across some stuff that is helping me understand things a little better (I say a little because I feel dumber than the computer at times lol). First things first let’s dive into your last two posts.

From what I understand so far, the media query (@media) is a rule set that determines whether or not its set of CSS rules apply depending on what the query returns for the screen size, which would override the other CSS in the style sheet, the rules that aren’t in the media query rule set.

Whereas the the meta tag allows developers to control the viewport size and scale… MDN Docs (Mozilla Developer Network) has a good explanation of both of these here:

Ok I think I see now so lets say I put the check boxes in CSS but not in the media query. With different viewport sizes if the proper instructions are not given to the query then the CSS (I am assuming here) would not apply. Thanks for the explanation about the meta tag, the viewport and their relation to each other, and the two links. I will have a look at them both.

I think for the Survey Form project, the test expects you to use a @media media query.

In order to pass I don’t think that I need to show the use of an @media query I believe it is an option but as stated above if I am going to use this survey project in my portfolio, then I think it is best to include the media query as an example to future employers that I understand how it works and how to use it.

I am glad you are using these programs as well. Thank you for showing me how to set things up and explaining how these programs work. I am going to dive right in.

Great tip on the browser viewport size test. I will definitely keep this in mind to test the layout.

Thank you so much for the information you shared I will pour over it over the next few days and see what I can learn from it.

I have something to share as well…

I may have found a hack around all of this @media stuff!

Great video and I really like his channel. I subbed.

Now my only gripe about flex: wrap is I am not sure that the process alone will look good for my project. With the 3rd container wrapping under the 2nd container might stretch the 2nd container and its contents unless perhaps I set some rules using media query. I’m going to do some investigating and tinkering with the code to see how this works in my case.

I thank you kindly for your time and lengthy replies. Time to dive in and explore all the information you shared. I greatly appreciate it.

1 Like

Yeah, makes sense and I think it’s wise for the sake of learning it well rather than just throwing it out and starting over. Unless there was a major design flaw that you just couldn’t get around (but I don’t think that’s the case here).

What good is it to rush through just to get the certification and not fully understand anything in the end. In that case, what would the certification really represent? :smiley:

For people like you and I who actually want to learn something, I agree that this is a better approach. Cramming for an exam only to forget it all later just shows one is good at taking exams.

If one really learns and understands the material… the exam, certification, or whatever is not even a worry. You will pass way more easily because you put the time in and will actually have the knowledge.

I think that’s more what employers want than a bunch of empty certs. Certs can help get you in the door. But for people who focused only on getting the certs rather than learning the subject well, it will eventually become apparent to employers and colleagues that the knowledge to back those certs up isn’t really there. :smiley:

That holds true for school, that holds true for FCC, and that holds true in the real world work force.

I’m not saying you can retain every little thing, that’s impossible or unrealistic. I’m talking about the overall depth of knowledge. You can always look up things you don’t use often. It’s harder to look things up when you don’t know they exist. :smiley:

lol That’s normal when learning something new. I’ve been doing IT stuff for almost 25yrs and that still happens to me. The way I get through that is take a break for a while and then come back at it fresh. I try not to rely too heavily on just 1 resource, and use many articles, videos, official documentation W3 (not the same as W3 Schools, it’s the standards consortium for HTML, CSS, and other web technologies), MDN, etc. Which it seems you are doing as well. :+1:

Sometimes repetition and seeing the same material presented in a different ways is all we need for it to “click” with us.

Yup. Exactly. They will show up in the smaller viewport size, but they won’t be aligned because they were designed or styled for a bigger viewport size. @media query checks the viewport size then applies rules (if specified) for that viewport size. Otherwise just displays the default design/layout/styling rules which may have only been designed to look good in a bigger viewport.

You’re right. My bad, I think I confused that with the last project: Build a Personal Portfolio Webpage

User Story #9: My portfolio should have at least one media query.

Yeah you can always experiment. You want it to look good width-wise in a smaller viewport. However, you don’t want a mobile user to have to vertically scroll down to infinity either. lol

Not so much an issue for this project, but in real world to avoid that, designers start splitting up content across different pages (where that makes sense). Or they add navigation widgets like that blue scroll widget on right side of this page that allows you to quickly jump to different replies.

Thanks for the updates!

It looks like he has a lot of good stuff on his channel. I will check out that video…

Thanks!

I totally agree with you that it is more important to learn the concepts of each property in relation to a specific code like HTML and CSS. I would hate to be completely lost (not like importer syndrom) on the concepts of how languages works when going into the real world looking for employment or freelancing.

Yup. Exactly. They will show up in the smaller viewport size, but they won’t be aligned because they were designed or styled for a bigger viewport size. @media query checks the viewport size then applies rules (if specified) for that viewport size. Otherwise just displays the default design/layout/styling rules which may have only been designed to look good in a bigger viewport.

I spent some time learning about width, height, min-width and max-width. As well as looking into pixels more as in when to use them compared to when to use (em) or even (rem). I did this to understand how everything relates to each other when using media queries to change the layout and contents on specific viewports. What I came to conclude is that px are great for setting up your width or say text-size. While em or rem is better for use with things like padding and margin or for keeping things relative to roots or parents.

I watched a video on Jim Powells channel that had something to do with (em) unit being a better unit to use for the @media query property. I can’t find the video at the moment but when I come across it I will send the link.

I now integrated (root) properties to the CSS portion of the code to make things shorter. I wasn’t understanding how to really incorporate (root) because I didn’t understand however it is really supposed to function. That was until I came across this video…

Jim is a legend already in my eyes lol! So after a couple of watches everything clicked with me. Now its all up to experimentation haha!

Also, I think position absolute and position relative will affect the web layout on different viewports. I’m going to be mindful of that as I go along here.

I will try and post what I am learning in relation to changing things up with styling and getting the whole viewport figured out. I am really wrestling with that idea of just making 3 containers or perhaps even just 2 containers, 1 small one for the header and the 2nd for everthing else. I understand using two or three containers would make my life so much easier when it comes to viewports, but that isn’t my only reason for wanting to make a switch. I was considering your comment about “scrolling to infinity” and that got me thinking about the flex of the aspect of the labels and check boxes. What I am thinking here is that even if I got the 3rd container to wrap under the 2nd container on a smaller viewport, how long would the 3rd container be with all those check boxes and would the user be scrolling on for “infinity”. Perhaps combining containers 1 and 2 and shrinking things down on a smaller viewport would be a better/best option for this project.

Onwards for now ---->

1 Like

I stand corrected lol!

1 Like

Earlier today I was going through the FCC Responsive Web Design curriculum again (as it’s been a while). Specifically the CSS Flexbox and CSS Grid (last 2 sections before the Projects Section).

You should totally be able to do what you want using CSS Flexbox.

But it dawned on me that for multiple column layouts, CSS Grid seems way easier for those type of layouts. It seems it gives you more control over each column and row in regards to responsiveness.

The last 3 or 4 lessons in the CSS Grid section are mainly what I’m referring to.

I think the styling principles are the same, it’s just how you manipulate the containers.

Not pushing you in any direction, it’s totally up to how you want to do it and there’s no right or wrong here.

Just something to think about and consider.

It feels like just when you (you in the general sense, not you personally) think you’ve got something figured out…something new pops up lol.

But that’s the whole point of the projects; to make you put all these concepts together and to reinforce the understanding by using them in a realistic scenario.

I think as time goes on and you use the stuff more and more in various future projects, it will become easier to just “know” what type of layout and styling will best suit any given design you’re working on.

I think you are on the right track in regards to CSS Flexbox and Grids. I will definitely be diving deeper into those.

Yes the projects help to understand the whole view and scope of the layout and how everything is fitting together. I am understand more how things are working together and interacting with one another.

Watching Jims videos has been a huge benefit to me especially the last video I watched with him actually building a site and getting to see his thought process on things and how he deals with issues when they arise.

I’m going to have another watch of that video when I get some time. I would like to make notes on changes he made and why he made them at certain points in the project. Like what was being done wrong and why he corrected them in the manner he did. I think for myself personally that would be a great help so I can refer to those notes later on while I am working on something.

This was a great watch 2 hours long though so make sure you got your coffee ready lol!

This video helped me to understand why using (rem) instead of (em) for font sizes is better and helps to not let things get crazy.

1 Like

So I thought it would be a good idea to create another pen and just grab the containers out of my survey form code. I’m glad I did because after going over flexbox again a little I realized something…

Instead of wrapping the 4 containers in a flex-container syntax like this:

div class=“flex-container”
div class=“container1” />
div class=“container2” />
div class=“container3” />
div class=“container4” />
flex-container end tag />

I had it like this…

div class=“container1” />

div class=“flex-container”
div class=“container2” />
div class=“container3” />
flex-container end tag />

div class=“container4” />

This all probably took me longer then it should to learn but I was also checking out some other things with CSS and learning how to use a few new programs.

BTW I got live preview up and running on Visual Studio and I thank for letting me know about the inspector tool it is most useful.

So now if you click the link above and resize the web view part of the screen then you will see how it responds to resizing the screen. It is actually quite cool and nice to not have media queries to worry about. Although I will need to implement some resizing rules so I’m afraid media queries is unavoidable for now.

I’m wondering about something else now (so much to take into consideration right!!!). So if I use the pixel unit for my boxes would it be better to use a (em) or (rem) unit when it comes to the view port shrinking down and changing the layout. I am thinking (and you can correct me if I am wrong here…) that using the (em) unit for text resizing would be the way to go that way it stays relevant to the width and height sizes of the container that the content is in. Then there is the other way which is use the (em) unit for sizing up width and height and having the text units as pixels which should resize the text based on the measurements of the container that the contents are in.

Let me you what you think or come across.

Instead of wrapping the 4 containers in a flex-container syntax like this:

div class=“flex-container”
div class=“container1” />
div class=“container2” />
div class=“container3” />
div class=“container4” />
flex-container end tag />

I had it like this…

div class=“container1” />

div class=“flex-container”
div class=“container2” />
div class=“container3” />
flex-container end tag />

div class=“container4” />

Oh yeah, that would definitely make a difference. :smiley:

Cool… glad it’s working! I personally like working locally like that and then uploading to Codepen or JSfiddle, if (or as) necessary. Mainly because I just feel kinda cramped working within the small “screen real estate” in a pen or fiddle.

I also like to pop-out the dev tools inspector tool to it’s own window rather than docked, for the same reasons.

I have a dual monitor setup, a 22" and 24" and lemme tell ya, I would never go back to single monitor. I think it’s worth the investment if you can afford it and plan to do web design or coding or something where you have to sit in front of a screen for long periods of time.

I even almost hate working on built-in laptop screens without a 2nd external monitor.

The new pen looks good. Works nice as intended. When I was helping you with your initial issue of the checkboxes, I didn’t catch that and was fighting that top div (and since it wasn’t my design, I wasn’t sure if you had intended it to behave like that or not). Having spent most of my career as I.T. Support/I.T. Operations I am good at understanding concepts, logical thinking and problem solving. But as far as design aesthetics and more artistic stuff… that has never been my forte.

As far as the units issue… I’ll be honest…

…for me that is the most confusing part. Sooo many units that you would pick for varying reasons. When I first started learning CSS back in maybe, 2005/6 most people seemed to use px, % and em. The relative ones can be tricky too, some relative to browser viewport, some relative to parent styling, etc. I always have to do a lot of time consuming and frustrating trial and error. I haven’t got around to watching that very last video you posted, but I think I need to sooner than later! :smiley: lol

I feel the same but Visual Code has opened me up to new and exciting ways of getting the job done. I’m still just diving in with Visual Studio, grabbed some extensions to test out happy and intrigued all in one.

I’m jealous lol! I’m plugging away here on my little old laptop for now. I am hoping to get into webdesign as well as dabble in other areas of coding so at some point I am going to have to get a better computer but the laptop is fine. I’m forced to have to switch careers but to be honest I feel like this is where I belonged the whole time. I used to dabble in IT when I was younger even ripped apart my families first computer and put it back together by myself. Dabbled in coding, took some design in school as well as arts! I guess I didn’t really understand what I was actually putting together back then but now I do.

Thanks, the layout is so much more fun in responsive mode. I even checked it out on my phone and looks great. I think my next challenge will be getting the labels and the boxes all setup with media queries so everything lines up correctly.

Then it is on to really styling the form. I grabbed an open source design program called GIMP so I can come up with some nice designs for the survey and make it look more appealing. The web is a great source for inspiration in the design aspect. I forgot how much fun it is to play around with designs and create things.

Honestly I’m confused as to the whole use of units too. I think I need to do a review of them and head on over to my play area (lol) to do some testing.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.