DEV Community: millsjessicainokc

CSS Flex box

millsjessicainokc — Thu, 31 Oct 2019 19:55:59 +0000

Flex box is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces.
Why Flex box?For a long time, the only reliable cross browser-compatible tools available for creating CSS layouts were things like floats and positioning. These are fine and they work, but in some ways they are also rather limiting and frustrating.
The following simple layout requirements are either difficult or impossible to achieve with such tools, in any kind of convenient, flexible way:
• Vertically centering a block of content inside its parent.
• Making all the children of a container take up an equal amount of the available width/height, regardless of how much width/height is available.
• Making all columns in a multiple column layout adopt the same height even if they contain a different amount of content.
An aside on the flex model
When elements are laid out as flexible boxes, they are laid out along two axes:
• The main axis is the axis running in the direction the flex items are being laid out in (e.g. as rows across the page, or columns down the page.) The start and end of this axis are called the main start and main end.
• The cross axis is the axis running perpendicular to the direction the flex items are being laid out in. The start and end of this axis are called the cross start and cross end.

The flex container
An area of a document laid out using flex box is called a flex container. To create a flex container, we set the value of the area's container's display property to flex or inline-flex. As soon as we do this the direct children of that container become flex items. As with all properties in CSS, some initial values are defined, so when creating a flex container all of the contained flex items will behave in the following way.
• Items display in a row (the flex-direction property's default is row).
• The items start from the start edge of the main axis.
• The items do not stretch on the main dimension, but can shrink.
• The items will stretch to fill the size of the cross axis.
• The flex-basis property is set to auto.
• The flex-wrap property is set to no wrap.
The result of this is that your items will all line up in a row, using the size of the content as their size in the main axis. If there are more items than can fit in the container, they will not wrap but will instead overflow. If some items are taller than others, all items will stretch along the cross axis to fill its full size.

CSS for beginners from a beginner

millsjessicainokc — Thu, 24 Oct 2019 19:51:01 +0000

Cascading Style Sheets, fondly referred to as CSS, is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web page.
CSS is easy to learn and understood but it provides powerful control over the presentation of an HTML document. Cascading Style Sheet(CSS) is used to set the style in web pages which contain HTML elements. It sets the background color, font-size, font-family, color, … etc property of elements in a web pages.
There are three types of CSS which are given below:

Inline CSS: Inline CSS contains the CSS property in the body section attached with element is known as inline CSS. This kind of style is specified within an HTML tag using style attribute.
Internal or Embedded CSS: This can be used when a single HTML document must be styled uniquely. The CSS rule set should be within the HTML file in the head section i.e the CSS is embedded within the HTML file.
External CSS: External CSS contains separate CSS file which contains only style property with the help of tag attributes (For example class, id, heading, … etc). CSS property written in a separate file with .css extension and should be linked to the HTML document using link tag. This means that for each element, style can be set only once and that will be applied across web pages.
Properties of CSS: Inline CSS has the highest priority, then comes Internal/Embedded followed by External CSS which has the least priority. Multiple style sheets can be defined on one page. If for an HTML tag, styles are defined in multiple style sheets then the below order will be followed.
• As Inline has the highest priority, any styles that are defined in the internal and external style sheets are overridden by Inline styles.
• Internal or Embedded stands second in the priority list and overrides the styles in the external style sheet.
• External style sheets have the least priority. If there are no styles defined either in inline or internal style sheet then external style sheet rules are applied for the HTML tags.

HTML TIPS

millsjessicainokc — Mon, 21 Oct 2019 16:14:39 +0000

HTML TIPS

Here are some HTML (hypertext markup language) tips for newbies. The tips should be very helpful to you especially if you’re just starting out on building web pages.

Always close your HTML tags.
Use HTML comments wisely. To make your HTML code clearer for you (and for others) you can add comments to your code. These are snippets of code that are ignored by the web browser. A comment declaration starts with <! followed by a zero or more comments, followed by >. A comment starts and ends with “--” and doesn’t contain any occurrence of “--”. ( eg. <!--Hello-→)
Never leave your title tag empty.
Use online resources.
Use your browsers development tools.
Use keyboard shortcuts, here are some examples; Save: CTRL+S Refresh: CTRL+R New tab: CTRL+T Close tab: CTRL+W Reopen the last closed tab: CTRL+SHIFT+T Open up browser development tool: F12
There is a HTML Validator that will check your work, you can sync it to your visual studio.

HTML is the foundation to all web pages. In comparison with building a house the HTML would be the walls, sheet rock, foundation. CSS would be the decoration, color of the walls, etc. And Javascript would be the working of the lights and other switches in the house.

Git advice from a beginner for a beginner

millsjessicainokc — Thu, 10 Oct 2019 18:40:24 +0000

Well, I made it through week two of coding school. I learned a lot about Git and Github and the differences between the two. I am realizing I will be using the two consistently throughout my tech career. So Git is a free and open source distributed version control system (VCS) designed to handle everything from very small to very large projects with speed and efficiency. Github is a developmental platform inspired by the way you work. From open source to business you can host and review code, manage projects, and build software alongside 28 million developers.

Handy Tips for Git:

When you make a commit it is very important to have a message line with it.
Merge conflicts cant be ignored/skipped, dig through your code decide what needs to stay and grab whoever is responsible for code your conflicting with.
With Rebase you can shift history and delete stuff. Two ways to use ReBase on the command line: 1. git rebase 2. git pull –rebase
Always work on a local, once you push to remote it gets 100x harder to fix.
Never ever edit in source control directly.
Try to stay working on the command line.

It has been a little bit over-whelming but I am learning to be comfortable with being uncomfortable and trying to stay open-minded and teachable.

My first blog

millsjessicainokc — Thu, 03 Oct 2019 14:05:24 +0000

Hi my name is Jessica. This is my very first blog. This is my first week of coding school. I am a newbie to the tech world. It has been very exciting to me as well as very nerve racking and overwhelming. What I will say has helped me so far is the app called Trello. Its very simple to set up and use for school and home life. Trello lets you make different lists, name them what you want. For example I named mine: working-on, due, past-due and done. So lets say I am working on something like a blog then I will have a tab called ‘a blog’ inside the working on tab. When I am done I can move the tab ‘a blog’ to my done tab. So far it has helped me stay on track of what needs to be done. I still don’t know what I am doing, I am trying to learn something new everyday. I am sure all this will make sense eventually.